Vista previa de CSS color-mix()
Color
El CSS moderno te permite mezclar dos colores con `color-mix(in <space>, A <p>, B)`, y el espacio de interpolación que eliges cambia el resultado drásticamente. Rojo mezclado con azul en `srgb` da un púrpura-gris turbio; la misma mezcla en `oklch` produce un magenta vibrante; en `hsl` recorre el cian porque el tono interpola por el camino corto del círculo. Esta herramienta renderiza la misma mezcla en los ocho espacios más usados lado a lado — `srgb`, `srgb-linear`, `hsl`, `hwb`, `lab`, `lch`, `oklab`, `oklch` — usando el `color-mix()` nativo del navegador, así que lo que ves es lo que producirá tu hoja de estilos. Cada tarjeta muestra una muestra grande al porcentaje actual, el hex sRGB resuelto (calculado dibujando el color en un canvas de 1×1 y leyendo el píxel) y una tira de 11 pasos con la trayectoria completa de A a B. Ajusta el deslizador y observa cómo las ocho trayectorias se animan. Haz clic en cualquier tarjeta para copiar la declaración CSS correspondiente.
Sobre los espacios de interpolación
color-mix() interpola linealmente los dos colores en el espacio que indiques. sRGB pasa por grises desaturados. srgb-linear coincide con la adición física de luz (composición fotográfica). HSL/HWB/LCH/OKLCH interpolan el tono alrededor de un círculo — el arco más corto por defecto. OKLab/OKLCH (Björn Ottosson, 2020) son perceptualmente uniformes — pasos numéricos iguales se ven como pasos visuales iguales. El hex bajo cada muestra se lee desde un canvas de 1×1 después de que el navegador resuelve la mezcla, así que coincide con getComputedStyle().
Cómo usar
- Elige color A y color B con los selectores o pega un hex.
- Arrastra el deslizador de porcentaje — es la cantidad de A en la mezcla (30% significa 30% A y 70% B).
- Compara las ocho tarjetas: la muestra es el color resuelto, la tira muestra el degradado A→B en ese espacio.
- Pulsa el icono de copiar de cualquier tarjeta para obtener la declaración `background: color-mix(in <space>, ...);`.
- Prueba los presets — rojo↔azul y amarillo↔azul son los casos clásicos de '¿por qué srgb se ve mal?'.
Preguntas frecuentes
- ¿Por qué el resultado es tan diferente en cada espacio?
- La interpolación lineal (lo que hace `color-mix()`) es una línea recta a través del sistema de coordenadas que elijas. En sRGB esa línea pasa por puntos medios de gris desaturado porque el cubo sRGB tiene gris en su diagonal principal. En OKLCH la línea mantiene la luminosidad percibida constante y rota a través del tono, así que conserva la viveza. En HSL la línea toma el camino más corto alrededor del círculo de tono, lo que puede atravesar colores que no están entre A y B. Ninguno está 'mal' — son geometrías distintas.
- ¿Qué espacio debería usar?
- Para la mayoría del trabajo de UI, `oklch` u `oklab` dan los mejores resultados perceptuales — los degradados mantienen brillo uniforme, las mezclas siguen vivas, sin puntos medios turbios. `srgb-linear` es correcto para mezcla física de luz (composición fotográfica). `srgb` coincide con lo que hacían las herramientas antiguas y el CSS pre-2023. `hsl` está bien para paletas basadas en tono solo cuando A y B comparten saturación/luminosidad. Evita `srgb` puro para pares de colores vivos a menos que quieras específicamente el aspecto apagado.
- ¿Qué tan preciso es el hex mostrado?
- Es exactamente lo que calcula el navegador. La expresión de color se establece como `fillStyle` de canvas, se renderiza un píxel de 1×1, luego `getImageData()` lee los bytes sRGB reales. Así que el hex que ves es el mismo que resolvería `getComputedStyle()` para esa mezcla — dentro del redondeo (±1 por canal por cuantización de canvas de 8 bits).
- ¿Y hue-shortest vs hue-longest?
- CSS admite modificadores `longer hue` / `shorter hue` / `increasing hue` / `decreasing hue` para espacios basados en tono (hsl, hwb, lch, oklch). Esta herramienta usa el predeterminado (shorter hue) para no saturar las tarjetas. Si necesitas interpolación de tono más larga, añade el modificador tú mismo: `color-mix(in oklch longer hue, A 50%, B)` — mismos colores, dirección opuesta del círculo.
- ¿Soporte de navegadores?
- color-mix() está disponible en Chrome/Edge 111+ (mar 2023), Safari 16.2+ (dic 2022) y Firefox 113+ (may 2023). Todos los navegadores principales de 2023 en adelante soportan todos los espacios listados aquí. Si ves el banner de no soportado, tu navegador es anterior — el CSS aún se analiza pero no producirá el color correcto.
Herramientas relacionadas
Simulador de Daltonismo
Ve cómo se ve tu imagen para personas con cada uno de los 8 tipos de deficiencia visual cromática (CVD).
Generador de CSS Box Shadow
Diseña box-shadow CSS visualmente con varias capas, vista previa en vivo y salida CSS / Tailwind lista para copiar.
Conversor de Formatos de Color
Convierte cualquier color entre HEX, RGB, HSL, HSV, OKLCH y una variable CSS.
Generador de Gradientes CSS
Crea gradientes CSS lineales o radiales con varias paradas de color y copia el código.
Generador de Paleta de Colores
Crea paletas armoniosas desde un color base con seis esquemas.
Comprobador de Contraste de Color
Comprueba el contraste texto/fondo según los niveles WCAG AA y AAA.