Les formats de couleur CSS - Les cours Css

Les couleurs en Css

Comment écrire des couleurs en CSS

Quelle que soit la propriété de couleur CSS (color, border-color, background-color), les formats de couleurs Css sont gérés de la même façon.
Il existe plusieurs façons de spécifier une couleur en Css :

Convertisseur RGV, HSL, Hexadécimal et transparence

Les couleurs Css nommées

Comment écrire une couleur CSS nommée?

Une couleur nommée en CSS est un nom donné à une couleur bien précise qui ne changera jamais suivant les navigateurs.
Vous pouvez spécifier une couleur en css en utilisant une des 216 couleurs prédéfinies :

Exemple d'écriture d'une couleur nommée :
.couleur-css { color : coral }
.couleur-css { color : red }

Quelques exemples :

 aqua  black  blue  fuchsia
 gray  green  lime  maroon
 navy  olive  purple  red
 silver  teal  white  yellow

Les 216 noms de couleurs WEB prédéfinies

Les couleurs Css hexadécimales

Comment écrire une couleur CSS hexadécimale?

Vous pouvez spécifier une couleur en Css en spécifiant sa valeur hexadécimale :

Exemple d'écriture d'une couleur hexadécimale :
.couleur-css { color: #ff0000 } /* #rrggbb */

Quand les valeurs dans le couple rr et gg et bb sont identiques vous pouvez simplifier en ne mettant que seule des deux valeurs r, g et b (sont doublées automatiquement):

Exemple d'écriture raccourcie d'une couleur hexadécimale :
.couleur-css { color: #f00 } /* #rgb */

Il existe plusieurs couleurs hexadécimales prédéfinies.

Les couleurs hexadécimales

Les couleurs Css en rgb

Comment écrire une couleur CSS rgb?

Le format de couleur rgb est l'abréviation de "red, green, blue" soit en français "rouge, vert, bleu".

Le format de couleur CSS rgb accepte 3 valeurs entières comprises entre 0 et 250 ou 3 valeurs entières en pourcentage. La valeur entière 255 correspond à 100%. Vous ne devez pas mélanger les unités.

Exemple d'écriture d'une couleur en RGB :
.couleur-css { color: rgb(255, 0, 0) } /* 0 - 255 */
.couleur-css { color: rgb(100%, 0%, 0%) } /* 0 - 100 */

Les couleurs RGB

Les couleurs Css en rgba

Comment écrire une couleur CSS rgba?

Le format de couleur rgba CSS est l'abréviation de "red, green, blue, alpha" soit en français "rouge, vert, bleu, transparence".
Le format de couleur CSS rgba est un nouveau format qui commence à être interprété vers 2010.

La couleur Css rgba accepte 3 valeurs entières comprises entre 0 et 255 ou 3 valeurs entières en pourcentage et une valeur entre 0 (transparent) et 1 opaque.
Si vous êtes en pourcentage 100% représente 255. Vous ne pouvez pas mélanger les unités.

Ecriture d'une couleur RGBA :
.couleur-css { color: rgba(255, 0, 0, 1) } /* 0 - 255 */
.couleur-css { color: rgba(100%, 0%, 0%, 0.6) }/* 0 - 100 */

Compatibilité des couleurs RGB et RGBA avec les navigateurs.

Les couleurs Css en hsl et hlsa

Comment écrire une couleur hsl ou hlsa?

La couleur Css hsl est l'abréviation de "Hue, Saturation, Lightness" soit en français "Teinte, Saturation, Luminosité".
La couleur Css hsla est l'abréviation de "Hue, Saturation, Lightness, Alpha" soit en français "Teinte, Saturation, Luminosité, Transparence".

Le format de couleur CSS hsl et hsla sont des nouveaux formats qui commencent à être interprétés vers 2010.

hsl accepte 3 valeurs entières dans l'ordre cité :
- une valeur entière comprise entre 0 et 360, l'unité est le degré, représente la teinte.
- une valeur entière comprise entre 0 et 100, l'unité est le pourcentage, représente la saturation.
- une valeur entière comprise entre 0 et 100, l'unité est le pourcentage, représente la luminosité.
hsla accepte les 3 valeurs ci-dessus et une valeur comprise entre 0 (totalement transparent) et 1(totalement opaque).

Exemple d'écriture d'une couleur en hsl et hsla :
.couleur-css { color: hsl(240, 100%, 50%) }
.couleur-css { color: hsla(240, 100%, 50%, 0.6) }

Compatibilité des couleurs HSL et HSLA avec les navigateurs.