Les cours css : Les formats de couleur

> >

Les couleurs css

Introduction

Il existe plusieurs façons de spécifier une couleur en css :

  • - en la nommant.
  • - en spécifiant le code hexadécimal.
  • - au format rgb (rvb en français).
  • - au format rgba (rvba en français)(nouveauté prise en compte vers 2010),
  • - au format hsl (tsl en français) et hsla (nouveauté prise en compte vers 2010),

Les couleurs hexadécimales

Définition

Vous pouvez spécifier une couleur en css en spécifiant la valeur hexadécimal :

Code CSS :
.couleur { color: #ff0000 }/* #rrggbb */

Quant 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):

Code CSS :
.couleur { color: #f00 }/* #rgb */

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

Les couleurs en rgb

Définition

Vous pouvez spécifier une couleur en css en utilisant le format de couleur rgb :

Code CSS :
.couleur { color: rgb(255, 0, 0) } /* 0 - 255 */

Code CSS :
.couleur { color: rgb(100%, 0%, 0%) }/* 0 - 100 */

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%.

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

Les couleurs en rgba

Définition

La format de format de couleur rgba est un nouveau format qui commence à être interprété vers 2010.
Vous pouvez spécifier une couleur en css en utilisant le format de couleur rgba :

Exemple de code :
.couleur { color: rgba(255, 0, 0, 1) } /* 0 - 255 */

Exemple de code :
.couleur { color: rgba(100%, 0%, 0%, 0.6) }/* 0 - 100 */

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 :

Exemple de code :
.couleur { color: rgba(250, 0%, 0%, 0.6) }/* non autorisé */

rgba est l'abréviation de "red, green, blue, alpha" soit en français "rouge, vert, bleu, transparence".

Les couleurs en hsl et hlsa

Définition

La format de format de couleur hsl et hsla sont des nouveaux formats qui commencent a être interprété vers 2010.

Vous pouvez spécifier une couleur en css en utilisant le format de couleur hsl ou hsla :

Code CSS :
.couleur { color: hsl(240, 100%, 50%) }

Code CSS :
.couleur { color: hsla(240, 100%, 50%, 0.6) }

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

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).