Sélecteur et convertisseur de couleurs OKLCH

Qu’est-ce que OKLCH ?

OKLCH est un espace de couleur conçu par Björn Ottosson (2020) et ajouté à CSS dans la spécification Color Level 4. Il décrit une couleur à l’aide de trois valeurs intuitives : la Luminosité (0–100 %), la Chroma (le degré de colorfulness, d’environ 0 à 0,37 pour les couleurs d’écran) et la Heinte (un angle de 0 à 360°). Contrairement à HSL, il est perceptuellement uniforme : deux couleurs ayant la même valeur de L paraissent réellement aussi claires à l’œil humain.

Pourquoi les développeurs abandonnent HSL

• Des palettes prévisibles : en HSL, le jaune à 50 % de luminosité paraît bien plus clair que le bleu à 50 %. En OKLCH, modifier uniquement la teinte conserve la luminosité perçue, ce qui est idéal pour générer des états de boutons cohérents et des échelles de design system (raison pour laquelle Tailwind CSS v4 livre sa palette en OKLCH).
• Un meilleur calcul d’accessibilité : un écart de luminosité fixe se traduit par un écart de contraste assez constant.
• Les couleurs à large gamut : OKLCH peut exprimer des couleurs Display P3 que HEX et rgb() ne permettent pas, si bien que les écrans modernes affichent des couleurs plus vives.

Gamut et replis

Toutes les combinaisons L/C/H ne sont pas représentables sur un écran sRGB. Lorsque la chroma est trop élevée, cet outil conserve la luminosité et la teinte, réduit la chroma jusqu’à ce que la couleur rentre dans le gamut, puis fournit ce résultat comme repli HEX/RGB. En CSS, écrivez d’abord le repli, puis la valeur OKLCH : les navigateurs qui comprennent OKLCH utilisent la seconde ligne :

color: #e5484d;
color: oklch(63% 0.2 25);

OKLCH ou OKLab ?

OKLab est le même espace, exprimé en coordonnées rectangulaires (L, a, b). Il convient parfaitement aux mélanges et aux dégradés (essayez le Mélangeur de couleurs), tandis qu’OKLCH est plus facile à modifier pour un humain.

Aussi recherché comme : sélecteur couleur oklch, convertisseur oklch hex, oklch vers hex, hex vers oklch, espace couleur perceptuel, oklab, gamut srgb, sélecteur de couleur oklch.

Outils complémentaires : Convertisseur OKLCH

• Convertisseur de couleurs — Collez n'importe quelle couleur CSS — HEX, rgb(), hsl(), hwb(), oklch() ou un nom comme tomato — et obtenez instantanément tous les autres formats, ainsi qu'une palette 50–950 prête à l'emploi.
• Générateur de couleurs Tailwind — Il vous suffit de coller une couleur de marque pour obtenir une palette de nuances équilibrée en 11 étapes (de 50 à 950) intégrée à OKLCH, avec des indications de contraste et des options d'exportation vers Tailwind v3, v4, CSS et SCSS.
• Convertisseur HEX vers RGBA — Collez un code HEX, faites glisser le curseur d'opacité et copiez le CSS exact dont vous avez besoin : rgba() classique, rgb( / alpha) moderne ou HEX à 8 chiffres.
• Vérificateur de contraste APCA — Calculez le contraste de luminance APCA (Lc) entre le texte et le fond, découvrez les usages adaptés et comparez-le au ratio WCAG 2 classique.