Qué es Generador CSS color-mix()?
La funcion CSS color-mix() mezcla dos colores en un espacio de color especificado. Crea variaciones de color directamente en CSS sin un preprocesador como Sass. Usar oklab produce resultados perceptuales mas uniformes que srgb. Los casos de uso comunes incluyen estados hover, bordes, fondos sutiles y texto atenuado, todos derivados de un solo color base.
Respuesta rápida
Use color-mix() para combinar dos colores en un espacio de color especificado, como oklab o srgb. Es util para crear variantes de tinte, sombra y hover a partir de un solo color base sin un preprocesador.
Last updated: 2026-05-25
Limitaciones
- Color-mix() requiere Chrome 111+, Edge 111+, Safari 16.2+ y Firefox 113+. Los navegadores antiguos no lo admiten e ignoraran la declaracion.
- El espacio de color oklab produce resultados perceptuales mas uniformes que srgb. Mezclar en srgb puede crear intermedios turbios.
- Color-mix() puede no referenciar propiedades personalizadas CSS que contengan salida de color-mix() en algunas versiones antiguas de navegadores debido a la deteccion de ciclos de propiedades.
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
Cómo usar esta herramienta
- Ingrese un color base como valor hexadecimal.
- Revise las variantes calculadas de color-mix() usando blanco, negro o transparente.
- Copie cada declaracion color-mix() en su CSS.
- Use las propiedades personalizadas generadas para una tematizacion de color consistente.
Para qué puedes usarla
- Crear estados hover mezclando un color con blanco o negro.
- Generar tintes de fondo sutiles a partir de un color de marca.
- Construir colores de borde que sean ligeramente mas oscuros que el fondo.