Guía de colores de CSS moderno: OKLCH, color-mix() y el futuro del diseño web
Los colores son el alma del diseño web, pero durante décadas hemos estado atrapados en las limitaciones de sRGB y espacios de color no perceptuales como RGB y HSL. El CSS moderno ha roto estas fronteras, introduciendo una nueva era de sistemas de color dinámicos, perceptualmente uniformes y de alta definición.
En esta guía, exploraremos las funciones y características de color revolucionarias que están cambiando la forma en que definimos y manipulamos los colores en CSS.
2. Manipulación dinámica con color-mix()
Una de las nuevas incorporaciones más potentes a CSS es la función color-mix(). Permite mezclar dos colores directamente en la hoja de estilos, eliminando la necesidad de cálculos complejos de Sass o JavaScript.
Sintaxis: color-mix(in [espacio-de-color], [color1] [porcentaje], [color2] [porcentaje])
Ejemplo: creación de un estado hover instantáneo
.button {
background: var(--primary-color);
}
.button:hover {
/* Mezclar un 20% de blanco en el color primario */
background: color-mix(in oklch, var(--primary-color), white 20%);
}
Mezclar en los espacios oklch u oklab suele producir resultados mucho más naturales que mezclar en RGB.
3. Dominando LCH y LAB
Aunque generalmente se prefiere OKLCH por su intuición, LCH y LAB son los fundamentos.
- LAB: utiliza un sistema de coordenadas (L para luminosidad, a para el eje verde-rojo, b para el eje azul-amarillo).
- LCH: la versión de coordenadas polares de LAB (Luminosidad, Croma, Tono).
Estos espacios son independientes del dispositivo y pueden representar todos los colores visibles para los humanos. Son la forma "nativa" en que los navegadores modernos manejan el color internamente.
4. La función color() y Display-P3
La función color() es una forma genérica de acceder a espacios de color específicos, como display-p3, a98-rgb o prophoto-rgb.
/* Acceso al espacio P3 de amplia gama */
.p3-green {
color: color(display-p3 0 1 0); /* El verde P3 más puro */
}
Si un dispositivo no admite el espacio especificado, CSS recurrirá automáticamente al equivalente sRGB más cercano.
5. Adaptación a temas con light-dark()
A medida que el modo oscuro se convierte en un requisito estándar, la función light-dark() simplifica el cambio de tema. Selecciona automáticamente el primer valor para el modo claro y el segundo para el modo oscuro, según las preferencias del sistema del usuario.
body {
background-color: light-dark(#ffffff, #121212);
color: light-dark(#333333, #efefef);
}
6. Sintaxis de color relativa (RCS)
La sintaxis de color relativa es quizás la característica de color más avanzada. Permite "desestructurar" un color existente, modificar uno de sus componentes y crear un nuevo color, todo en una sola línea.
/* Tomar un color existente y cambiar su opacidad o luminosidad */
.card {
--base-color: #3498db;
background: oklch(from var(--base-color) 80% c h); /* Aumentar la luminosidad al 80% */
border-color: oklch(from var(--base-color) l c h / 0.5); /* Mantener color, añadir 50% de opacidad */
}
Resumen de las funciones de color de CSS moderno
| Función | Ideal para | Soporte |
|---|---|---|
| oklch() | Diseño perceptualmente uniforme, paletas accesibles | Navegadores modernos |
| color-mix() | Mezcla de colores (estados hover, capas) | Navegadores modernos |
| light-dark() | Soporte fácil para modo oscuro | Nuevo (comprobar soporte) |
| RCS | Derivación de colores a partir de variables | Emergente |
Conclusión
El CSS moderno ha convertido el color de un valor estático en un sistema dinámico y programable. Al aprovechar OKLCH para la precisión y color-mix() para la flexibilidad, puede crear experiencias web que no solo sean más hermosas, sino también más accesibles y eficientes.
¿Listo para mejorar su diseño? ¡Empiece a experimentar con nuestro Convertidor de color y esté atento a nuestro próximo Selector de color OKLCH y Generador de mezclas de colores CSS!