Mezclador de colores
Mezcla dos colores en cualquier proporción en OKLab, OKLCH o sRGB. Copia el resultado o una expresión color-mix() lista.
- HEX
- RGB
- OKLCH
CSS con alternativa
color: #ae7ea4;
color: color-mix(in oklab, #ff5733, #3b82f6 50%);Pasos del primero al segundo
La misma mezcla en cada espacio
sRGB se vuelve gris y oscuro en el centro. OKLab mantiene uniforme la luminosidad. OKLCH y HSL conservan la saturación, pero recorren la rueda de matices.
Preguntas y respuestas
¿Qué es color-mix() en CSS?
color-mix() es una función de CSS que mezcla dos colores en el espacio de color que elijas, por ejemplo color-mix(in oklab, #ff5733, #3b82f6 30%). Funciona en todos los navegadores actuales. Pon antes un color normal como alternativa para los navegadores antiguos, como en el fragmento de arriba.
¿En qué espacio de color conviene mezclar?
OKLab es la opción más segura por defecto: el punto medio conserva su luminosidad y no se vuelve turbio. OKLCH mantiene los colores saturados, pero toma el camino más corto por la rueda de tonos, así que del rojo al azul pasa por morado y rosa. sRGB es como mezclan las herramientas antiguas, y su punto medio suele verse gris y oscuro.
¿Por qué mezclar luz no es lo mismo que mezclar pintura?
Las pantallas suman luz, así que esta herramienta promedia valores de luz: azul y amarillo dan un gris o un color pálido, no verde. La pintura resta luz, por eso la misma mezcla en papel se ve verde. Para predecir la pintura, usa un modelo de mezcla de pigmentos en lugar de un espacio de color de pantalla.