Libérez des Couleurs Éclatantes avec OKLCH

Introduction

La conception web a considérablement évolué au fil des ans, tout comme la façon dont nous gérons les couleurs. Alors que le RVB et les codes hexadécimaux sont la norme depuis des décennies, un nouveau concurrent est apparu pour répondre à leurs limites : le modèle de couleur OKLCH.

Qu'est-ce que OKLCH ?

OKLCH est un espace colorimétrique basé sur le modèle de couleur Oklab, conçu pour être perceptuellement uniforme. Il résout bon nombre des problèmes rencontrés dans les anciens modèles comme HSL et RVB, en particulier concernant la façon dont nos yeux perçoivent la luminosité et la saturation.

Le nom OKLCH signifie :

• L - Luminosité (Lightness)
• C - Chroma
• H - Teinte (Hue)

Les Composantes de OKLCH

Luminosité (L)

La luminosité contrôle à quel point la couleur est claire ou sombre.

• 0% est le noir absolu.
• 100% est le blanc absolu.

Contrairement à HSL, où 50% de luminosité peut sembler très différent selon la teinte (par exemple, jaune contre bleu), la luminosité OKLCH est cohérente. Une valeur de 60% de luminosité apparaîtra tout aussi lumineuse dans toutes les teintes.

Chroma (C)

Chroma représente l'intensité ou la pureté de la couleur (similaire à la saturation).

• 0 est complètement gris.
• 0.4 (environ) est le maximum pour la plupart des couleurs sRGB.
• Les valeurs peuvent aller plus haut (par exemple, 0.5 ou plus) pour les écrans à large gamme (P3, Rec.2020).

Teinte (H)

La teinte est l'angle sur la roue chromatique, similaire à HSL.

• 0 - 360 degrés.
• 0 est à peu près rouge, 120 vert, 240 bleu.

Pourquoi utiliser OKLCH ?

1. Uniformité Perceptuelle

Dans HSL, changer la teinte tout en gardant la luminosité constante peut rendre la couleur visuellement plus claire ou plus sombre. Dans OKLCH, la luminosité perçue reste cohérente, ce qui facilite grandement la création de palettes de couleurs accessibles.

2. Accès aux Couleurs à Large Gamme

Le sRGB (utilisé par Hex et RVB) ne peut afficher qu'une gamme limitée de couleurs. Les moniteurs modernes prennent en charge P3 et Rec.2020, qui peuvent afficher des verts et des cyans beaucoup plus vifs. OKLCH vous permet d'accéder à ces couleurs "super-saturées" qu'il était auparavant impossible de spécifier en CSS.

3. Mélange de Couleurs Prévisible

Grâce à son uniformité perceptuelle, la création de dégradés et le mélange de couleurs dans OKLCH produisent des transitions douces et naturelles sans les "zones mortes grises" souvent observées dans les dégradés RVB.

Utiliser OKLCH en CSS

La prise en charge de OKLCH est désormais disponible dans tous les principaux navigateurs modernes.

.my-element {
  /* Un rose vif */
  background-color: oklch(60% 0.25 330);
}

.semi-transparent {
  /* Avec transparence alpha */
  color: oklch(80% 0.1 120 / 0.5);
}

Conclusion

OKLCH est l'avenir de la couleur sur le web. En offrant un moyen de définir des couleurs qui s'alignent sur la perception humaine et en libérant toutes les capacités des écrans modernes, il donne aux concepteurs et aux développeurs un nouvel outil puissant pour créer de belles expériences numériques accessibles.