À propos des formats de couleur
Les différents formats de couleur décrivent la même couleur de différentes manières. Ils traduisent tous le même espace colorimétrique RGB.
HEX
Représentation hexadécimale à 6 chiffres — deux chiffres pour chaque canal rouge, vert, bleu. Existe aussi en version courte à 3 chiffres (#0AF = #00AAFF).
RGB
Trois entiers de 0 à 255 pour chaque canal. La forme CSS est rgb(0, 122, 255).
HSL & HSV
HSL décrit la couleur par Teinte (0–360°), Saturation (0–100%) et Luminosité (0–100%). HSV utilise la Valeur au lieu de la Luminosité — utile pour les color pickers. Les deux sont plus intuitifs que RGB pour ajuster une teinte ou une luminosité.
Questions fréquentes
Pourquoi mon orange devient gris au milieu d'un dégradé HSL ?
En HSL, l'interpolation traverse des teintes intermédiaires dont la saturation perçue s'effondre. Un dégradé orange–violet passe par des verts ternes car HSL n'est pas perceptuellement uniforme. La solution est d'utiliser linear-gradient(in oklch, ...) ou color-mix(in oklch, ...) : l'interpolation reste dans des couleurs vives tout au long du dégradé, sans zone grise.
HEX ou HSL : lequel utiliser en CSS moderne ?
HEX pour copier-coller depuis un design tool. HSL ou OKLCH pour écrire du CSS maintenable : hsl(220 70% 50%) est lisible et modifiable directement. En 2026, OKLCH est préférable dans du CSS pérenne : il gère nativement les couleurs hors-gamut sRGB pour les écrans P3 et produit des variations de clarté perceptuellement correctes sans dérive de teinte.
Mon design passe WCAG AA : est-ce suffisant pour l'accessibilité ?
WCAG AA (4.5:1) est le minimum légal dans de nombreux pays. Ce n'est pas un plafond : les personnes âgées ou malvoyantes bénéficient du niveau AAA (7:1). De plus, WCAG 2.x présente des défauts sur les textes clairs sur fond blanc, que l'algorithme APCA (prévu dans WCAG 3.0) corrige. Viser AA partout, AAA sur les longs corps de texte.
OKLCH est-il supporté partout en 2026 ?
Oui. oklch() est supporté par Chrome 111+, Firefox 113+, Safari 15.4+ et Edge 111+, soit plus de 93 % des navigateurs mondiaux en mai 2026 selon Can I Use. Un fallback HEX via @supports (color: oklch(50% 0.1 220)) suffit pour les navigateurs restants grâce à la cascade CSS naturelle.
Comment tester si une palette est compatible avec le daltonisme ?
Trois outils gratuits : (1) Chrome DevTools > Rendering > Emulate vision deficiencies — simulation en temps réel sur votre site. (2) Sim Daltonism (macOS/iOS) — loupe flottante pour 8 types de déficiences. (3) Coblis.com — upload une capture d'écran. Règle d'or : ne jamais utiliser la couleur seule — toujours doubler par une forme, une icône ou un texte.
