Syntaxe moderne des couleurs CSS avec exemples prêts à copier

Commencer par l’espace, pas la ponctuation

Une valeur de couleur CSS associe un espace colorimétrique, des coordonnées dans cet espace et parfois une composante alpha. La ponctuation visible n’est que la sérialisation. Un HEX à six chiffres stocke trois octets sRGB, tandis que rgb() exprime les mêmes canaux rouge, vert et bleu avec des nombres ou des pourcentages. HSL et HWB offrent des vues alternatives de sRGB. lab() et oklch() ne sont pas du RGB reformulé : le navigateur convertit leurs coordonnées par gestion des couleurs avant composition et affichage. Une conversion correcte doit donc conserver les coordonnées et l’espace visé.

Les couleurs nommées et le mot-clé transparent sont des constantes pratiques, mais ne constituent pas un modèle d’édition extensible. Une couleur comme rebeccapurple se résout en une valeur sRGB définie ; son nom n’indique aucun rôle dans le produit. Dans un système réutilisable, placez la valeur derrière une propriété personnalisée dont le nom décrit la fonction. L’équipe peut alors changer de notation sans renommer tous les composants et sans prétendre que deux valeurs numériquement proches appartiennent au même espace ou produisent nécessairement la même couleur rendue.

HEX et rgb() exposent directement sRGB

HEX emploie #RRGGBB ou #RRGGBBAA, chaque paire hexadécimale allant de 00 à FF. rgb() décrit les mêmes canaux sRGB et accepte la syntaxe moderne séparée par des espaces, les pourcentages et une barre avant alpha. Les formes courtes #RGB et #RGBA ne sont exactes que si chaque paire développée répète un chiffre ; elles ne servent pas à arrondir. Convertir #4F46E5 en rgb(79 70 229) est exact puisque 4F, 46 et E5 valent 79, 70 et 229. Revenir depuis des coordonnées HSL arrondies peut modifier un octet.

.syntax-demo {
  --accent: #4f46e5;
  color: rgb(79 70 229 / 85%);
  border-color: hsl(243.4 75.4% 58.6%);
  outline-color: hwb(243.4 27.5% 10.2%);
}

HSL et HWB pilotent autrement sRGB

hsl() utilise la teinte, la saturation et la luminosité HSL ; hwb() utilise la teinte, la blancheur et la noirceur. Les deux notations décrivent finalement des couleurs sRGB. Les angles de teinte bouclent et la teinte peut devenir sans effet lorsque les autres canaux produisent un résultat achromatique. La luminosité HSL ne mesure pas la luminosité perçue : des pas numériques égaux ne donnent pas forcément des pas visuels égaux. HWB est pratique pour raisonner en ajout de blanc ou de noir, mais garde le gamut sRGB et impose de mesurer le contraste.

• hsl() et hwb() sont des notations sRGB, pas des espaces à gamut étendu.
• La luminosité HSL n’est pas une luminosité perçue et ne remplace pas un calcul de contraste.
• Une teinte sans effet ou absente demande un traitement conscient durant l’interpolation.
• Une conversion arrondie peut déplacer les canaux sans changement d’intention.

Lab et OKLCH utilisent d’autres coordonnées

lab() utilise la clarté CIE et les axes opposés a et b. lch() présente un modèle apparenté par clarté, chroma et teinte. oklab() et oklch() reposent sur OKLab, conçu pour que les différences de coordonnées soient plus régulières dans de nombreuses tâches. Ces fonctions peuvent spécifier des couleurs hors de sRGB. Le navigateur peut mapper le résultat au gamut de l’écran réel. Les coordonnées sources gardent leur sens, mais une capture effectuée sur un écran sRGB ne démontre pas ce que tous les utilisateurs ont vu sur un écran à large gamut.

Séparateurs modernes et alpha

La notation fonctionnelle moderne sépare les canaux par des espaces et place alpha après une barre oblique. L’ancienne syntaxe à virgules reste reconnue dans rgb() et hsl() pour compatibilité, mais mélanger les deux grammaires dans une même fonction est invalide. Le mot-clé none représente une composante absente lorsque CSS Color 4 l’autorise ; pendant une interpolation, absence et zéro ne sont pas forcément équivalents. Les pourcentages dépendent également de la fonction. Consultez la grammaire choisie au lieu de transférer automatiquement unités et plages entre fonctions.

.wide-gamut {
  color: #4f46e5;
}

@supports (color: oklch(0% 0 0)) {
  .wide-gamut { color: oklch(62% 0.2 265); }
}

Choisir une syntaxe maintenable

Employez HEX lorsqu’une source fournit un sRGB opaque exact sous forme d’octets et qu’une notation compacte facilite la revue. rgb() convient lorsque le code manipule des canaux sRGB ou nécessite un alpha clair. hsl() et hwb() aident pour des modifications limitées adaptées à ces modèles, en gardant leurs limites perceptuelles. oklch() est utile pour travailler avec clarté, chroma et teinte de façon plus régulière. lab() répond à une exigence explicite de ce système ou d’interopérabilité. Un jeton sémantique peut masquer la sérialisation aux composants.

• Consignez l’espace colorimétrique avec les coordonnées.
• Gardez une propriété personnalisée sémantique stable au-dessus de la notation brute.
• Fournissez une solution de repli testée si les navigateurs ciblés l’exigent.
• Mesurez le contraste après composition de l’alpha sur le fond réel.

Tester le résultat calculé

La vérification doit examiner la couleur calculée ou résolue par le navigateur, pas seulement la chaîne source. Testez les solutions de repli dans les navigateurs ciblés, les valeurs hors gamut sur des écrans représentatifs et le contraste sur les couleurs finalement composées. Alpha, arrière-plan, filtres, modes de fusion et color-scheme peuvent modifier le résultat après l’analyse syntaxique. Les tests automatisés contrôlent la présence des jetons et le support, mais les contrôles visuels et d’accessibilité exigent le contexte rendu. Conserver la valeur source évite d’accumuler les arrondis lors de conversions répétées.