Convertisseur de couleurs — HEX, RGB, HSL, OKLCH

Présentation

HEX dans la feuille de style, RGB dans l’outil de design, HSL ou OKLCH dans la palette : les valeurs de couleur changent sans cesse de forme. Saisissez une couleur dans l’un de ces formats et cet outil affiche ensemble HEX, RGB, HSL et OKLCH, montre un aperçu de la couleur et vérifie son contraste sur fond blanc et sur fond noir.

Mode d’emploi

1. Saisissez une couleur ou utilisez le sélecteur à côté du champ. Exemples : #1e90ff, rgb(30 144 255), hsl(210 100% 56%), oklch(0.65 0.19 250).
2. Lisez les valeurs HEX, RGB, HSL et OKLCH en dessous et copiez celle dont vous avez besoin.
3. Dans la section contraste, consultez le rapport sur blanc et sur noir, et s’il satisfait AA et AAA. Si votre design utilise un autre fond, saisissez-le dans Couleur de fond pour vérifier exactement cette paire.
4. Une couleur avec transparence est donnée en HEX à 8 chiffres, en rgba(), en hsla() et sous la forme / alpha.

Fonctionnement

• La saisie accepte le HEX (3, 4, 6 ou 8 chiffres, # facultatif), les 148 noms de couleurs CSS Color 4 (tomato, rebeccapurple, quelle que soit la casse) et transparent, rgb()/rgba() (syntaxe avec virgules ou espaces, pourcentages autorisés), hsl()/hsla() et oklch().
• OKLCH utilise les matrices standard de la définition d’OKLab par Björn Ottosson (2020). Le sRGB est linéarisé puis passé par les racines cubiques LMS pour obtenir L, a et b ; C est la longueur de (a, b) et H son angle.
• La précision de sortie est d’une décimale pour HSL, de quatre pour L et C d’OKLCH et de deux pour H, assez pour qu’une reconversion en HEX redonne exactement la valeur de départ.
• Une saisie OKLCH hors du gamut sRGB est écrêtée canal par canal entre 0 et 255, et un avertissement s’affiche.
• Le contraste suit la luminance relative de WCAG 2.x. Le rapport affiché est arrondi à deux décimales, mais la réussite ou l’échec utilise la valeur non arrondie : 4,499 n’est jamais présenté comme un 4,5 réussi.

Exemples

À savoir

• Pour le texte courant, considérez AA texte normal (4,5:1) comme le minimum. Le grand texte, c’est-à-dire 18 pt ou plus, ou 14 pt en gras, n’exige que 3:1 pour AA.
• Ne comptez pas sur la seule couleur pour transmettre une information ; ajoutez une icône ou un libellé. Une vérification de contraste ne mesure que l’écart de luminosité entre le texte et le fond.