<hex-color>

Baseline Widely available

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis ⁨juillet 2015⁩.

Le type de donnée CSS <hex-color> est une notation permettant de décrire la syntaxe de couleur hexadécimale d'une couleur sRGB en utilisant ses composantes principales (rouge, vert, bleu) écrites sous forme de nombres hexadécimaux, ainsi que sa transparence.

Une valeur <hex-color> peut être utilisée partout où une valeur <color> peut l'être.

Syntaxe

#RGB        // La syntaxe à trois valeurs
#RGBA       // La syntaxe à quatre valeurs
#RRGGBB     // La syntaxe à six valeurs
#RRGGBBAA   // La syntaxe à huit valeurs

Valeur

R ou RR: La composante rouge de la couleur, sous forme de nombre hexadécimal insensible à la casse entre 0 et ff (255). S'il n'y a qu'un seul chiffre, il est dupliqué : 1 signifie 11.
G ou GG: La composante verte de la couleur, sous forme de nombre hexadécimal insensible à la casse entre 0 et ff (255). S'il n'y a qu'un seul chiffre, il est dupliqué : c signifie cc.
B ou BB: La composante bleue de la couleur, sous forme de nombre hexadécimal insensible à la casse entre 0 et ff (255). S'il n'y a qu'un seul chiffre, il est dupliqué : 9 signifie 99.
A ou AA Facultatif: La composante alpha de la couleur, indiquant sa transparence, sous forme de nombre hexadécimal insensible à la casse entre 0 et ff (255). S'il n'y a qu'un seul chiffre, il est dupliqué : e signifie ee. 0 ou 00 représente une couleur totalement transparente, et f ou ff une couleur totalement opaque.

Note : La syntaxe est insensible à la casse : #00ff00 est identique à #00FF00.

Exemples

Rose vif hexadécimal

Cet exemple inclut quatre carrés rose vif, avec des fonds totalement opaques ou semi-transparents créés à l'aide de quatre syntaxes hexadécimales insensibles à la casse de différentes longueurs.

HTML

html

<div>
  #F09
  <div class="c1"></div>
</div>
<div>
  #f09a
  <div class="c2"></div>
</div>
<div>
  #ff0099
  <div class="c3"></div>
</div>
<div>
  #FF0099AA
  <div class="c4"></div>
</div>

CSS

Les couleurs de fond rose vif sont créées à l'aide des notations hexadécimales à trois, quatre, six et huit valeurs, en utilisant à la fois des lettres majuscules et minuscules.

body {
  display: flex;
  justify-content: space-evenly;
  font-family: monospace;
}
div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

css

[class] {
  width: 40px;
  height: 40px;
}
.c1 {
  background: #f09;
}
.c2 {
  background: #f09a;
}
.c3 {
  background: #ff0099;
}
.c4 {
  background: #ff0099aa;
}

Résultat

Spécifications

Specification
CSS Color Module Level 4 # hex-notation

Compatibilité des navigateurs

Voir aussi

Le type de donnée <color>
Le type de donnée <named-color>
La fonction couleur rgb()
Le module Couleur CSS

Help improve MDN

Learn how to contribute

Cette page a été modifiée le ⁨14 oct. 2025⁩ par les contributeurs du MDN.

View this page on GitHub • Report a problem with this content