Les cours css : Les formats de couleur

Page d'introduction

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


Convertisseur RGV, HSL, hexadécimal et transparence

Les couleurs nommées

Définition

Vous pouvez spécifier une couleur en css en utilisant une des 216 couleurs prédéfinîtes :
Exemple de code :
.couleur {color : red }

Quelque 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éfinîtes

Les couleurs hexadécimales

Définition

Vous pouvez spécifier une couleur en css en spécifiant la valeur hexadécimal :
Exemple de code :
.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):
Exemple de code :
.couleur { color: #f00 }/* #rgb */

Il existe plusieurs couleurs hexadécimales prédéfinies : Voir couleurs hexadécimales

Les couleurs en rgb

Définition

Vous pouvez spécifier une couleur en css en utilisant le format de couleur rgb :
Exemple de code :
.couleur { color: rgb(255, 0, 0) } /* 0 - 255 */

Exemple de code :
.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ées :
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".

Compatibilité navigateurs :
- Internet Explorer >= 9.0
- Firefox >= 3.0,
- Chrome >= 1.0,
- Opera >= 10.0+,
- Safari >= 3.1.

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 :
Exemple de code :
.couleur { color: hsl(240, 100%, 50%) }

Exemple de code :
.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).

Compatibilité navigateurs :
- Internet Explorer >=9.0
- Firefox >=3.0,
- Chrome >=1.0,
- Opera >=10.0,
- Safari >=3.1.