Equipo Editorial | Utilidades.io
Desarrollamos herramientas prácticas, rápidas y gratuitas para el día a día.
Diseña mezclas de color avanzadas utilizando el estándar nativo de CSS Color Module Level 4.
background-color: color-mix(in oklch, #2563eb 50%, #f43f5e);
En nuestro equipo hemos desarrollado esta herramienta para facilitar el flujo de trabajo de diseñadores y desarrolladores front-end. La función color-mix() de CSS permite combinar dos colores en proporciones específicas directamente desde la hoja de estilos, sin necesidad de usar JavaScript adicional ni preprocesadores como SASS o LESS.
Al trabajar con el mezclador de color, podemos elegir entre múltiples espacios cromáticos. Recomendamos utilizar oklch u oklab por las siguientes razones:
color-mix() es una función nativa de CSS que permite mezclar dos colores en un espacio de color determinado directamente en la hoja de estilos, eliminando la necesidad de preprocesadores o código JavaScript para calcular variaciones cromáticas.
Recomendamos usar oklch u oklab, ya que son espacios de color perceptualmente uniformes. Esto garantiza que las mezclas intermedias mantengan un brillo y tono naturales sin los tonos grisáceos oscuros que a veces genera el espacio srgb tradicional.
color-mix() es compatible con todos los navegadores modernos principales (Chrome, Firefox, Safari y Edge) desde mediados de 2023. Para navegadores antiguos, es recomendable incluir un color de respaldo (fallback) previo en el CSS.