Qué es la interpolación de color
Mezclar dos colores en un ordenador consiste en calcular puntos intermedios entre dos conjuntos de números. Si el color A vale 0 en un canal y el color B vale 255, el punto a mitad de camino vale 127,5, que se redondea a 128. Ese cálculo se llama interpolación, y el resultado depende de qué números interpolas: los canales rojo, verde y azul; el tono, la saturación y la luminosidad; o las coordenadas de un espacio perceptual.
En este mezclador de colores eliges el color A, el color B, de 3 a 20 pasos y el espacio de interpolación. La escala incluye los dos extremos, así que 5 pasos son A, tres tonos intermedios y B. Cada muestra enseña su código HEX y lo copia con un clic, el color del punto medio aparece destacado y puedes copiar la escala completa como variables CSS o como JSON, listas para un archivo de tokens.
RGB, HSL y OKLCH en la práctica: rojo con azul
La forma más clara de ver la diferencia es mezclar rojo (#FF0000) con azul (#0000FF) y observar el punto medio en cada espacio.
| Espacio | Punto medio | Qué ocurre |
|---|---|---|
| RGB | #800080 | Se promedia cada canal: rgb(128, 0, 128). Un morado oscuro que se percibe más oscuro que los dos extremos. |
| HSL | #FF00FF | El tono va de 0° a 240° por el arco más corto, pasando por 300°, con saturación y luminosidad constantes. El centro es magenta puro. |
| OKLCH | #BA00C2 | La luminosidad percibida y el croma quedan entre los de los dos colores, y el tono sigue el arco más corto. El resultado es un morado magenta más claro y más vivo que el de RGB. |
RGB es el comportamiento por defecto de los navegadores y el más predecible, pero oscurece y apaga el centro de colores lejanos. HSL mantiene la saturación alta, aunque su luminosidad no coincide con la que percibe el ojo: un amarillo y un azul con la misma L del 50% parecen tener claridades muy distintas, y la escala puede mostrar saltos. OKLCH se diseñó para que distancias iguales en los números se vean como distancias iguales en pantalla, por eso produce los pasos más regulares. La opción OKLCH del mezclador interpola claridad, croma y tono (por el arco más corto del círculo) y equivale a color-mix(in oklch, …) en CSS. Cuando el resultado queda fuera de la gama sRGB, como este morado intenso, se recorta al valor HEX representable más cercano.
Mezcla aditiva, sustractiva y lo que calcula este mezclador
En la mezcla aditiva, la de la luz, sumar rojo y verde da amarillo: #FF0000 + #00FF00 = #FFFF00. En la sustractiva, la de las pinturas y la imprenta, cada pigmento absorbe parte de la luz, y mezclarlo todo lleva hacia el oscuro. El mezclador no hace ninguna de las dos: calcula un promedio ponderado entre los colores, como un degradado congelado. Por eso rojo con verde en RGB da #808000, un verde oliva, y no amarillo. Usa la herramienta para planificar colores de pantalla; no predice el resultado de mezclar pinturas reales, que depende de los pigmentos.
Dónde marca la diferencia una escala de colores
- Sistemas de diseño: los tonos numerados del 50 al 900 dan variaciones coherentes para fondos, bordes, texto y estados.
- Gráficos secuenciales: los mapas de calor y coropletas necesitan pasos que parezcan equidistantes; OKLCH ayuda a no distorsionar la lectura de los datos.
- Estados de interacción: un tono algo más oscuro para hover y otro para activo, sacados de la misma escala, mantienen los botones coherentes.
- Degradados: el tono del centro puede convertirse en una parada extra en el generador de degradados CSS para evitar un centro grisáceo.
Cómo crear una escala para tu sistema de diseño a partir de un color
Supón que el color de tu marca es azul real (#4169E1) y que ocupa la posición 500.
- Tonos claros (50 a 400): pon #FFFFFF como color A y #4169E1 como color B, con 6 pasos en OKLCH. Descarta el blanco puro; los cuatro intermedios pasan a ser 100 a 400. Para el 50, genera un paso extra más cerca del blanco o repite la mezcla con más pasos.
- Tonos oscuros (600 a 900): pon #4169E1 como color A y una versión muy oscura y todavía azulada, como #000080, como color B. Mezclar con negro puro suele dejar los tonos oscuros sin vida.
- Revisa y exporta: comprueba que los pasos parezcan equidistantes, prueba el contraste del texto sobre cada tono y copia todo como variables CSS.
:root { --brand-100: #...; --brand-500: #4169E1; --brand-900: #...; }Para encontrar colores que combinen con el principal, y no solo variaciones suyas, usa el generador de paletas de colores.
color-mix(): la misma idea directamente en CSS
La función color-mix() hace en el navegador lo que este mezclador hace aquí, con una proporción y un espacio de color:
.destacado { background: color-mix(in oklch, red 50%, blue); }
.boton:hover { background: color-mix(in oklab, var(--brand-500), black 15%); }Resulta útil para derivar estados hover, bordes y fondos suaves a partir de una sola variable, sin calcular cada tono de antemano. Con in oklch, el navegador calcula lo mismo que la opción OKLCH del mezclador: rojo con azul da el morado magenta vivo de la tabla. Si prefieres una transición menos saturada, in oklab mezcla las mismas coordenadas perceptuales en línea recta, sin girar el tono, y da un morado más suave. El mezclador sigue siendo el mejor lugar para ver la escala completa y fijar valores HEX en un sistema de diseño. La guía de colores modernos en CSS explica en detalle color-mix(), OKLCH y la compatibilidad con los navegadores.