Cette page a été traduite à partir de l'anglais par la communauté.Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
<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.
Letype de donnéeCSS<hex-color> est une notation permettant de décrire lasyntaxe de couleur hexadécimale d'une couleursRGB 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
RouRRLa composanterouge de la couleur, sous forme de nombre hexadécimal insensible à la casse entre
0etff(255). S'il n'y a qu'un seul chiffre, il est dupliqué :1signifie11.GouGGLa composanteverte de la couleur, sous forme de nombre hexadécimal insensible à la casse entre
0etff(255). S'il n'y a qu'un seul chiffre, il est dupliqué :csignifiecc.BouBBLa composantebleue de la couleur, sous forme de nombre hexadécimal insensible à la casse entre
0etff(255). S'il n'y a qu'un seul chiffre, il est dupliqué :9signifie99.AouAAFacultatifLa composantealpha de la couleur, indiquant sa transparence, sous forme de nombre hexadécimal insensible à la casse entre
0etff(255). S'il n'y a qu'un seul chiffre, il est dupliqué :esignifieee.0ou00représente une couleur totalement transparente, etfouffune 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
<div> #F09 <div></div></div><div> #f09a <div></div></div><div> #ff0099 <div></div></div><div> #FF0099AA <div></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
| 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 moduleCouleur CSS