- L’espace colorimétrique OKLCH est, contrairement à RGB ou HSL, fondé sur la perception humaine, ce qui le rend plus précis et prévisible
- Il convient bien à l’amélioration des design systems et de l’accessibilité, et se montre particulièrement performant pour représenter des couleurs à large gamut comme le P3, ce qui le rend plus compatible avec les appareils récents
oklch() est un format de couleur lisible et intuitif, qui facilite la manipulation des couleurs dans le code. Il distingue la luminosité (L), la chroma (C), la teinte (H) et l’opacité (a)- Avec les spécifications CSS Colors 4/5, les fonctions natives de manipulation des couleurs se renforcent, faisant d’OKLCH un choix tourné vers l’avenir
- L’écosystème autour de Stylelint, des plugins Figma, des bibliothèques JS, etc. évolue rapidement, ce qui favorise aussi la collaboration entre design et développement
- Cela dit, l’écosystème n’est pas encore totalement mature, et certaines combinaisons peuvent ne pas être visibles sur tous les moniteurs
Appliquer OKLCH à un projet
- Rechercher les valeurs de couleur existantes dans le CSS et les convertir en OKLCH, puis utiliser un plugin Figma ou un outil de conversion pour copier et appliquer les couleurs OKLCH
- Organiser les couleurs du CSS dans une palette de propriétés personnalisées afin d’améliorer la réutilisabilité et la maintenabilité
- Utiliser Stylelint et un plugin pour détecter et empêcher automatiquement l’usage de formats de couleur autres qu’OKLCH
- Intégrer Stylelint dans l’environnement CI afin d’automatiser la vérification de la cohérence des couleurs
Bénéfices obtenus après la transition vers OKLCH
- Une meilleure lisibilité du code
- Des ajustements de couleur prévisibles
- La mise en place d’un design system basé sur des couleurs relatives
- La prise en charge d’expressions visuelles avancées, comme les couleurs P3
- Une meilleure collaboration possible avec l’équipe design
1 commentaires
Il semble que cela améliorera considérablement la facilité d’écriture et la lisibilité de séquences comme pour l’éclairage couleur DMX.