OKLCH vs HSL
Les deux formats décrivent la couleur à l’aide de la teinte et de deux autres valeurs. La différence est qu’OKLCH repose sur la manière dont l’œil perçoit les couleurs, ce qui n’est pas le cas de HSL.
Le problème de la luminosité HSL
Réglez le jaune et le bleu sur la même luminosité HSL, et le jaune paraît nettement plus clair :
color: hsl(60 100% 50%); /* bright yellow */
color: hsl(240 100% 50%); /* dark blue */Avec OKLCH, la luminosité correspond beaucoup mieux à ce que l’on perçoit. Des couleurs de même valeur paraissent d’une luminosité similaire, ce qui facilite l’équilibre des palettes.
Comparaison côte à côte
| HSL | OKLCH | |
|---|---|---|
| Luminosité | Varie selon la teinte | Correspond de près à la perception |
| Gamme de couleurs | sRGB uniquement | Inclut des espaces colorimétriques plus larges |
| Compatibilité navigateurs | Universelle | Tous les navigateurs modernes |
| Facilité de lecture | Familier | Demande un peu d’apprentissage |
Quand utiliser l’un ou l’autre
- Utilisez OKLCH pour les systèmes de design, les nuances générées et les couleurs vives sur les écrans modernes.
- Utilisez HSL pour des couleurs ponctuelles et rapides, ou lorsque vous devez prendre en charge de très anciens navigateurs.
Prêt à passer à OKLCH ? Convertissez une couleur avec le convertisseur HEX vers OKLCH, puis suivez notre guide sur l’utilisation d’OKLCH en CSS.
Outils utilisés dans ce guide
Convertisseur OKLCHSélecteur OKLCH avec curseurs luminosité, chroma et teinte : convertissez entre OKLCH, HEX, RGB, HSL et OKLab, avec contrôle du gamut sRGB et replis CSS.Convertisseur HEX vers OKLCHConvertissez n'importe quelle couleur HEX en OKLCH pour le CSS moderne.Convertisseur de couleursConvertisseur de couleurs gratuit en ligne : HEX vers RGB, HSL, HWB, OKLCH, CMYK et noms CSS, plus palette de teintes 50–950 en variables CSS.
Questions fréquentes
OKLCH est-il meilleur que HSL ?
Pour créer des palettes, oui en général, car sa luminosité est plus constante. HSL reste tout à fait acceptable dans les cas simples.
Quelle est la différence entre LCH et OKLCH ?
Les deux décrivent les couleurs de la même manière, mais OKLCH repose sur un modèle plus récent qui conserve des teintes plus stables lorsque la luminosité varie.
