Generador de paletas de colores armónicos

Crea una paleta armónica y tonos del 50 al 900 a partir de un color base, y comprueba el contraste del texto y la visión del color

El generador de paletas parte de un solo color, por ejemplo el de tu marca. Coloca ese color en la rueda cromática, elige los colores clave que lo acompañan con una de seis reglas (monocromo, análogos, complementario, complementario dividido, triádico o cuadrado) y crea para cada color clave diez tonos, desde el más claro (50) hasta el más oscuro (900). Los colores que una pantalla necesita de verdad, como fondos, bordes, botones y texto, suelen salir de estos pasos.

Cada celda que eliges se evalúa al instante frente a texto blanco y texto negro según WCAG 2.2, y la herramienta busca en la misma fila los tonos que pueden llevar texto encima. También convierte los colores clave a la visión protán, deután y tritán y a una impresión en blanco y negro, y muestra con cifras cuánto se acercan entre sí. Todo el cálculo se hace en tu navegador, y los colores se copian como códigos HEX y variables CSS.

Cuándo usarla

• Solo tienes el color de la marca: elige colores secundarios y de acento con una regla, y obtén de una vez, para cada uno, tonos claros para fondos y tonos oscuros para texto.
• Necesitas tonos para botones, insignias y avisos: elige los colores por función, como un 50 de fondo, un 200 de borde y un 600 de texto de la misma familia, y cópialos como variables CSS. El texto de cada celda muestra al instante si se lee mejor en blanco o en negro.
• Estás eligiendo colores para gráficos o leyendas de mapas: usa la regla triádica o la cuadrada para tomar colores bien separados, y decide si añadir patrones o etiquetas a las combinaciones que marquen «se acercan» en la vista por visión del color.
• Quieres comprobar complementarios o análogos: sirve, por ejemplo, para un trabajo de diseño o para ver qué color queda enfrente de otro. La rueda de pintura (RYB) usa otra base, así que el resultado puede cambiar; consulta más abajo «Por qué hay dos ruedas de color».

Cómo se usa

1. Introduce un color base: escríbelo en cualquier formato, como #2E6BE6, rgb(46 107 230), hsl(220 79% 54%), oklch(56% 0.2 262) o royalblue. El cuadrado de la izquierda abre un selector de color, y también puedes empezar con un color de ejemplo o con el botón al azar.
2. Ajusta en la rueda: arrastra el punto grande para cambiar el tono (alrededor de la rueda) y la saturación (distancia al centro), y usa la barra de abajo para la luminosidad. Con la rueda enfocada, las flechas izquierda y derecha mueven el tono de 1° en 1° y las de arriba y abajo mueven la saturación de 1% en 1% (con Mayús, 10 veces más).
3. Elige una regla de armonía y un tipo de rueda: al pulsar una de las seis reglas, los puntos pequeños se deslizan por la rueda hasta su nueva posición y cambian los colores clave de arriba. La rueda puede ser HSL u OKLCH.
4. Elige en los tonos las celdas que necesites: al pulsar una celda, en «Color seleccionado» aparecen sus códigos, su contraste y los posibles colores de texto de la misma fila. Al pulsar una línea de código se copia ese valor, y «Usar como color base» rehace la paleta a partir de esa celda.
5. Comprueba la visión del color y exporta: si una fila muestra «se acercan» o «no se distinguen», aumenta la diferencia de luminosidad o elige otra regla. Para terminar, copia el HEX, las variables CSS (todos los tonos) o el enlace.

Las seis reglas de armonía

Una regla define cuántos grados se gira el tono desde el color base. El color base se mantiene siempre y solo se calculan los demás colores clave. El monocromo no gira el tono y solo baja la saturación.

La versión anterior mezclaba variantes de luminosidad en cada regla para llenar siempre seis celdas. Esta versión deja arriba solo los colores clave que define la regla y pasa las variantes de luminosidad a la tabla de tonos de más abajo. Así queda claro qué colores salen de la regla y cuáles son variantes de luminosidad del mismo color.

Por qué hay dos ruedas de color: HSL y OKLCH

La rueda HSL mantiene la saturación y la luminosidad HSL del color base y solo gira el tono. La versión anterior y la mayoría de las herramientas gráficas funcionan así, por lo que el complementario tiene el mismo ángulo que en otras herramientas. Su inconveniente es que los números de HSL no coinciden con la luminosidad percibida. CSS Color 4 explica que, con la misma luminosidad HSL, el amarillo parece mucho más claro que el azul, y que una diferencia de tono de 30° se ve parecida entre 220° y 250° pero muy distinta entre 50° y 80°.

La rueda OKLCH mantiene la luminosidad percibida (L) y el croma (C) iguales a los del color base y solo gira el tono. Por eso los colores clave tienen una luminosidad pareja y su contraste con el texto se mueve en un rango similar. A cambio, con la misma luminosidad hay colores que una pantalla (sRGB) no puede mostrar; en ese caso se conservan la luminosidad y el tono y solo se reduce el croma. Va en la misma dirección que el ajuste de gama de CSS Color 4 §14, que mete un color en el rango bajando el croma. La zona rayada de la rueda es justo la que no se puede mostrar con esa luminosidad.

L es la luminosidad OKLCH (de 0 a 1). Si buscas un contraste llamativo, HSL es mejor punto de partida; si buscas una combinación sobria y pareja, lo es OKLCH. La rueda de pintura (RYB) que se enseña en clase de plástica se basa en rojo, amarillo y azul, mientras que las dos ruedas de esta herramienta salen del color de pantalla (RGB). Como los colores básicos que dividen la rueda son distintos, el mismo color queda en otro lugar y su opuesto, el complementario, también sale distinto. Ninguna es incorrecta: parten de bases diferentes.

Cómo se crean los tonos

Los pasos son diez posiciones de luminosidad, con la L de OKLCH bajando de 0,97 (50) a 0,25 (900) de 0,08 en 0,08. Las celdas más claras que el color base se mezclan en línea recta hacia el blanco en OKLab, y las más oscuras hacia el negro, hasta que la luminosidad llega al valor objetivo. El tono no cambia y el croma disminuye al mismo ritmo a medida que el color se acerca al blanco o al negro, de modo que las celdas muy claras no se vuelven fosforescentes. El espacio de mezcla por defecto de color-mix() en CSS Color 5 es Oklab, así que equivale a color-mix(in oklab, base, white n%).

Cada color clave entra sin cambios en la celda cuya L esté más cerca y se marca con un punto (•) en la tabla. El número de paso es una posición de luminosidad, así que un amarillo claro (#F9A825, L 0,792) cae en la celda 200 y un azul marino intenso, entre la 700 y la 800. En muchos sistemas de diseño el «amarillo 500» es un amarillo vivo, pero en esta tabla el 500 de la fila amarilla tira a marrón. Es una decisión deliberada: el mismo número significa la misma luminosidad en todos los tonos, lo que facilita combinar colores distintos.

En la fila del gris, el texto blanco supera 4,5:1 desde el 600, y el texto negro lo supera hasta el 500. Las filas de color cambian más o menos por ahí, pero aun con la misma L cada color tiene una luminancia WCAG distinta, y el límite puede moverse una celda. El punto en que el texto de una celda pasa de blanco a negro es ese límite.

Cómo leer el contraste del texto

• Umbrales: WCAG 2.2 pide 4,5:1 para texto normal (1.4.3, AA), 3:1 para texto grande (18 pt o más, o 14 pt o más en negrita) y 7:1 en el criterio más estricto 1.4.6 (AAA). Las etiquetas de la muestra «AA», «AAA», «Solo texto grande» y «No cumple» siguen estos tramos.
• Sin redondeo: Understanding SC 1.4.3 indica que la relación calculada no se redondea (4,499:1 no llega a 4,5:1). Por eso esta herramienta redondea hacia abajo a un decimal y juzga con el valor mostrado.
• Siempre pasa el blanco o el negro: para cualquier color, el texto blanco o negro que dé más contraste nunca baja de 4,58:1. En la luminancia en que ambos contrastes se igualan (unos 0,179), los dos valen 4,58:1. Por eso el color del texto de cada celda es siempre el que supera 4,5:1.
• Texto posible en la misma fila: desde la celda elegida, la herramienta busca hacia arriba y hacia abajo el paso más cercano con un contraste de 4,5:1 o más. En la fila base de la primera pantalla, el texto en 600 (#2558C0) sobre el fondo 50 (#F0F5FF) da 5,9:1, y el 600 sobre el 100 da 4,6:1. El propio color base (500) no llega a 4,5:1 con ninguna celda de su fila, así que lo correcto es usar texto blanco (4,8:1).

Vista por visión del color y la marca «se acercan»

Los colores clave se muestran uno junto a otro tal como los ven la visión protán (ceguera al rojo), deután (ceguera al verde) y tritán (ceguera al azul), y como quedarían en una impresión en blanco y negro. Protán y deután usan el modelo de Machado et al. (2009) y tritán el método de Brettel et al. (1997), con intensidad total, es decir, dicromacia por falta de ese tipo de cono. El blanco y negro es la luminancia WCAG pasada a gris.

La cifra a la derecha de cada fila es la distancia OKLab (ΔEOK) entre los dos colores clave más cercanos en esa vista. CSS Color 4 toma una diferencia OkLCh de 0,02 como una diferencia apenas perceptible (JND). Esta herramienta muestra «no se distinguen» por debajo de 0,02 y «se acercan» cuando la distancia baja de la mitad de la medida en los colores originales. El criterio de la mitad es un umbral de aviso propio de la herramienta, no un estándar.

WCAG 2.2 1.4.1 exige no transmitir información solo con el color. Aunque no aparezca «se acercan», no distingas estados ni categorías únicamente por el color; añade texto, iconos o patrones. Si en la fila de blanco y negro los colores se acercan, la solución más rápida es separar más su luminosidad.

El ejemplo de la primera pantalla, paso a paso

La primera pantalla usa el color base #2E6BE6, la regla de complementario dividido y la rueda HSL. Desde el tono HSL 220°, al girar +150° (10°) y −150° (70°) manteniendo la saturación en 79% y la luminosidad en 54%, salen los otros dos colores.

La luminosidad HSL es 54% en los tres, pero la de OKLCH se abre a 0,560, 0,629 y 0,873, de modo que el verde lima cae en la celda 100 y el bermellón en la 400. Sobre el lima solo el texto negro supera el nivel de texto normal, y sobre el azul solo el blanco. Si con el mismo color base eliges la rueda OKLCH, las tres luminosidades se acercan a 0,56 y los colores se vuelven más sobrios.

Errores frecuentes

• Creer que las herramientas se contradicen con el complementario: la rueda de pintura (RYB), la de pantalla (HSL) y la perceptual (OKLCH) dan complementarios distintos para el mismo color. Comprueba primero qué rueda se ha usado.
• Pensar que la misma luminosidad HSL es el mismo brillo: como en el ejemplo de la primera pantalla, tres colores con HSL 54% tienen luminosidades reales muy distintas. Para elegir un color de texto, guíate por el contraste o por la L de OKLCH.
• Usar un color clave directamente como texto: un color clave muy saturado muchas veces no llega a 4,5:1 ni siquiera sobre blanco. Para texto es más seguro usar las celdas 600 a 900 de la misma fila.
• Querer igualar los números de paso con otro sistema de diseño: aquí los números son posiciones de luminosidad. Que el amarillo 500 tire a marrón no es un error, y el amarillo claro está en la celda 200.
• Aplicar una regla de armonía a un color neutro: el gris, el blanco y el negro no tienen tono, así que cualquier regla da el mismo gris. Arrastra el punto de la rueda hacia fuera para darle al menos algo de saturación. El blanco y el negro están en los extremos de la luminosidad (100 % y 0 %), así que arrastrar no basta: mueve antes el control de luminosidad hacia el centro.
• Intentar ajustarse a los colores web seguros: la paleta web segura tiene 216 colores formados con seis niveles de rojo, verde y azul (00, 33, 66, 99, CC, FF), un estándar de pantallas antiguas que mostraban pocos colores. Las páginas web actuales no necesitan ajustarse a ella; úsala solo para un sistema antiguo con paleta limitada.

Límites y precauciones

• Las reglas de armonía solo ordenan las relaciones de tono y no garantizan que el resultado sea bonito. Una regla es un punto de partida, y adaptarla al significado de la marca y a su uso depende de ti.
• Los colores se calculan en sRGB y se exportan en HEX. El mismo HEX puede verse distinto según el monitor, y esta herramienta no genera valores CMYK para imprimir.
• La simulación de visión del color es una aproximación basada en una dicromacia promedio. Lo que se ve de verdad varía de una persona a otra, y una deficiencia leve reduce las diferencias menos de lo que se muestra.
• La comprobación de contraste solo considera el color del texto y el del fondo. El grosor y el tamaño de la letra, los patrones de fondo y los efectos translúcidos hay que revisarlos a mano.
• La transparencia (alfa) de la entrada se descarta y el color se calcula como opaco. El enlace guarda solo el color, la regla y el tipo de rueda, no la celda que elegiste.

Referencia: el 20-10-2026 se revisaron CSS Color 4 (borrador del 18-08-2025), CSS Color 5 (borrador del 13-09-2026) y WCAG 2.2. Las cifras de las tablas se recalcularon con el propio código de cálculo de esta herramienta.

Fuentes

• 01W3C: CSS Color Module Level 4 (CRD 2025-08-18)§7 HSL y la desigualdad del ángulo de tono (ejemplos 220°/250° y 50°/80°), §9.2 Oklab y OkLCh (L del azul 0,452, del amarillo 0,968), §14 ajuste de gama y JND de 0,02
• 02W3C: CSS Color Module Level 5 (WD 2026-09-13)§3 color-mix(), que usa Oklab si no se indica el espacio de mezcla
• 03Björn Ottosson: A perceptual color space for image processing (2020)Matrices de conversión sRGB a Oklab
• 04W3C: WCAG 2.21.4.1 Uso del color, 1.4.3 contraste de 4,5:1 (3:1 para texto grande), 1.4.6 de 7:1 y la fórmula de la relación de contraste
• 05W3C: Understanding SC 1.4.3 Contrast (Minimum)La relación no se redondea (4,499:1 no llega a 4,5:1); texto grande de 18 pt, o 14 pt en negrita
• 06Machado GM, Oliveira MM, Fernandes LAF. A Physiologically-based Model for Simulation of Color Vision Deficiency. IEEE TVCG 2009;15(6):1291–1298Matrices de simulación de protán y deután
• 07DaltonLens: Understanding LMS-based Color Blindness Simulations (2021)Simulación de tritán por el método de Brettel et al. 1997 (longitudes de onda de anclaje de 485 y 660 nm)
• 08Adobe Express: Color wheel explainedDos tipos de rueda de color: RYB para pintores que mezclan pintura y RGB para pantallas de ordenador y televisión; los complementarios son los dos colores opuestos en la rueda

Preguntas frecuentes

Herramientas para usar con ella