<named-color>

Syntaxe

color: red;
color: orange;
color: tan;
color: rebeccapurple;
color: transparent;

Valeur

Les couleurs nommées comprennent les couleurs standard, ainsi que les mots-clés transparent et currentColor.

Couleurs standard

Les couleurs de base possèdent des noms standard, faciles à retenir :

En plus de ces 16 couleurs, environ 150 autres couleurs possèdent un mot-clé qui leur est associé :

Au départ, dans CSS Niveau 1 ^(angl.), seules 16 couleurs de base étaient définies, avec l'ajout de orange dans CSS Niveau 2 ^(angl.). Les créateur·ice·s de sites trouvaient cette liste trop courte, et les éditeurs de navigateurs ont ajouté de nombreux noms de couleurs issus des couleurs X11. Dans SVG 1 ^(angl.), puis dans CSS Colors Niveau 3 ^(angl.), ces noms ont été standardisés, formellement définis et uniformisés (certains avaient des orthographes différentes qui sont désormais des alias). On les appelle mots-clés de couleur étendus, couleurs X11 ou couleurs SVG.

Dans CSS Colors Niveau 4 ^(angl.), une couleur supplémentaire, rebeccapurple, a été ajoutée en hommage au pionnier du Web Eric Meyer ^(angl.).

transparent

Le mot-clé transparent représente une couleur entièrement transparente. Cela rend l'arrière-plan derrière l'élément coloré totalement visible. Techniquement, transparent est un raccourci pour rgb(0 0 0 / 0%).

Pour éviter des comportements inattendus, par exemple dans un <gradient>, la spécification CSS actuelle indique que transparent doit être calculé dans l'espace colorimétrique alpha-prémultiplié ^(angl.). Cependant, les anciens navigateurs peuvent le traiter comme du noir avec une valeur alpha de 0.

Le mot-clé transparent n'était pas une vraie couleur dans CSS Niveau 2 (Révision 1). C'était un mot-clé spécial qui pouvait être utilisé à la place d'une valeur <color> classique sur deux propriétés CSS : background et border. Il a été ajouté essentiellement pour permettre aux développeur·euse·s d'écraser une couleur unie héritée. Avec l'arrivée des canaux alpha dans CSS Colors Niveau 3, transparent a été redéfini comme une vraie couleur. Il peut désormais être utilisé partout où une valeur <color> est acceptée.

Description

Tous les noms désignent une couleur dans l'espace colorimétrique sRGB. Bien que les noms décrivent plus ou moins leur couleur respective, ils restent essentiellement artificiels, sans logique stricte derrière les termes utilisés.

Les mots-clés de couleur représentent tous des couleurs unies, opaques, sans transparence.

Plusieurs mots-clés sont des alias les uns des autres :

• aqua / cyan
• fuchsia / magenta
• darkgray / darkgrey
• darkslategray / darkslategrey
• dimgray / dimgrey
• lightgray / lightgrey
• lightslategray / lightslategrey
• gray / grey
• slategray / slategrey

Bien que de nombreux mots-clés proviennent de X11, leurs valeurs RGB peuvent différer de la couleur correspondante sur les systèmes X11, car les fabricants adaptent parfois les couleurs X11 à leur matériel spécifique.

Exemples

Utilisation des couleurs nommées

HTML

<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>

CSS

#container {
  display: flex;
  justify-content: space-around;
  background-color: darkslateblue;
  padding: 20px;
}

#container > div {
  height: 100px;
  width: 100px;
  margin: 3px;
  border: 2px solid black;
}

#one {
  background-color: red;
}

#two {
  background-color: lavender;
}

#three {
  background-color: transparent;
}

Résultat

Spécifications

Compatibilité des navigateurs

Voir aussi

• Le type de donnée <color> dont la définition <named-color> est une partie constitutive.