Mezclador de colores
Mezcla dos colores en el espacio de color que elijas y con cualquier proporción, como hace CSS color-mix(). Introduce dos colores en cualquier formato CSS, establece la proporción del segundo color entre 0 y 100 por ciento y elige entre OKLab, OKLCH, Lab, LCH, sRGB, sRGB lineal, Display P3, HSL, HWB o XYZ. El resultado incluye HEX, RGB, HSL y OKLCH, además de una expresión color-mix() lista para usar en tu hoja de estilos.
Preguntas frecuentes
¿Cómo funciona la cantidad?
La cantidad es la proporción del Color 2 en la mezcla. 0% devuelve el Color 1, 100% devuelve el Color 2 y 50% queda a medio camino entre ambos en el espacio elegido. Equivale a color-mix(in space, color1 (100 - p)%, color2 p%).
¿Qué espacio de color debería elegir?
OKLab, la opción predeterminada, es perceptualmente uniforme y evita resultados turbios u oscuros en los puntos intermedios. sRGB mezcla los canales codificados con gamma, como los navegadores antiguos y Sass, lo que hace que las mezclas de colores saturados sean más oscuras y apagadas. Lab es el antiguo espacio perceptual CIE y se comporta de forma parecida a OKLab, aunque los azules son menos uniformes.
¿Qué hacen los espacios basados en el matiz?
OKLCH, LCH, HSL y HWB interpolan el matiz siguiendo el arco más corto de la rueda de color, la opción predeterminada de CSS, por lo que el punto intermedio conserva la saturación y puede ser más vivo que cualquiera de los colores de entrada. Si uno de los colores es un gris neutro sin matiz, se utiliza el matiz del otro color.
¿Para qué sirven sRGB lineal y XYZ?
Ambos mezclan las intensidades de luz de forma lineal, como haces de luz superpuestos, por lo que el punto intermedio parece más brillante que en sRGB. Son útiles para efectos basados en la física y para reproducir el aspecto de los píxeles desenfocados o mezclados.
¿Cómo se gestiona la transparencia?
Al igual que CSS color-mix(), el mezclador interpola con alfa premultiplicado, así que un color transparente no desplaza la mezcla hacia el negro. El alfa también se interpola con la misma proporción y aparece en los códigos hexadecimales de 8 dígitos y después de la barra en las funciones CSS.
¿Qué formatos de entrada puedo usar?
Códigos hexadecimales con o sin #, nombres de colores CSS, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), espacios color() como display-p3 y cmyk(), en cualquier combinación. Cada color puede tener hasta 100 caracteres.
¿Qué ocurre si el resultado queda fuera de sRGB?
La mezcla en Display P3, OKLCH o LCH puede producir colores que sRGB no puede mostrar. En ese caso, HEX, RGB y HSL se adaptan a sRGB con el algoritmo CSS Color 4 y el resultado incluye una nota, mientras que el valor OKLCH conserva el color sin adaptar.
¿Cómo uso la expresión color-mix()?
Pégala en cualquier propiedad CSS que acepte un color. Indica las entradas mediante su código hexadecimal o mediante oklch() si son colores de amplia gama, para que el navegador vuelva a calcular la misma mezcla. color-mix() funciona en todas las versiones actuales de Chrome, Edge, Firefox y Safari.
¿Qué precisión tiene el resultado?
La cantidad se expresa como un porcentaje entero y la mezcla se calcula con precisión completa mediante la biblioteca culori. Los canales RGB se redondean a números enteros, los porcentajes HSL a dos decimales y la luminosidad y cromaticidad OKLCH a cuatro, por lo que los navegadores pueden diferir en una unidad en el último dígito.
¿Cómo obtengo varios pasos entre dos colores?
Usa el mezclador con distintas cantidades, como 25%, 50% y 75%. Para crear una escala completa hacia el blanco, el negro o el gris, los Generadores de tintes, sombras y tonos de color producen todos los pasos en una sola tabla.