Comment utiliser OKLCH en CSS
OKLCH est un format de couleur moderne pour CSS qui facilite les ajustements. Une fois que vous connaissez ses trois valeurs, vous pouvez créer des nuances et des états au survol sans outil de design.
La syntaxe
color: oklch(62% 0.19 255);
color: oklch(62% 0.19 255 / 50%); /* avec transparence */- Luminosité varie de 0 % (noir) à 100 % (blanc).
- Chroma indique l’intensité de la couleur. 0 correspond au gris, et la plupart des couleurs utilisables restent sous environ 0,37.
- Teinte correspond à l’angle de la couleur sur le cercle chromatique, de 0 à 360.
Essayez avec le sélecteur de couleurs OKLCH, ou convertissez la couleur de votre marque avec le convertisseur HEX vers OKLCH.
Créer un jeu de nuances
Gardez la chroma et la teinte identiques, et modifiez uniquement la luminosité :
:root {
--brand-300: oklch(80% 0.12 255);
--brand-500: oklch(62% 0.19 255);
--brand-700: oklch(45% 0.17 255);
}Créer des états au survol
La syntaxe de couleur relative permet de dériver une couleur à partir d’une autre :
.btn { background: var(--brand-500); }
.btn:hover { background: oklch(from var(--brand-500) calc(l - 0.08) c h); }Les couleurs relatives sont plus récentes que oklch() lui-même : vérifiez la prise en charge par les navigateurs utilisés par votre public.
Mélanger des couleurs
Utilisez color-mix() pour mélanger deux couleurs. Mélanger dans OKLCH donne généralement des teintes intermédiaires plus propres qu’en sRGB :
background: color-mix(in oklch, var(--brand-500) 70%, white);Vous pouvez tester vos mélanges avec le mélangeur de couleurs.
Ajouter une solution de repli
Les navigateurs modernes prennent en charge OKLCH. Pour les très anciens, placez d’abord une valeur HEX. Les navigateurs ignorent ce qu’ils ne savent pas lire :
color: #2563eb;
color: oklch(54.6% 0.215 262.9);Le convertisseur OKLCH vers HEX vous fournit cette valeur.
Vérifier le contraste
La luminosité rend le contraste plus facile à prévoir, mais ne le garantit pas. Testez toujours les paires texte et arrière-plan avec le vérificateur de contraste.
