Convertisseur hex vers RGB / HSL / OKLCH

Référence des formats

• Hex (#RRGGBB) — six chiffres hexadécimaux, deux chacun pour le rouge, le vert et le bleu. Le plus courant en CSS et dans les outils de design. La notation abrégée optionnelle à 3 chiffres (#RGB) double chaque chiffre.
• RGB (0–255) — trois entiers de 0 à 255 représentant l'intensité de rouge, vert et bleu. Même espace colorimétrique que le hex, simplement décimal au lieu d'hexadécimal.
• HSL (Teinte, Saturation, Luminosité) — représentation RGB cylindrique. La teinte est un angle de 0° à 360° autour de la roue chromatique ; la saturation va de 0 à 100 % (gris à vif) ; la luminosité va de 0 à 100 % (noir à blanc). Plus facile que RGB pour choisir des couleurs apparentées, mais pas perceptuellement uniforme — des valeurs L égales peuvent paraître très différentes en luminosité.
• OKLCH (Luminosité, Chroma, Teinte) — espace colorimétrique perceptuellement uniforme moderne conçu par Björn Ottosson (2020). L (0–100 %) suit la luminosité perçue, donc des valeurs L égales paraissent également claires ; C est le chroma (saturation, non borné mais typiquement 0–0,4 pour sRGB dans le gamut) ; H est la teinte en degrés. Utilisé dans CSS Color Module 4 et en interne par Tailwind v4 pour la manipulation de couleurs.

Pourquoi OKLCH compte

Pour des tâches comme générer une palette de couleurs équidistantes ou construire une échelle tonale (luminosité 10, 20, 30, …), HSL échoue subtilement : un jaune à 50 % de luminosité paraît bien plus clair qu'un bleu à 50 % parce que le modèle RGB-cylindrique sous-jacent ne tient pas compte de la sensibilité de l'œil humain. OKLCH corrige ça — des valeurs L égales produisent des couleurs également claires sur toutes les teintes, donc les palettes et les échelles tonales se comportent comme on s'y attend intuitivement.