Noms de couleurs CSS

Un nom de couleur est un mot-clé lisible par l'homme — comme red, tomato ou rebeccapurple — que vous pouvez utiliser partout où CSS attend une valeur de couleur, au lieu d'une notation numérique telle que #FF0000 ou rgb(255 0 0). Les noms sont la façon la plus simple d'écrire une couleur : ils s'auto-documentent et il est impossible de les saisir par erreur en une autre couleur valide, comme cela peut arriver avec les codes hexadécimaux.

Ce chapitre répertorie toutes les couleurs nommées, explique quand utiliser un nom plutôt qu'une valeur hexadécimale ou rgb(), et couvre les quelques mots-clés spéciaux (transparent, currentColor) qui ne figurent pas dans le tableau.

Utiliser un nom de couleur

Insérez simplement le mot-clé dans n'importe quelle propriété de couleur. Les noms sont insensibles à la casse, donc Tomato, tomato et TOMATO sont identiques :

h1 {
  color: tomato;
}

button {
  background-color: SeaGreen;
  border: 2px solid darkslategray;
}

Ces formes sont interchangeables avec les formes hexadécimales et rgb() — color: tomato peint exactement les mêmes pixels que color: #FF6347 ou color: rgb(255 99 71). Préférez les noms pour la lisibilité lors du développement ; utilisez l'hexadécimal lorsque vous avez besoin d'une couleur de marque précise qui n'a pas de mot-clé.

Les couleurs nommées

Les 147 noms de couleurs ci-dessous sont pris en charge par tous les navigateurs modernes. Chaque ligne affiche le mot-clé et sa valeur HEX équivalente :

Comment les valeurs HEX correspondent aux noms

Chaque nom dans le tableau n'est qu'un raccourci pour une couleur RGB — un mélange de lumière Rouge, Verte et Bleue. CSS écrit ce mélange sous forme de valeur hexadécimale (HEX) : un # suivi de six chiffres, deux par canal. La valeur minimale d'un canal est 0 (hex 00) et la valeur maximale est 255 (hex FF).

#FF6347   →   FF = red 255   63 = green 99   47 = blue 71   →   "tomato"

HEX est insensible à la casse, donc #FFFFFF et #ffffff représentent la même couleur (blanc). Lorsque les trois canaux partagent les deux mêmes chiffres, vous pouvez utiliser le raccourci à 3 chiffres — #FFF s'étend en #FFFFFF et #F00 en #FF0000.

Connaître cette correspondance est utile lorsqu'un outil de conception vous fournit un code hexadécimal qui ressemble presque à un mot-clé : vous ne pouvez remplacer par le nom lisible que si les valeurs correspondent exactement.

Mots-clés de couleur spéciaux

Deux mots-clés se comportent comme des noms de couleur mais ne figurent pas dans le tableau :

• transparent — une couleur entièrement transparente, équivalente à rgba(0, 0, 0, 0). Utilisez-la pour masquer une bordure ou un arrière-plan sans supprimer la propriété.
• currentColor — correspond à la valeur color actuelle de l'élément. Pratique pour maintenir automatiquement une bordure ou un remplissage SVG synchronisé avec la couleur du texte.

.ghost-button {
  color: royalblue;
  background-color: transparent;
  border: 2px solid currentColor; /* follows the royalblue text color */
}

Chapitres associés

• La propriété CSS color — définir la couleur du texte d'un élément.
• La propriété CSS background-color — remplir l'arrière-plan d'un élément.
• Couleurs HTML — les modèles de couleur RGB / HEX / HSL expliqués.

Pratique