Cómo usarla
- Introduce un color base o elige uno. «Nuevo color base aleatorio» selecciona uno por ti.
- Elige una armonía. «Tonos claros y oscuros» crea una escala de 11 pasos, del más claro al más oscuro.
- Bloquea los colores que quieras conservar y sigue explorando otros colores base.
- Elige HEX, propiedades personalizadas de CSS o JSON, asigna un nombre y copia el código.
Cómo funciona
Las armonías se crean rotando el tono alrededor del círculo cromático: la complementaria añade el tono opuesto (180°); la análoga, tonos cercanos a 30° y 60° a cada lado; la triádica usa tres tonos separados por 120°; la tetrádica, cuatro tonos separados por 90°; y la complementaria dividida, los dos tonos adyacentes al complementario (150° y 210°).
La rotación se realiza en OKLCH, no en HSL. OKLCH mantiene constante la luminosidad percibida, por lo que un amarillo y un azul de la misma paleta parecen tener un brillo similar, en lugar de que el amarillo resulte deslumbrante. Si un color rotado queda fuera de la gama que pueden mostrar las pantallas sRGB, se reduce su cromaticidad hasta que encaje, manteniendo la luminosidad y el tono.
La escala de tonos claros y oscuros usa pasos de luminosidad OKLCH fijos, con nombres del 50 al 950, similares a los de Tailwind CSS. La cromaticidad se reduce cerca del blanco y del negro para que los tonos más claros no parezcan fluorescentes. Las armonías son un punto de partida: comprueba la combinación de texto y fondo con un comprobador de contraste antes de usarla en el contenido.
Ejemplos
Un color de marca con un acento
El color base #3366cc con «Complementaria» añade #8c6500, un ocre cálido con la misma luminosidad OKLCH. Las combinaciones de azul y amarillo anaranjado son habituales para destacar elementos junto a una marca azul.
Tokens de diseño para una biblioteca de componentes
Elige «Tonos claros y oscuros», asigna el nombre «primary» y exporta las variables CSS. Obtendrás --primary-50 a --primary-950, listas para fondos (50–100), bordes (200–300) y texto (700–900).
Conservar un color mientras exploras
Bloquea el segundo color de una paleta triádica y prueba distintos colores base. La muestra bloqueada conserva su valor HEX mientras los demás cambian.
Preguntas frecuentes
¿Por qué mis colores son distintos a los de una herramienta HSL con rueda cromática?
Esta herramienta rota el tono en OKLCH, un espacio de color perceptual. Sus ángulos de tono no coinciden exactamente con los de HSL, por lo que el «opuesto» de un color puede ser un tono ligeramente distinto al que muestra una herramienta HSL.
¿Puedo usar el JSON en Tailwind CSS?
El JSON relaciona nombres con valores HEX, con la misma estructura que Tailwind acepta para un color en la configuración del tema. En Tailwind 4 también puedes pegar las variables CSS en un bloque @theme después de cambiarles el nombre a --color-…
¿Las paletas generadas son accesibles?
No automáticamente. Una armonía no garantiza el contraste entre el texto y el fondo. Comprueba cada combinación que quieras usar con el comprobador de contraste.
Privacidad
Las paletas se generan en tu navegador. Tus colores no se envían ni se guardan en ningún sitio.