À propos de cet outil
Quatre notations pour la même couleur sRGB
HEX, RGB, HSL et HWB sont quatre façons d'écrire une couleur en sRGB, l'espace colorimétrique par défaut du web. HEX et RGB donnent directement les canaux rouge, vert et bleu, chacun de 0 à 255. HSL donne un angle de teinte, une saturation et une luminosité ; HWB donne le même angle de teinte avec une quantité de blanc et une quantité de noir ajoutées. Passer de l'une à l'autre change la notation, pas la couleur.
Un code hexadécimal à huit chiffres comme #5a3ff080, ou une quatrième valeur après une barre oblique comme rgb(90 63 240 / 0.5), ajoute un canal alpha. La forme séparée par des espaces est la syntaxe de CSS Color Level 4 et fonctionne dans tous les navigateurs actuels ; la forme avec virgules, rgba(90, 63, 240, 0.5), reste là pour les outils plus anciens.
Ce qu'apportent OKLCH et OKLab
OKLab est un espace colorimétrique conçu par Björn Ottosson en 2020 pour que des écarts numériques égaux paraissent égaux à l'œil. OKLCH est le même espace en coordonnées polaires : une luminosité de 0 à 1, une chroma (l'intensité de la couleur) et un angle de teinte. Deux couleurs OKLCH de même luminosité paraissent à peu près aussi claires l'une que l'autre, ce qui n'est pas le cas en HSL, où un jaune et un bleu à 50 % de luminosité sont très différents.
OKLCH peut aussi décrire des couleurs qu'un écran sRGB ne sait pas afficher. Quand vous en saisissez une, cet outil conserve sa luminosité et sa teinte, réduit la chroma jusqu'à ce que la couleur entre dans le gamut, et vous le signale.
Comment le rapport de contraste est calculé
WCAG 2 définit le contraste comme (L1 + 0.05) / (L2 + 0.05), où L1 et L2 sont la luminance relative de la couleur la plus claire et de la plus foncée. Le résultat va de 1:1 pour deux couleurs identiques à 21:1 pour du noir sur du blanc.
Le niveau AA exige au moins 4,5:1 pour le texte normal et 3:1 pour le grand texte ; le niveau AAA exige 7:1 et 4,5:1. Un grand texte fait au moins 24 pixels CSS, ou environ 18,7 pixels en gras. Le rapport affiché ici est arrondi à l'inférieur, car une paire qui mesure 4,499:1 n'atteint pas 4,5:1.
Comment cet outil calcule les valeurs
Les conversions s'exécutent en JavaScript dans votre navigateur, avec la fonction de transfert sRGB et les matrices OKLab publiées avec l'espace colorimétrique. Chaque sortie est arrondie à quelques décimales, choisies pour que la valeur redonne la même couleur 8 bits avec ces formules. Un navigateur peut calculer OKLCH et OKLab avec des constantes légèrement différentes : une valeur OKLCH ou OKLab collée peut donc s'écarter d'un ou deux crans sur 255 dans un canal, le plus souvent dans un vert saturé. Le nom de couleur le plus proche est celui qui se trouve à la plus petite distance dans OKLab.