Couleurs CSS nommées : quand les noms aident et quand HEX est plus clair

Une couleur nommée est une valeur CSS exacte

CSS Color 4 définit un vaste ensemble de couleurs nommées. Le navigateur accepte un identifiant de couleur nommée partout où une valeur de couleur est permise et le résout en canaux sRGB normalisés. Par exemple, red vaut exactement #FF0000, blue vaut #0000FF et rebeccapurple vaut #663399.

.notice {
  color: white;              /* #FFFFFF */
  background: rebeccapurple; /* #663399 */
  border-color: black;       /* #000000 */
}

Orthographe et casse

Les identifiants de couleurs nommées sont insensibles à la casse ASCII. red, RED et ReD produisent la même valeur. Les noms composés s’écrivent comme un identifiant unique, sans espace ni trait d’union, par exemple cornflowerblue, darkslategray et lightgoldenrodyellow.

• Employez l’identifiant normalisé exact ; les noms inventés comme brandblue ne sont pas des couleurs, sauf s’ils sont utilisés par un autre mécanisme.
• Préférez les minuscules dans le code source pour uniformiser les recherches et les révisions, même si le navigateur accepte d’autres casses.
• Ne traduisez pas l’identifiant : CSS utilise white, pas le mot localisé signifiant blanc.
• Consultez la spécification ou une table déterministe plutôt que de reconstituer de mémoire un nom long.

.same-result {
  color: red;
  border-color: RED;
  outline-color: ReD;
}

Des noms différents peuvent produire la même couleur

La liste des couleurs nommées contient des alias hérités d’anciennes palettes et des variantes orthographiques. aqua et cyan valent tous deux #00FFFF. fuchsia et magenta valent tous deux #FF00FF. gray et grey valent #808080, et cette paire orthographique apparaît aussi dans plusieurs noms de gris composés.

• aqua = cyan = #00FFFF
• fuchsia = magenta = #FF00FF
• gray = grey = #808080
• darkgray = darkgrey = #A9A9A9
• slategray = slategrey = #708090

Pourquoi les noms ne forment pas un système colorimétrique fiable

La norme conserve des noms accumulés au fil de l’histoire de VGA, HTML, X11 et SVG. Elle avertit explicitement que cet ensemble est irrégulier et incohérent en interne. Les mots sont des identifiants utiles, mais pas des coordonnées ordonnées ; ils ne doivent pas être considérés comme une palette conçue.

• green vaut #008000, tandis que le vert sRGB maximal #00FF00 se nomme lime.
• darkgray vaut #A9A9A9 et est plus clair que gray, #808080, malgré son préfixe.
• purple vaut #800080, tandis que rebeccapurple correspond à la valeur différente #663399.
• Des noms proches en langage naturel ne garantissent pas des écarts égaux de teinte, de saturation ou de luminosité.
• La liste couvre sRGB de façon inégale et ne représente ni les couleurs de marque arbitraires ni les couleurs Display P3 à large gamme.

Un nom seul documente donc mal une décision de conception. Consignez la valeur exacte, calculez le contraste depuis cette valeur et comparez les canaux résolus au lieu de supposer que dark, light, pale ou medium établissent une relation mesurable.

Quand une couleur nommée améliore le code

Un mot-clé court et familier peut être le choix le plus clair lorsque la valeur normalisée exacte est recherchée et que le code reste local. black et white sont immédiatement reconnaissables. red, blue et lime sont utiles dans les démonstrations qui enseignent la syntaxe CSS ou isolent un comportement du navigateur.

• Utilisez des noms familiers dans les exemples minimaux où la couleur elle-même n’est pas l’objet du test.
• Utilisez un mot-clé lorsque sa valeur normalisée fait explicitement partie de l’exigence.
• Utilisez des noms pour des contours de débogage temporaires qui ne deviendront pas le style du produit.
• Gardez les exemples prêts à copier en précisant la valeur numérique lorsqu’un mot-clé moins connu apparaît.

Quand HEX ou une propriété personnalisée sémantique est plus claire

Les interfaces de production nécessitent généralement une palette stable avec des rôles tels que texte, surface, action, avertissement et bordure. Un mot-clé brut n’exprime pas ces rôles, et remplacer chaque occurrence de blue est plus difficile que modifier un seul jeton sémantique. Les propriétés personnalisées CSS fournissent des noms définis par l’auteur, commençant par deux tirets, et peuvent contenir la valeur de couleur révisée.

:root {
  --color-text: #111827;
  --color-surface: #FFFFFF;
  --color-action: #4F46E5;
  --color-warning: #B45309;
}

.button {
  color: var(--color-surface);
  background: var(--color-action);
}

• Choisissez HEX lorsque les personnes chargées de la révision ont besoin de la valeur sRGB compacte exacte.
• Choisissez rgb() lorsque des canaux explicites ou un alpha lisible sont importants.
• Placez l’une ou l’autre valeur derrière une propriété personnalisée sémantique lorsque plusieurs composants partagent un rôle.
• N’utilisez pas red ou green comme seul signal d’erreur ou de réussite ; le texte, les icônes et un contraste accessible restent nécessaires.
• Traitez les noms des jetons comme la sémantique du produit et leurs valeurs numériques comme des données d’implémentation remplaçables.

Liste de contrôle pratique pour les couleurs nommées

• Vérifiez que le mot figure dans la table normalisée des couleurs nommées.
• Recherchez sa valeur HEX ou ses canaux RGB exacts au lieu de les estimer à partir du nom.
• Vérifiez si un autre mot-clé constitue un alias exact et conservez une référence canonique unique.
• Ne déduisez pas un ordre à partir de préfixes tels que dark ou light.
• Rappelez-vous que les couleurs nommées opaques sont résolues en sRGB, pas dans un espace plus large.
• Employez des propriétés personnalisées sémantiques pour les palettes de produit maintenues.
• Calculez le contraste à partir de la valeur résolue et du fond final.
• Séparez les valeurs spéciales comme transparent et currentcolor de la liste des couleurs nommées opaques.

Color Atlas applique ces règles en stockant un enregistrement canonique unique pour chaque couleur et en dérivant ses formats et ses valeurs de contraste. Un alias normalisé peut être documenté dans cet enregistrement sans fabriquer une deuxième page SEO presque identique.