- El espacio de color OKLCH se basa en la percepción humana, a diferencia de RGB o HSL, por lo que es más preciso y predecible
- Es adecuado para mejorar sistemas de diseño y accesibilidad, y destaca especialmente en la representación de colores de gama amplia como P3, lo que lo hace más compatible con dispositivos modernos
oklch() es un formato de color legible e intuitivo, que facilita la manipulación de colores en código. Separa luminosidad (L), croma (C), tono (H) y opacidad (a)- Junto con la especificación CSS Colors 4/5, se están fortaleciendo las funciones nativas de manipulación de color, por lo que OKLCH es una opción orientada al futuro
- El ecosistema de Stylelint, plugins de Figma, bibliotecas de JS, etc. también está creciendo rápidamente, lo que favorece la colaboración entre diseño y desarrollo
- Aun así, el ecosistema todavía no ha madurado del todo, y algunas combinaciones podrían no verse en todos los monitores
Aplicar OKLCH en un proyecto
- Buscar los valores de color existentes en CSS y convertirlos a OKLCH; usar plugins de Figma o herramientas de conversión para copiar y aplicar colores OKLCH
- Organizar los colores en CSS como una paleta de propiedades personalizadas para mejorar la reutilización y el mantenimiento
- Usar Stylelint y plugins para detectar y bloquear automáticamente el uso de colores distintos de OKLCH
- Integrar Stylelint en el entorno de CI para automatizar las verificaciones de consistencia de color
Beneficios obtenidos después de cambiar a OKLCH
- Mejor legibilidad del código
- Ajustes de color predecibles
- Construcción de sistemas de diseño basados en colores relativos
- Soporte para expresiones visuales avanzadas, como colores P3
- Mejor posibilidad de colaboración con el equipo de diseño
1 comentarios
Parece que aumentará bastante la comodidad para crear secuencias y la legibilidad en cosas como la iluminación de color DMX.