Migrez les couleurs HSL vers OKLCH perceptuellement uniforme — instantanément, 100% local
Collez n'importe quelle couleur HSL et obtenez instantanément l'équivalent OKLCH pour une utilisation dans le CSS moderne. OKLCH est le successeur de HSL dans CSS Color Level 4, offrant une luminosité perceptuellement uniforme et un accès au gamut de couleurs P3 complet.
Besoin de HEX ↔ RGB ↔ HSL ↔ OKLCH en même temps ?
Ouvrir le convertisseur complet →HSL a été conçu pour la simplicité, pas pour la précision perceptuelle. Un jaune à hsl(60, 100%, 50%) paraît bien plus lumineux qu'un bleu à hsl(240, 100%, 50%), même s'ils partagent la même valeur de luminosité. OKLCH résout ce problème en mappant les couleurs sur un espace perceptuellement uniforme : les couleurs à la même valeur L semblent également lumineuses à l'œil humain. C'est essentiel pour créer des échelles de couleurs accessibles, des paires mode sombre automatiques et des tokens de design cohérents.
La luminosité de HSL n'est pas perceptuelle — un jaune à L=50% paraît bien plus lumineux qu'un bleu à L=50%. La luminosité de OKLCH est perceptuelle : toutes les couleurs à L=0.7 semblent également lumineuses. Cela rend la génération automatique de contrastes de texte accessibles et de palettes tonales prévisible et fiable.
L (Luminosité) va de 0 à 1 (noir à blanc). C (Chroma) est l'intensité colorée, typiquement 0–0.37 pour les couleurs sRGB. H (Teinte) est l'angle en degrés sur la roue des couleurs, 0–360.
Oui. oklch() est disponible dans Chrome 111+, Firefox 113+, Safari 15.4+, Edge 111+. Il couvre plus de 95% de l'utilisation mondiale des navigateurs en 2025.
Non. HSL et OKLCH représentent le même espace colorimétrique sRGB — OKLCH fournit simplement un système de coordonnées différent. Une légère imprécision en virgule flottante peut survenir mais est visuellement indétectable.