Mezclador de colores

Cómo funciona la mezcla de colores

Esta herramienta usa una mezcla aditiva en el espacio de color RGB. Los componentes RGB de cada color se promedian según su peso. Eso simula cómo se mezcla la luz (como focos superpuestos), al contrario que la mezcla sustractiva (como mezclar pintura).

¿Puedo mezclar más de dos colores?

¡Sí! Haz clic en «+ Añadir un color» para añadir hasta 8 colores. Usa los deslizadores de peso para controlar la contribución de cada color a la mezcla.

Cómo usar

1. Elige tus colores: usa los selectores para escoger cada color. Haz clic en «+ Añadir un color» para añadir más espacios (hasta 8).
2. Ajusta el peso de cada color: arrastra el deslizador debajo de cada color para controlar cuánto contribuye a la mezcla final.
3. Previsualiza el resultado: el color mezclado se muestra en directo con sus valores hex, RGB y HSL.
4. Copia el color mezclado: haz clic para copiar el valor hex o RGB obtenido, para usarlo en tu diseño o tu código.

¿Por qué usar el mezclador de colores?

Mezclar colores es una operación fundamental en diseño, crear tintes (mezclando con blanco), sombras (con negro), tonos (con gris) o colores intermedios armónicos entre dos colores de marca. Los diseñadores la usan para generar variantes de paleta, encontrar tonos intermedios para paradas de degradado, garantizar relaciones de contraste accesibles entre colores adyacentes y crear estados de hover/focus vinculados visualmente a los colores base.

Las tres cosas que la gente quiere decir con "mezclar colores"

Cuando alguien sin formación específica dice "mezclar dos colores", casi siempre se refiere a una de tres operaciones completamente distintas. Elegir el modelo equivocado es la mayor fuente de confusión en las herramientas de color.

La mezcla aditiva es lo que ocurre cuando se superponen haces de luz coloreada. Dos linternas, una roja y una verde, apuntando al mismo trozo de pared blanca, producen una mancha amarilla. Una tercera linterna azul añadida encima produce blanco. El modelo es "más luz = más brillante", y las tres primarias son rojo, verde y azul porque los conos humanos tienen sus picos de sensibilidad aproximadamente en esas bandas. Cualquier pantalla, teléfono, monitor, televisor o proyector, usa mezcla aditiva. Cada píxel contiene tres subpíxeles (R, G, B), y poner los tres al máximo produce blanco. Por eso el modelo de color por defecto del web es RGB: el medio es emisivo y las matemáticas casan con el medio.

La mezcla sustractiva es lo que ocurre cuando los colorantes absorben longitudes de onda de la luz blanca. Una tinta cian absorbe la luz roja y refleja verde y azul. Una tinta amarilla absorbe el azul y refleja rojo y verde. Superpón cian sobre amarillo y las únicas longitudes de onda que sobreviven a ambos filtros son las verdes. El modelo es "más pigmento = más oscuro" y las tres primarias sustractivas son cian, magenta y amarillo. CMY en teoría se mezcla a negro a plena intensidad, pero en la práctica los pigmentos son imperfectos y el resultado es un marrón turbio, así que la impresión comercial añadió una tinta negra aparte (la K de CMYK) para los negros reales. Un mezclador de colores que corre en pantalla no puede realizar verdadera mezcla sustractiva porque la pantalla en sí es aditiva; solo puede simular la apariencia.

La teoría tradicional del color artístico nos enseñó que las primarias son rojo, amarillo y azul. La tradición pictórica, y la Teoría de los colores de Goethe de 1810, y el manual Bauhaus de Itten El arte del color de 1961, codificaron RYB como base de las paletas artísticas. RYB no es físicamente exacto. Las verdaderas primarias sustractivas que maximizan la gama son CMY, no RYB. Pero RYB ha aguantado siglos porque las pinturas reales no son filtros puramente sustractivos: un tubo de rojo cadmio y un tubo de azul ultramar se mezclan en un violeta reconocible, y el sistema "funciona" lo bastante bien en el caballete para enseñar a generaciones de estudiantes. Esta herramienta es un mezclador RGB aditivo, que es lo que el web hace en realidad, así que "rojo más verde" da amarillo, no el marrón que produciría un mezclador de pintura.

Espacios de color, sRGB, Display P3, Rec. 2020, Adobe RGB

Un modelo de color (RGB, CMYK, HSL) te dice qué dimensiones tienes. Un espacio de color te dice exactamente a qué colores físicos corresponde cada triplete numérico: fija la cromaticidad de las primarias, el punto blanco y la función de transferencia. Dos pantallas que hablan "RGB" pueden producir rojos visiblemente distintos para el mismo código si apuntan a espacios de color diferentes.

• El sRGB (IEC 61966-2-1:1999) es el defecto del web y lo es desde finales de los 90. Creado por Hewlett-Packard y Microsoft en 1996 para estandarizar el color entre monitores PC, escáneres y la web temprana. Aproximadamente el 35% del área de cromaticidad visible CIE 1931. Cualquier cosa que no especifique un espacio de color en la web es sRGB por convención.
• El Display P3, la introducción wide-gamut de Apple. Apple lanzó el iMac con pantalla Retina 5K a finales de 2015 con un panel wide-gamut orientado a Display P3, y luego lo fue desplegando en el iPhone (iPhone 7, septiembre de 2016), iPad Pro y la gama MacBook Pro. ~25% de gama más amplia que sRGB, en particular en rojos y verdes saturados. CSS Color Module Level 4 añadió la sintaxis color(display-p3 r g b).
• La Rec. 2020 (ITU-R Recommendation BT.2020, primera publicación en 2012) es el espacio de color de la televisión ultra alta definición y la base de la mayoría de flujos HDR. ~75% del espectro visible con primarias situadas sobre el locus espectral. Casi ninguna pantalla de consumo puede reproducir hoy la gama completa de Rec. 2020; es una especificación compatible hacia el futuro.
• El Adobe RGB (1998) definido por Adobe Systems para dar a fotógrafos y diseñadores de impresión una gama más amplia que sRGB. Aproximadamente un 50% más amplia. No es un espacio de color web, los navegadores no lo presuponen, pero las cámaras profesionales, Lightroom y Photoshop lo usan por defecto en flujos de impresión.

Espacios de color perceptuales, y por qué mezclar en sRGB da puntos medios turbios

Las coordenadas sRGB y HSL en las que la mayoría de herramientas web almacenan y manipulan el color no son perceptualmente uniformes. Un paso unitario en el canal L de HSL no corresponde a un paso unitario en cómo de claro se ve el color. Es la razón profunda por la que mezclar dos colores promediando sus canales da resultados poco intuitivos.

El ejemplo canónico: toma rojo puro #ff0000 y verde puro #00ff00. Promedia los canales RGB componente a componente: el rojo pasa de 255 a 127, el verde de 0 a 127, el azul se queda en 0. El resultado es #7f7f00, un oliva que parece apagado, oscuro y un poco turbio. No tiene nada que ver con el amarillo brillante #ffff00 que obtendrías si de verdad apuntaras una linterna roja y una verde al mismo trozo de pared. Dos problemas que se acumulan lo explican.

Primero, sRGB está codificado en gamma. El número almacenado como 127 no representa la mitad de la luz que representa 255. La función de transferencia es no lineal: 127 en sRGB corresponde aproximadamente al 21% de la intensidad lineal de luz, no al 50%. Así que al promediar valores codificados en gamma promedias algo así como la raíz cuadrada de la intensidad, no la intensidad misma, y el resultado sale mucho más oscuro de lo que debería. El arreglo solo para ese problema es convertir sRGB a RGB lineal antes de promediar y luego volver. Con promedio en RGB lineal, rojo más verde dividido por dos se convierte en un verde-amarillo mucho más brillante y creíble.

Segundo, ni siquiera el RGB lineal coincide con la percepción. Pasos iguales en RGB lineal siguen sin ser pasos iguales en brillo o cromaticidad percibidos. El punto medio de rojo y azul en RGB lineal es una lavanda desaturada, no el violeta rico que el diseñador espera. El arreglo para ese problema más profundo es mezclar en un espacio perceptualmente uniforme, Lab, Oklab, OKLCH. Convierte ambos extremos a Oklab, interpola linealmente los canales L, a y b, vuelve a sRGB. El punto medio de rojo y verde en Oklab es un amarillo vivo y creíble. El punto medio de rojo y azul es un magenta saturado. El punto medio de amarillo y azul es un gris neutro limpio en vez del verde pantanoso que se obtiene con RGB ingenuo.

Esta herramienta promedia actualmente en sRGB codificado en gamma, el modelo más simple y el que produce esos puntos medios turbios. Es correcto para ese caso simple pero no coincide con lo que la luz física o la percepción humana hacen en realidad. Si estás eligiendo paradas de degradado o medios tonos de paleta y no quieres caer en la trampa del gris turbio, usa la nueva función CSS color-mix() descrita más abajo o alguna de las bibliotecas de matemáticas de color.

CIE Lab, Oklab, OKLCH, la pila perceptual

El CIE Lab (también escrito CIELAB) fue publicado por la Comisión Internacional de la Iluminación en 1976. Tiene tres ejes: L* para la luminosidad de 0 (negro) a 100 (blanco), a* para el eje cromático verde-rojo y b* para el eje cromático azul-amarillo. Diseñado para que diferencias numéricas iguales correspondan a diferencias percibidas aproximadamente iguales. Durante medio siglo fue el espacio perceptual estándar en gráficos, ciencia de la visión y gestión del color. Debilidades conocidas: los azules se vuelven antinaturalmente violetas al interpolar; el eje de luminosidad no sigue perfectamente la percepción en colores muy saturados.

El CIE LCH es simplemente CIE Lab expresado en coordenadas polares: L para luminosidad, C para chroma (distancia al eje neutro), H para ángulo de tono. Más útil que los a*/b* en crudo para diseñadores porque operaciones como "desplazar el tono 30 grados" o "bajar el chroma a 0" se mapean directamente a modelos mentales naturales.

El Oklab, de Björn Ottosson, se publicó en diciembre de 2020 en un ensayo titulado "A perceptual color space for image processing" en bottosson.github.io. Ottosson es un ingeniero sueco que había trabajado con color en la industria del videojuego. Oklab arregla la mayoría de los defectos conocidos de CIE Lab, en particular el desplazamiento azul-violeta en la interpolación y la sobrepredicción de diferencias de chroma en colores saturados. El W3C adoptó Oklab en CSS Color Module Level 4 en aproximadamente un año tras la entrada de blog de Ottosson, una estandarización extraordinariamente rápida para un espacio de color nuevo. Hoy todos los navegadores grandes admiten oklab() de forma nativa.

El OKLCH es Oklab en coordenadas cilíndricas: L para luminosidad de 0 a 1, C para chroma de 0 a aproximadamente 0,4, H para tono de 0 a 360 grados. Se está convirtiendo en el espacio de color más recomendado para paletas de design system precisamente porque las operaciones en sus ejes se mapean limpiamente a la intuición del diseñador, y porque la interpolación entre dos colores OKLCH produce los degradados más suaves y agradables de cualquier espacio actualmente disponible en CSS.

La función CSS color-mix(), mezcla perceptual sin JS

El CSS Color Module Level 5 introdujo color-mix(), que toma dos colores, un espacio de color de interpolación y pesos opcionales, y devuelve el resultado mezclado calculado íntegramente por el navegador. La sintaxis es color-mix(in oklch, red 50%, blue 50%). Puedes cambiar el espacio (in srgb, in oklab, in lch, in hsl longer hue, etc.) y el cálculo corre en ese espacio. El soporte de navegadores llegó a principios de 2023:

• Safari 16.2, diciembre de 2022 (el primer navegador en lanzarlo)
• Chrome 111, marzo de 2023
• Edge 111, marzo de 2023 (misma release de Chromium)
• Firefox 113, mayo de 2023

Un mezclador de colores sin JavaScript y nativo CSS ha estado ampliamente disponible durante más de dos años. Cualquier herramienta que se apoye en color-mix() obtiene resultados perceptualmente correctos "gratis", el navegador gestiona la pila de conversión. El propio CSS Color Module Level 4 alcanzó estatus de Candidate Recommendation en 2022 y está ampliamente soportado en los navegadores modernos.

Bibliotecas JavaScript para matemáticas de color

Tres bibliotecas dominan cuando no puedes o no quieres apoyarte en color-mix():

• culori.js de Dan Burzo, la más flexible. Soporta casi cada espacio de color nombrado (sRGB, RGB lineal, P3, Rec. 2020, Lab, LCH, Oklab, OKLCH, HSL, HSV, Cubehelix, OKHSL, OKHSV y más). Tree-shakable, ESM-first. La implementación de referencia para la generación de paletas en OKLCH.
• colorjs.io de Lea Verou y Chris Lilley, la biblioteca "de los autores de la spec", en cierto modo, ya que Lilley co-edita las specs del CSS Color Module. Fiel a la semántica de la spec CSS Color, bundle algo mayor que culori. Buena cuando quieres resultados que coincidan exactamente con lo que calcularía el navegador.
• chroma-js de Gregor Aisch, más antigua, ergonómica, más pequeña. Excelente para escalas de color e interpolación simple. Soporte Lab y LCH pero no Oklab en su última versión mayor; forks comunitarios lo han añadido.

Una breve historia de la teoría del color

La teoría occidental del color empieza con Isaac Newton en 1665. Confinado fuera de Cambridge durante la peste, Newton hizo pasar la luz solar por un prisma e identificó siete colores distintos (rojo, naranja, amarillo, verde, azul, índigo, violeta). Después los dispuso en un círculo cerrado, el círculo cromático de Newton, conectando los extremos espectrales (violeta y rojo) por un magenta no espectral. El círculo se publicó en su Opticks en 1704 pero se elaboró en 1665-1666.

Johann Wolfgang von Goethe publicó Teoría de los colores (Zur Farbenlehre) en 1810. Donde Newton era físico, Goethe era poeta investigando la psicología del color: cómo los colores se sentían, contrastaban y combinaban en la mente del observador. Su trabajo era científicamente erróneo en muchos puntos pero introdujo ideas sobre colores complementarios, imágenes posteriores y el carácter afectivo de las paletas cálidas y frías que aún se enseñan hoy.

Johannes Itten, maestro en la Bauhaus, publicó El arte del color (Kunst der Farbe) en 1961. Su círculo cromático RYB de doce radios y sus siete contrastes de color (tono, claro-oscuro, frío-cálido, complementarios, simultáneo, saturación, extensión) se convirtieron en el marco docente dominante de la educación en diseño durante la segunda mitad del siglo XX.

Pantone fue creada por Lawrence Herbert, que se unió a Pantone Inc. como empleado en 1956 y compró la empresa en 1962. En 1963 lanzó el Pantone Matching System (PMS): una biblioteca normalizada de tintas de tinta plana identificadas por número, con muestrarios impresos que permitían a un diseñador de Nueva York y un impresor de Hong Kong especificar y reproducir exactamente el mismo color sin ambigüedad. Pantone no es un espacio de color en sentido técnico CIE, es un catálogo propietario de mezclas físicas de tinta, pero su influencia en los flujos de color profesional es enorme.

Los HSL y HSV los introdujo Alvy Ray Smith en su artículo de 1978 "Color Gamut Transform Pairs", publicado en las actas SIGGRAPH cuando estaba en Xerox PARC (Smith después cofundó Pixar). Buscaba coordenadas de color que se mapearan más naturalmente a la intuición artística que RGB. HSL se convirtió en el modelo de color "amigable al diseñador" por defecto en la web y sigue siendo la notación no-RGB más reconocida en CSS. Es, sin embargo, perceptualmente no uniforme, OKLCH es su sucesor moderno.

Contraste y accesibilidad, WCAG 1.4.3

Cuando un diseñador mezcla dos colores para crear un tercero, un estado hover, un fondo teñido, una parada de degradado, el color resultante sigue teniendo que cumplir los requisitos de contraste frente a cualquier texto o icono colocado encima. El criterio de éxito WCAG 2.x 1.4.3, "Contraste (mínimo)", exige:

• Un ratio de contraste de al menos 4,5:1 para texto de tamaño normal.
• Un ratio de contraste de al menos 3:1 para texto grande (18pt regular o 14pt negrita y superior) y para objetos gráficos y componentes de UI.

El ratio de contraste se calcula usando la luminancia relativa, la conversión a RGB lineal descrita arriba y una suma ponderada de los canales linealizados (L = 0,2126·R + 0,7152·G + 0,0722·B). El ratio entre dos colores es (L_más_claro + 0,05) / (L_más_oscuro + 0,05). Implicación práctica: las paradas intermedias de un degradado pueden pasar el control de contraste en los extremos pero fallar dramáticamente por el medio. Si una marca mezcla un azul marino oscuro con un amarillo brillante para producir un oliva de estado hover, ese oliva puede caer en la zona de fallo WCAG frente a texto blanco y a texto negro.

Más preguntas

¿Por qué rojo más verde no me da marrón?

Porque esta herramienta, como toda pantalla, usa mezcla RGB aditiva, y luz roja más luz verde da amarillo. El marrón es lo que se obtiene al mezclar pintura roja y verde, que es sustractiva: cada pigmento absorbe longitudes de onda distintas y las longitudes de onda supervivientes parecen marrones. Para simular con precisión la "mezcla de pintura" en pantalla harían falta modelos espectrales o conscientes de pigmento (Procreate y Adobe Fresco lo hacen para apps de arte); los mezcladores web genéricos, incluido este, son honestos mezcladores RGB aditivos y te darán amarillo, no marrón.

Mis puntos medios parecen turbios, ¿cuál es el arreglo?

Dos capas de arreglo. El paso mínimo de corrección es la mezcla en luz lineal: convertir sRGB a RGB lineal antes de promediar y volver. Eso solo hace que rojo+verde→amarillo se vea mucho más brillante y creíble. El arreglo perceptual completo es mezclar en OKLCH u Oklab, convertir ambos extremos a OKLCH, interpolar, volver. La CSS color-mix(in oklch, red, green) del navegador hace exactamente esto en una línea y funciona en cualquier navegador lanzado tras mayo de 2023. Para pipelines JavaScript, culori.js es la biblioteca de referencia.

¿Cuál es el espacio de color adecuado para mezclar paletas de design system?

OKLCH es la respuesta de consenso actual. Es perceptualmente uniforme, tiene ejes limpios que casan con la intuición del diseñador (luminosidad / chroma / tono), produce interpolaciones de degradado sin puntos medios turbios y se envía en todo navegador moderno vía oklch() en CSS Color 4 y color-mix(in oklch, ...) en CSS Color 5. Los design systems construidos en 2024-2026 cada vez pasan más de paletas HSL a paletas OKLCH por exactamente esta razón.

¿Pasará mi color mezclado los controles de contraste WCAG?

Esta herramienta no expone actualmente el ratio de contraste del resultado, pero puedes calcularlo: la luminancia WCAG es L = 0,2126·R + 0,7152·G + 0,0722·B tras linealizar los canales sRGB, y el ratio de contraste entre dos colores es (L_más_claro + 0,05) / (L_más_oscuro + 0,05). Los objetivos son 4,5:1 para texto normal y 3:1 para texto grande o componentes de UI. El Color Contrast Checker en la zona de herramientas relacionadas hace este cálculo directamente.

Herramientas relacionadas