OKLCH - Variantes pour les rapports de contraste

[admin]

C’est un problème bien connu avec beaucoup de syntaxes plus simples pour les couleurs CSS. Hex, RGB et HSL ne donnent pas un contraste cohérent sur l’ensemble du spectre chromatique pour la même luminosité et saturation nominales. Le contraste variera en fait largement.

Pour une meilleure cohérence, les définitions de couleur doivent être en LCH ou, encore mieux, en oklch()*. De cette façon, lorsque vous choisissez un niveau de luminosité et de saturation, il sera beaucoup plus cohérent pour toutes les couleurs, avec oklch() étant un peu plus précis dans la région bleu/violet. Ces deux sont très bien pris en charge. Ils prennent un peu de temps pour s’y habituer, mais pas beaucoup, et une fois que vous comprenez les bases, ils sont très faciles à utiliser.

Note

Cela permet de ne pas sélectionner des couleurs qui sont en dehors de la gamme de couleurs pour l’écran en question. Une fois que vous sortez de la gamme, le moniteur appliquera sa propre idée de ce qui est le plus proche, ce qui peut donner des résultats inattendus. En cas de doute, restez dans la gamme SRGB, bien que les écrans P3 soient également assez courants ces jours-ci (et offrent plus de flexibilité).

*OKLCH est plus performant pour les modifications de couleurs et la génération de palettes . Il utilise la luminosité perceptuelle, évitant ainsi les résultats inattendus, comme avec darken() dans Sass. De plus, grâce à sa luminosité prévisible, oklch() offre une meilleure accessibilité. Contrairement à rgb() ou hex #ca0000, oklch() est lisible par l'homme.

En savoir plus et Outil pratique

Les couleurs jouent un rôle important dans le design web, mais créer une palette de couleurs peut paraître une tâche intimidante pour les développeurs et designers. De nombreux facteurs entrent en compte lorsqu'on conçoit une palette de couleurs : la marque (branding), l'information que vous souhaitez faire passer, le maintien d'une luminosité cohérente à travers les différentes couleurs, le contraste entre les ombres, la façon dont les couleurs s'affichent en mode sombre ou lumineux, etc.

CSS propose plusieurs fonctions de couleurs, mais plusieurs sont difficiles à utiliser ou créent des résultats incohérents. Cet article explore un nouveau modèle de couleur, oklch(), conçu pour offrir une façon intuitive et cohérente de créer des couleurs pour le web.