Mezclador de colores
Elige dos colores y desliza entre ellos. Verás la mezcla calculada de dos maneras, el código HEX de cada una y una línea color-mix() para tu CSS.
Funciona en tu navegador: nada de lo que escribes se envía a ningún sitio.
Cómo se usa
- Introduce el color A y el color B, o usa los selectores.
- Mueve el control para fijar cuánto color B entra en la mezcla.
- Copia el código HEX o la línea CSS
color-mix() de la versión que prefieras.
Cómo funciona
sRGB: cada valor de rojo, verde y azul avanza en línea recta de A a B. OKLab: los dos colores se pasan a OKLab (luminosidad más dos ejes de color, Björn Ottosson, 2020), cada uno de los tres números avanza en línea recta y el resultado vuelve a sRGB. Los canales se redondean a valores enteros de 0 a 255.
Ejemplo
Por defecto, rojo #ff0000 y azul #0000ff al 50 %: en sRGB sale #800080, un púrpura oscuro, y en OKLab un #8c53a2 más luminoso. La línea CSS de la primera versión es color-mix(in srgb, #ff0000 50%, #0000ff 50%).
Consejos
- Mezclar complementarios en sRGB suele dar un gris pardo apagado; OKLab conserva más color.
- Para una serie de pasos, mueve el control en partes iguales o usa el generador de tintes y sombras para mezclar con blanco y negro.
Preguntas frecuentes
¿Por qué difieren los dos resultados?
Los valores sRGB llevan codificación gamma, así que promediarlos no da un paso uniforme en lo claro o colorido que se ve un color. OKLab está diseñado para que pasos iguales se vean más parejos. Negro y blanco al 50 % dan #808080 en sRGB y un #636363 más oscuro en OKLab.
¿Cuál debería usar?
OKLab cuando el resultado deba verse suave, como en degradados, estados hover o temas generados. sRGB cuando necesites coincidir con lo que producen herramientas antiguas o los degradados CSS normales.
¿Qué indica el control de proporción?
Es la parte del color B en la mezcla. Al 0 % obtienes el color A, al 100 % el color B y al 50 % una mezcla a partes iguales.
¿Puedo usar la línea CSS tal cual?
Sí. La función color-mix() con in srgb o in oklab funciona en las versiones actuales de Chrome, Edge, Firefox y Safari. El código HEX sirve de alternativa para navegadores antiguos.