Couleurs CSS HEX


Table des matières

    Afficher la table des matières


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.


Valeur HEX

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

ff

GREEN

0

BLUE

0

Exemple

#ff0000
#0000ff
#3cb371
#ee82ee
#ffa500
#6a5acd

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 :

Exemple

#3c3c3c
#616161
#787878
#b4b4b4
#f0f0f0
#f9f9f9

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>




Valeur HEX à 3 chiffres

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:

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>