Crea una paleta de colores de 6 pasos (50, 100, 300, 500, 700, 900) con HEX desde un color base. Copia un tono o toda la rampa en variables CSS.
Todo ocurre localmente en tu navegador. No se sube ni se envía nada.
El color base es el paso 500. Los pasos más claros (50, 100, 300) interpolan hacia blanco; los más oscuros (700, 900) interpolan hacia negro, en espacio HSL.
Los sistemas de diseño rara vez usan un solo color: usan una rampa de tonos relacionados para fondos, bordes, acentos, estados al pasar el cursor y texto. Este generador construye esa rampa a partir de un color base interpolando en el espacio HSL (tono, saturación, luminosidad), en el que "más claro" y "más oscuro" se comportan como nuestro ojo lo espera.
Tu color base se convierte en el paso 500. Los tres pasos más claros (50, 100, 300) se crean interpolando en el espacio HSL hacia el blanco — la luminosidad sube y la saturación se atenúa proporcionalmente. Los dos pasos más oscuros (700, 900) interpolan hacia el negro — la luminosidad baja mientras se mantienen el tono y la saturación. El resultado es una rampa suave y predecible alrededor de tu color base.
La mayoría de los sistemas de diseño solo necesitan unos pocos puntos por color: un tinte casi blanco, un tinte claro, un acento suave, el color principal, un estado más oscuro al pasar el cursor y un tono casi negro para el texto. Los pasos 50, 100, 300, 500, 700 y 900 cubren exactamente esas funciones sin el ruido de una escala de 10 o 12 pasos.
500 para acciones principales y acentos, 700 para los estados al pasar el cursor y activo, 50 o 100 para fondos y rellenos sutiles, 300 para bordes y estados deshabilitados, y 900 para texto sobre fondos claros. Es la misma división de roles que usan la mayoría de los sistemas de tokens (como el de Tailwind).
No. Un valor de color son solo tres números. Todo — la conversión HSL, la interpolación, la salida HEX y la generación de variables CSS — ocurre en JavaScript dentro de tu navegador. No se almacena ni se transmite nada.
No directamente — toda la rampa se deriva del color base para que los pasos se mantengan coherentes entre sí. Para cambiar un tono, elige un color base distinto (o afínalo) en el selector y toda la paleta se regenera al instante.
Si acabas de usar Generador de paletas de color, los siguientes pasos naturales son Convertidor de colores, Verificador de contraste de color, Generador de gradientes CSS, o explora todas las herramientas de Herramientas de archivos.