Saltar al contenido
Totalmente local

Generador de paleta de colores

Convierte un color base en una paleta completa usando reglas de armonía cromática.

Entrada
0
0
Salida

Generador de paleta de colores

Pega un color base como código hex, valor rgb() o hsl() y esta herramienta construye una paleta completa a su alrededor usando reglas de armonía cromática en lugar de una simple rampa de luminosidad del mismo tono. Elige complementario para un único color opuesto, complementario dividido o triádico para contraste equilibrado, tetradico para un rectángulo de cuatro colores, análogo para tonos vecinos que se complementan naturalmente, o monocromático para tonos y matices de un único tono.

La opción de armonía decide cuántos colores salen: complementario siempre devuelve dos, triádico y complementario dividido devuelven tres, tetradico devuelve cuatro, mientras que el número de colores y el ángulo de paso de tono solo aplican a análogo y monocromático, donde tú eliges cuántos colores y qué tan separados. Calcula en HSL para matemáticas clásicas de rueda de colores, o cambia a OKLCH, que mantiene la misma luminosidad percibida en todos los tonos para que la paleta no salga con una muestra que se vea extrañamente oscura o deslavada en comparación con el resto. Los controles deslizantes de ajuste de saturación y luminosidad refinan toda la paleta después de que se construye la armonía, y la opción de formato de color imprime cada resultado como hex, rgb(), hsl() u oklch().

Cada muestra se verifica contra WCAG AA (4.5:1) como texto sobre fondo blanco y negro, marcada con una marca de verificación o cruz junto a cada proporción: útil para elegir qué colores en una paleta generada son seguros para texto de cuerpo en comparación con solo decoración. Exporta el resultado como una lista simple, un bloque de propiedades personalizadas CSS listo para pegar en una hoja de estilos, o un objeto de color de configuración de Tailwind.

Todo se ejecuta localmente en tu navegador: el color que ingreses nunca se sube a ningún lugar. Copia el resultado, descárgalo como archivo .txt, o envíalo a la entrada de otra herramienta para seguir trabajando con él.

Preguntas frecuentes

¿Qué formatos de entrada acepta para el color base?
Códigos hex (#3b82f6, #38f, con o sin el #), rgb()/rgba() y hsl()/hsla(). Pega uno de esos y la paleta se actualiza al instante.
¿Cuál es la diferencia entre HSL y OKLCH para el cálculo?
HSL es la matemática clásica de rueda de colores y es rápida y predecible. OKLCH es un espacio perceptualmente uniforme, por lo que una paleta construida en él mantiene una luminosidad percibida más uniforme en todos los tonos en lugar de que algunos colores se vean accidentalmente más oscuros o más claros que otros.
¿Por qué cambiar "colores en la paleta" solo afecta a algunas armonías?
Complementario, complementario dividido, triádico y tetradico están definidos por defecto: dos, tres, tres y cuatro colores respectivamente. El conteo solo controla análogo y monocromático, que pueden razonablemente tener cualquier número de colores.
¿Qué significa la marca de verificación o cruz AA al lado de cada color?
Es la proporción de contraste WCAG de ese color usado como texto sobre fondo blanco y sobre fondo negro, con una marca de verificación cuando alcanza el umbral AA de 4.5:1 y una cruz cuando no.
¿Se sube mi color a algún lugar?
No. La paleta se genera completamente en tu navegador: nada de lo que escribas se envía a un servidor.