Guide couleur pratique
OKLCH en CSS : guide pratique des couleurs perceptuelles
Comprenez le modele OKLCH, ecrivez des couleurs CSS modernes, creez des gammes coherentes et gerez les limites du gamut sRGB.
Ouvrir l outil lieCe que represente OKLCH
OKLCH decrit une couleur avec une luminosite perceptuelle, une chroma et une teinte. La luminosite va du noir au blanc, la chroma controle l intensite et la teinte utilise un angle. Cette separation facilite les modifications intentionnelles.
Ecrire OKLCH en CSS
La syntaxe est oklch(L C H). Une declaration pratique est color: oklch(58.5% 0.204 277.1). Placez une valeur HEX avant celle-ci lorsque votre produit doit prendre en charge des environnements limites a sRGB.
- background: #6366F1;
- background: oklch(58.5% 0.204 277.1);
- Utilisez @supports si le composant necessite une strategie de repli distincte.
Creer des gammes plus coherentes
Pour une gamme de nuances, gardez une teinte relativement stable et modifiez la luminosite par etapes. Reduisez la chroma aux extremites tres claires ou tres sombres pour rester dans le gamut.
Comprendre les limites du gamut
OKLCH peut decrire des couleurs qu un ecran sRGB ou une valeur HEX ne peut pas reproduire. Le convertisseur peut alors ecreter les canaux vers la valeur sRGB disponible la plus proche.
Associer OKLCH et accessibilite
La luminosite perceptuelle aide a structurer une palette mais ne remplace pas un test de contraste WCAG. Testez les valeurs finales ainsi que les etats hover, focus, disabled et mode sombre.
References techniques
Ce guide a ete verifie avec les sources primaires suivantes.
Questions frequentes
OKLCH est-il pris en charge en CSS moderne ?
Les navigateurs modernes prennent en charge oklch(), mais une valeur HEX reste utile pour les outils anciens ou limites a sRGB.
OKLCH est-il automatiquement accessible ?
Non. OKLCH facilite la construction d une palette, mais les paires finales doivent toujours etre testees.