Rueda de colores gratuita
Selector de color HSL interactivo con esquemas de armonía.
Cómo usar
- Haz clic en cualquier punto de la rueda cromática para elegir un color, o ajusta los deslizadores de tono, saturación y luminosidad.
- Visualiza el color seleccionado en los formatos HEX, RGB y HSL debajo de la rueda.
- Haz clic en una muestra de armonía para ver los esquemas complementario, análogo, triádico y complementario dividido.
Preguntas frecuentes
¿Qué es una armonía de colores?
La armonía de colores designa una combinación agradable de colores basada en su posición en la rueda cromática. Las armonías habituales incluyen complementaria (opuesta), análoga (adyacente) y triádica (equidistante).
¿Cuál es la diferencia entre HEX, RGB y HSL?
El HEX es un código hexadecimal de 6 dígitos (#RRGGBB). El RGB usa los valores rojo, verde y azul (0-255). El HSL usa tono (0-360°), saturación (0-100 %) y luminosidad (0-100 %).
¿Puedo usar estos colores en mis diseños?
¡Sí! Copia cualquier valor y pégalo directamente en tu CSS, software de diseño o aplicación web. Todos los valores son conformes con los estándares y ampliamente admitidos.
Una breve historia de la rueda de color
Isaac Newton dibujó la primera. En Opticks (1704) describió los experimentos con prismas que había mostrado por primera vez a la Royal Society en 1672, demostrando que la luz blanca es una mezcla de colores espectrales, y dispuso el espectro en un círculo cerrado para que el extremo rojo pudiera encontrarse con el violeta. Nombró siete colores (rojo, naranja, amarillo, verde, azul, índigo, violeta) elegidos por analogía con las siete notas de la escala musical diatónica, ya que creía que el color y la armonía compartían una estructura matemática. El índigo como banda separada del azul es la víctima más famosa de esa elección estética.
La Teoría de los colores de Goethe (1810) replanteó la rueda en torno a la percepción en lugar de a la física. Dispuso los colores de forma simétrica en mitades cálidas «positivas» y frías «negativas», y observó que los colores opuestos «se evocan mutuamente en el ojo», una articulación temprana de la teoría del proceso oponente que anticipó la ley del contraste simultáneo que Michel Eugène Chevreul publicaría en 1839 desde la manufactura de tapices de los Gobelinos.
Una notación del color de Albert Munsell (1905) fue la primera rueda fundamentada en la percepción humana medida en lugar de en la convención, separando el tono, el valor (luminosidad) y el croma (saturación) en dimensiones independientes, el antepasado directo de todos los espacios de color perceptuales modernos, incluidos CIELAB y OKLCH. La rueda que a la mayoría de los diseñadores les enseñaron en la escuela es más joven: Johannes Itten codificó la rueda RYB de 12 colores en la Bauhaus entre 1919 y 1922, identificando tres primarios (rojo, amarillo, azul), tres secundarios, seis terciarios y siete tipos de contraste de color. Las ruedas que de verdad se usan en pantalla son, de nuevo, distintas: HSL y HSV son reparametrizaciones cilíndricas de RGB inventadas en PARC y otros laboratorios de gráficos en la década de 1970, para que un diseñador pudiera pensar en tres deslizadores intuitivos («este tono, más vívido, más claro») en lugar de en tres opacos canales RGB. El paso más reciente es OKLCH (Björn Ottosson, diciembre de 2020), ahora en CSS Color Module Level 4, una rueda donde los pasos angulares iguales se ven como pasos de tono perceptuales iguales.
Tres familias de rueda
«Rueda de color» oculta el hecho de que hay tres tipos diferentes, cada uno correcto para una situación física distinta:
- RYB (rojo, amarillo, azul), la rueda de enseñanza artística que popularizó Itten. Es una convención basada en la experiencia con los pigmentos, no un modelo de la física. Ninguna combinación de pinturas roja, amarilla y azul puede mezclar todos los colores visibles.
- RGB (rojo, verde, azul): aditivo. Se usa allí donde el color se emite: monitores, teléfonos, proyectores, iluminación de escenario. Anclado en la fisiología: las retinas humanas tienen tres tipos de cono sensibles a las longitudes de onda largas, medias y cortas. Los navegadores y CSS trabajan en RGB, así que la rueda HSL de esta herramienta es una reparametrización polar de sRGB.
- CMY / CMYK (cian, magenta, amarillo + clave/negro): sustractivo. Se usa allí donde el color se refleja: impresión, tinta, tinte. Mezclar disminuye el brillo; las impresoras comerciales añaden negro para conseguir negros reales y para ahorrar tinta.
La consecuencia práctica: los valores HEX, RGB y HSL que exporta esta rueda son precisos para la pantalla. No son precisos para la pintura, y una tirada de impresión CMYK necesitará su propia conversión, un paso que las imprentas suelen gestionar por ti.
Cómo se proyecta HSL en una rueda
HSL significa tono, saturación, luminosidad (hue, saturation, lightness). El tono es un ángulo alrededor de un eje central, con el rojo en 0°, el verde en 120°, el azul en 240°, y volviendo al rojo en 360°. La saturación va de 0 % (gris) a 100 % (totalmente vívido). La luminosidad va de 0 % (negro), pasando por el tono natural al 50 %, hasta el blanco al 100 %. Geométricamente, el modelo es un bicono (dos conos unidos punta con punta) con los colores más saturados en el ecuador. HSV es similar, pero usa el valor (Value) en lugar de la luminosidad, con los colores totalmente saturados en V=100 y todo el modelo con forma de un único cono.
La función hsl() de CSS toma los mismos tres números. La sintaxis moderna está separada por espacios, con un alfa opcional tras una barra:
hsl(210 80% 50%)
hsl(210 80% 50% / 0.5)
hsl(0.5turn 80% 50%) /* turns also accepted */La sintaxis heredada separada por comas hsl(210, 80%, 50%) y el alias hsla() siguen siendo compatibles por retrocompatibilidad. CSS Color Module Level 4 ha estado ampliamente disponible en los navegadores desde alrededor de 2015 para el HSL básico, y la sintaxis moderna llegó más tarde.
Advertencia honesta: HSL no es perceptualmente uniforme. Un amarillo con L=50 % parece mucho más brillante que un azul con L=50 % aunque ambos tengan el mismo número de luminosidad, y una rueda dividida por tono con S y L constantes tendrá amarillos visualmente pesados y azules débiles. Para la visualización de datos y las paletas de marca cuidadosamente calibradas, el nuevo espacio de color oklch() es una mejor opción: los pasos angulares iguales se ven como pasos de tono perceptuales iguales. Para elegir un color y conseguir un HEX, HSL está bien.
Las armonías clásicas, con las matemáticas
Cada esquema de armonía se define mediante un conjunto de desplazamientos angulares respecto a un tono base. Sea B el tono que has seleccionado:
| Esquema | Tonos | Sensación |
|---|---|---|
| Monocromático | B (varía solo S y L) | Sutil, de bajo contraste, apacible |
| Análogo | B − 30°, B, B + 30° | Rico, armonioso, atardeceres, follaje |
| Complementario | B, B + 180° | Dinámico, llamativo |
| Complementario dividido | B, B + 150°, B + 210° | Contraste fuerte pero más suave que el complementario puro |
| Triádico | B, B + 120°, B + 240° | Contraste marcado con equilibrio y riqueza |
| Tetrádico (rectangular) | B, B + 60°, B + 180°, B + 240° | Dos pares complementarios; deja que uno domine |
| Cuadrado | B, B + 90°, B + 180°, B + 270° | División uniforme en cuatro; el equilibrio es más difícil |
Estos ángulos son convenciones de enseñanza heredadas de Goethe e Itten, no leyes psicofísicas. Producen contraste y equilibrio de forma fiable, que es la razón por la que los diseñadores recurren a ellos, pero son heurísticas, no reglas. Trata las muestras de armonía de arriba como puntos de partida desde los que iterar.
Cuándo recurrirías a una rueda
- Diseño web y de interfaces. Elige un color principal de marca, deriva un complementario para el acento de peligro / llamada a la acción, deriva un tercer color triádico para los gráficos. Luego comprueba el contraste frente a tu fondo y tu texto.
- Identidad de marca. Un color de logotipo más una paleta documentada de armonías para el material de marketing.
- Visualización de datos. Las paletas categóricas (más de 10 tonos distintos a igual distancia perceptual) y las escalas secuenciales o divergentes se hacen mejor en OKLCH que en HSL una vez que pasas de tres o cuatro series.
- Diseño de interiores. Un color base para la pared, una moldura análoga, un acento complementario en cojines u obras de arte.
- Gradación de color en fotografía. El verde azulado y naranja (un par complementario) es el cliché del cine moderno porque los tonos de piel cálidos contra las sombras frías se leen como cinematográficos.
- Arte e ilustración de videojuegos. Diferenciar los personajes del entorno mediante el tono, con acentos complementarios para los puntos focales.
El daltonismo y la rueda
Aproximadamente el 8 % de los hombres y el 0,5 % de las mujeres de ascendencia del norte de Europa tienen alguna forma de deficiencia de la visión del color (la tasa varía según la población). Los genes de los conos L y M se encuentran en el cromosoma X, razón por la cual la afección es mucho más común en los hombres. Varias armonías (en particular los pares complementarios rojo/verde) colapsan a un casi monocromo en las formas más comunes:
- Deuteranopia / deuteranomalía: conos de longitud de onda media no funcionales o débiles. La forma más común (alrededor del 6 % de los hombres). El rojo y el verde se confunden.
- Protanopia / protanomalía: conos de longitud de onda larga no funcionales o débiles (alrededor del 2 % de los hombres). Los rojos parecen atenuados, a veces confundidos con el negro.
- Tritanopia / tritanomalía: conos de longitud de onda corta no funcionales o débiles. Muy poco frecuente. Los azules y los amarillos se confunden.
El principio «no te bases solo en el color» de WCAG 2.1 es directamente pertinente: nunca uses el color como único portador de información. Añade contraste de brillo además del contraste de tono, usa patrones o formas junto con el color en los gráficos, y pasa cualquier armonía que generes por un simulador de daltonismo antes de comprometerte con ella. Comprueba también el contraste de WCAG: un mínimo de 4,5:1 para el texto normal en AA, 7:1 en AAA.
Más preguntas
¿Por qué el rojo, el amarillo y el azul se llaman colores «primarios»?
En la tradición artística / RYB (la rueda que Itten enseñaba en la Bauhaus) son los tres pigmentos a partir de los cuales se suponía que todos los demás se podían mezclar. Esa suposición es una convención, no física: ninguna combinación de pigmentos reales rojo, amarillo y azul puede mezclar todos los colores visibles. En la luz aditiva, los verdaderos primarios son el rojo, el verde y el azul (RGB); en la impresión sustractiva son el cian, el magenta y el amarillo (CMY). El RYB persiste en la educación artística porque es pedagógicamente simple y da resultados razonables al mezclar pinturas del mundo real.
¿Es 16:9 lo mismo que la proporción áurea para el color?
No, son dos conceptos no relacionados. La «proporción áurea» surge en la proporción (rectángulos, maquetación) y equivale aproximadamente a 1,618. Las armonías de la teoría del color provienen de la geometría angular en el círculo de tonos: 180° para el complementario, 120° para el triádico, 90° para el cuadrado. No hay ninguna armonía de proporción áurea integrada en la enseñanza estándar de la rueda de color.
¿Los colores que veo aquí coincidirán con lo que se imprime?
Casi con seguridad, no exactamente. Esta rueda es HSL sobre sRGB, color aditivo, diseñado para pantallas. La impresión es CMYK sustractivo. Los azules vívidos y los verdes brillantes que se ven bien en un monitor a menudo se desaturan drásticamente en el papel, y las conversiones fuera de gama pueden desplazar los tonos. Los diseñadores de impresión suelen tener delante una prueba calibrada o trabajan directamente en CMYK en la herramienta de diseño. Usa esta rueda para la maqueta en pantalla y luego convierte.
¿La «psicología del color» (rojo = pasión, azul = calma) se basa en pruebas reales?
Tiene arraigo popular, pero un respaldo empírico débil y culturalmente variable. Distintas culturas asocian los mismos colores con ideas muy diferentes (el blanco es un color de boda en Europa Occidental y un color de luto en algunas partes de Asia Oriental). Usa la psicología del color como punto de partida de diseño y como vocabulario para hablar con los clientes, no como una ley.
¿Se envía algo a un servidor?
No. La rueda se renderiza en un lienzo HTML5; los ángulos de armonía se calculan localmente en JavaScript; las cadenas HEX, RGB y HSL se escriben en tu portapapeles mediante la API del navegador. La página funciona sin conexión una vez cargada.