Mezclador de colores
Elige dos colores y la proporción de cada uno para obtener el color resultante, una escala de tonos intermedios y el código CSS color-mix() equivalente. Compara cómo cambia la mezcla según el espacio de color.
Escala de A a B (pulsa para copiar)
La misma proporción en los tres espacios
Cómo usar el mezclador
- Escribe los dos colores en HEX o elígelos con los selectores. Si los tienes en otro formato, conviértelos antes con el conversor de colores.
- Mueve el deslizador: 0 % es solo el color A, 100 % solo el B y 50 % la mezcla a partes iguales.
- Elige el espacio de mezcla y revisa la fila de comparación para ver las diferencias.
- Copia cualquier color de la escala con un clic, o el código CSS.
Cómo se calcula la mezcla
Mezclar es interpolar: con una proporción t del color B (de 0 a 1), cada componente se calcula como
resultado = A + (B − A) × t
La diferencia está en qué componentes se interpolan:
- sRGB: se promedian directamente los valores 0–255. Es rápido y es lo que hacen los degradados CSS por defecto, pero como esos valores llevan corrección gamma, las mezclas tienden a oscurecerse y agrisarse en el centro.
- RGB lineal: primero se deshace la corrección gamma (los valores pasan a ser proporcionales a la cantidad de luz), se promedia y se vuelve a aplicar. Simula físicamente la mezcla de dos luces; el resultado es más claro.
- OKLab: se convierte a un espacio perceptual (claridad L y dos ejes de color a y b) diseñado para que distancias iguales parezcan diferencias iguales. Suele producir los degradados y escalas más equilibrados.
Ejemplos: la misma mezcla al 50 % en cada espacio
| Color A | Color B | sRGB | RGB lineal | OKLab |
|---|---|---|---|---|
| #1E90FF | #FFD700 | #8FB480 | #BDB8BC | #9CBCB5 |
| #FF0000 | #00FF00 | #808000 | #BCBC00 | #D0A800 |
| #FF0000 | #FFFFFF | #FF8080 | #FFBCBC | #FFA191 |
| #000000 | #FFFFFF | #808080 | #BCBCBC | #636363 |
Fíjate en el último caso: el gris medio «perceptual» entre negro y blanco es #636363, bastante más oscuro que el promedio aritmético #808080, porque el ojo distingue mejor los matices oscuros que los claros.
Mezcla de luz frente a mezcla de pintura
En pantalla, los colores se forman sumando luz roja, verde y azul (síntesis aditiva). Por eso la mezcla de azul y amarillo da un gris o un azul verdoso apagado, y no el verde intenso que obtendrías con témperas: los pigmentos restan luz (síntesis sustractiva) y su resultado depende de su composición química. Esta herramienta sirve para color digital; para pintura es solo una aproximación.
Usos prácticos
- Estados de interfaz: mezcla tu color de marca con un 15–20 % de negro para el estado hover, o con un 85–90 % de blanco para un fondo suave.
- Escalas de color: la fila de pasos te da una gama lista para usar; combínala con el generador de paletas.
- Degradados sin zona gris: inserta el color OKLab del 50 % como parada intermedia en el generador de degradados.
- Legibilidad: si usas la mezcla como fondo de texto, compruébala con el comprobador de contraste.
Preguntas frecuentes
¿Por qué azul y amarillo no dan verde?
Porque en pantalla los colores se mezclan como luz (síntesis aditiva), no como pigmentos. La media de azul y amarillo en RGB es un gris; el verde de la pintura surge porque cada pigmento absorbe parte de la luz (síntesis sustractiva).
¿Qué espacio de mezcla es mejor?
Para degradados y escalas de interfaz, OKLab suele dar los resultados más naturales: conserva la claridad percibida y evita los grises apagados en el centro. sRGB es el que usan por defecto los degradados CSS clásicos.
¿Cómo mezclo colores directamente en CSS?
Con color-mix(): color-mix(in oklab, #1e90ff 70%, #ffd700) mezcla un 70 % del primero con un 30 % del segundo. Lo admiten todos los navegadores modernos desde 2023.
¿Sirve para mezclar pinturas reales?
No con exactitud. La mezcla de pigmentos depende de cómo absorbe la luz cada pigmento y no se puede predecir solo con su RGB. Úsala como referencia de color digital.