Une couleur hexadécimale est spécifiée avec : #RRGGBB, où le RR (rouge), GG (vert) et BB (bleu) les entiers hexadécimaux précisent les composantes de la couleur.
En CSS, une couleur peut être spécifiée à l'aide d'une valeur hexadécimale sous la forme :
#rrggbb
Où rr (rouge), gg (vert) et bb (bleu) sont des valeurs hexadécimales comprises entre 00 et ff (identiques à la valeur décimale 0-255).
Par exemple, #ff0000 s'affiche en rouge, car le rouge est défini sur sa valeur la plus élevée (ff) et les autres sont définis sur la valeur la plus basse (00).
Pour afficher du noir, définissez toutes les valeurs sur 00, comme ceci : #000000.
Pour afficher le blanc, définissez toutes les valeurs sur ff, comme ça : #ffffff.
Expérimentez en mélangeant les valeurs HEX ci-dessous :
RED
GREEN
BLUE
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<body>
<h1>Specify colors using HEX values</h1>
<h2 style="background-color:#ff0000;">#ff0000</h2>
<h2 style="background-color:#0000ff;">#0000ff</h2>
<h2 style="background-color:#3cb371;">#3cb371</h2>
<h2 style="background-color:#ee82ee;">#ee82ee</h2>
<h2 style="background-color:#ffa500;">#ffa500</h2>
<h2 style="background-color:#6a5acd;">#6a5acd</h2>
</body>
</html>
Les nuances de gris sont souvent définies en utilisant des valeurs égales pour les 3 sources lumineuses :
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<body>
<h1>Shades of gray</h1>
<p>By using equal values for red, green, and blue, you will get different shades of gray:</p>
<h2 style="background-color:#3c3c3c;">#3c3c3c</h2>
<h2 style="background-color:#616161;">#616161</h2>
<h2 style="background-color:#787878;">#787878</h2>
<h2 style="background-color:#b4b4b4;">#b4b4b4</h2>
<h2 style="background-color:#f0f0f0;">#f0f0f0</h2>
<h2 style="background-color:#f9f9f9;">#f9f9f9</h2>
</body>
</html>
Parfois, vous verrez un code hexadécimal à 3 chiffres dans la source CSS.
Le code hexadécimal à 3 chiffres est un raccourci pour certains codes hexadécimaux à 6 chiffres.
Le code hexadécimal à 3 chiffres a la forme suivante :
#rgb
Où r, g et b représentent les composants rouge, vert et bleu avec des valeurs comprises entre 0 et f.
Le code hexadécimal à 3 chiffres ne peut être utilisé que lorsque les deux valeurs (RR, GG et BB) sont identiques pour chaque composant. Donc, si nous avons #ff00cc, cela peut s'écrire comme ceci : #f0c.
Voici un exemple:
body {
background-color: #fc9; /* same as #ffcc99 */
}
h1 {
color: #f0f; /* same as #ff00ff */
}
p {
color: #b58; /* same as #bb5588 */
}
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #fc9; /* same as #ffcc99 */
}
h1 {
color: #f0f; /* same as #ff00ff */
}
p {
color: #b58; /* same as #bb5588 */
}
</style>
</head>
<body>
<h1>CSS 3-digit Hex Code</h1>
<p>This is a paragraph.</p>
</body>
</html>