CSS Couleurs HEX


Valeur HEX

Une couleur hexadécimale est spécifiée avec : #RRGGBB.

En CSS, une couleur peut être définie à 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 aux valeurs décimales de 0 à 255).

Par exemple, #ff0000 s'affiche en rouge, car le rouge est réglé à sa valeur maximale (ff) et les autres à leur valeur minimale (00).

Pour afficher le noir, réglez toutes les valeurs à 00, comme ceci : #000000.

Pour afficher le blanc, réglez toutes les valeurs à ff, comme ceci : #ffffff.

Expérimentez en mélangeant les valeurs HEX ci-dessous :

ROUGE

ff

VERT

0

BLEU

0

Exemple

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

Essayez-le vous-même »

Les nuances de gris sont souvent définies en utilisant des valeurs égales pour les trois sources de lumière :

Exemple

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

Essayez-le vous-même »


Valeur HEX à 3 chiffres

Parfois, vous verrez un code hexadécimal à 3 chiffres dans le code CSS.

Le code hexadécimal à 3 chiffres est une abréviation 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 valeurs (RR, GG et BB) sont identiques pour chaque composant. Par exemple, si nous avons #ff00cc, cela peut être écrit comme ceci : #f0c.

Voici un exemple :

Exemple

body {
background-color: #fc9; /* identique à #ffcc99 */
}

h1 {
color: #f0f; /* identique à #ff00ff */
}

p {
color: #b58; /* identique à #bb5588 */
}
Essayez-le vous-même »


Vidéo : Couleurs CSS Hex