<hex-color>

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.

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

<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;
}

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

Résultat

Spécifications

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