Convertissez une couleur entre HEX, RGB et HSL avec alpha, aperçu live et sliders HSL. Calcul du ratio de contraste WCAG 2.x pour vérifier l'accessibilité AA (4,5 : 1) et AAA (7 : 1).
HEX est une notation compacte du triplet RGB en hexadécimal (#FF5733 = rgb(255, 87, 51)). RGB exprime les composantes Rouge/Vert/Bleu de 0 à 255. HSL représente la même couleur mais en termes perceptifs : Teinte (H, 0-360°), Saturation (S, 0-100 %) et Luminosité (L, 0-100 %). HSL facilite les variations (éclaircir, désaturer, changer de teinte).
Utilisez la notation 8 digits : #RRGGBBAA. Les deux derniers caractères codent l'opacité de 00 (transparent) à FF (opaque). Par exemple, #FF573380 correspond à rgba(255, 87, 51, 0.5). Un format court #RGBA existe aussi (#F538 = #FF553388). La plupart des navigateurs modernes supportent cette notation depuis 2016.
Le ratio de contraste WCAG 2.x compare la luminance relative de deux couleurs. Il va de 1 : 1 (identiques) à 21 : 1 (noir sur blanc). Un ratio d'au moins 4,5 : 1 est requis pour le texte normal (niveau AA) et 7 : 1 pour le niveau AAA. Pour un grand texte (au moins 18 pt, ou 14 pt gras), le seuil AA descend à 3 : 1.
Ramenez R, G et B entre 0 et 1 (division par 255). Calculez le maximum et le minimum des trois. La luminosité L = (max + min) / 2. Si max = min, la teinte et la saturation sont 0. Sinon, la saturation dépend de L et de (max - min), et la teinte se calcule selon la composante maximale. Les formules exactes sont détaillées dans la spécification CSS Color Module Level 3.
Plusieurs raisons possibles : (1) votre écran n'est pas calibré (les températures de couleur varient fortement entre écrans), (2) l'espace colorimétrique diffère (sRGB vs Display P3), (3) le mode sombre inverse certaines couleurs automatiquement, (4) la compression JPEG peut altérer les tons subtils. Pour des valeurs fidèles, utilisez un écran sRGB calibré et fournissez des valeurs CSS standard sans profil ICC custom.