Comprendre les couleurs en CSS3

debray jerome

Cet article a pour but de présenter la nouvelle gestion des couleurs en CSS3.

Commentez

- Titre : Comprendre les couleurs en CSS3

- Auteur : debray jerome

- Parution : 26 août 2010

- Mise à jour : 26 août 2010

- Licence : Copyright ® 2010 debray jerome. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.

Sommaire

- I. Compatibilité

- II. Couleur HSL

- III. Couleur HSLA

- IV. Couleur RGBA

- V. Opacity

- VI. Remerciements

I - Compatibilité

Chrome, Safari, Opera, Firefox 4, Internet Explorer 9

II - Couleur HSL

Le CSS3 inclut maintenant dans la norme, la notion de teinte, de saturation et de luminosité (Hue, Saturation, Luminosity).

Le Hue permet de modifier la teinte donc la couleur, c'est une valeur numérique.

Par exemple, 0 (ou 360) représente le rouge, 120 le vert et 240 le bleu ; c'est une mesure sur la roue chromatique. Entre ces 3 valeurs, ce sont les nuances.

- entre 0 et 119 (nuance de rouge) ;

- entre 120 et 239 (nuance de vert) ;

- entre 240 et 359 (nuance de bleu).

La saturation est une valeur de pourcentage, 100% équivalent à la couleur.

La luminosité est une valeur en pourcentage:

- 0% est le sombre (noir) ;

- 50% est la moyenne ;

- 100% est la lumière (blanc).

Exemple :

CSS

p.hsl{
background-color:hsl(100, 100%, 50%);
color:hsl(250, 100%, 50%);
}
p.hslAutre{
background-color:hsl(100, 100%, 50%);
color:hsl(250, 100%, 25%);/* couleur plus sombre que la précédente */
}

HTML

<p class="hsl"> couleurs gérées en hsl </p>
<p class="hslAutre"> couleurs gérées en hsl </p>

Démo

III - Couleur HSLA

C'est la même chose que la couleur hsl, sauf qu'il y a en plus la gestion de l'opacité de la couleur (sa transparence).

Exemple :

CSS

p.hsla{
background-color:hsl(100, 100%, 50%, 0.8);
color:hsla(250, 100%, 50%, 0.5);
}
p.hslaAutre{
background-color:hsla(90, 100%, 50%, 0.5);
color:hsla(250, 100%, 50%, 1.0);
}

HTML

<p class="hsla"> couleurs gérées en hsla </p>
<p class="hslaAutre"> couleurs gérées en hsla </p>

Démo

IV - Couleur RGBA

Le RGB existe depuis un moment dans la norme CSS. Avec le CSS3, l'opacité est appliquée au RGB via RGBA.

Les valeurs sont les suivantes :

- R: couleur rouge en % (de 0% à 100%) ou en valeur (0 à 255) ;

- G: couleur verte en % (de 0% à 100%) ou en valeur (0 à 255) ;

- B: couleur bleu en % (de 0% à 100%) ou en valeur (0 à 255) ;

- A: opacité en valeur flottante (0.0 à 1.0).

Exemple :

CSS

p.rgba{
background-color:rgba(255, 0, 0, 0.2);
color:rgb(250, 100, 50);
}
p.rgbaAutre{
background-color:rgba(90, 100, 50, 0.5);
color:rgba(250, 100, 50, 0.4);
}

HTML

<p class="rgba"> couleurs gérées en rgba </p>
<p class="rgbaAutre"> couleurs gérées en rgba </p>

Démo

L'intérêt du rgba et du hsla vient du fait que l'opacité qu'il applique aux élements, n'est pas héritée par les enfants de ces éléments (c'est le cas pour opacity).

V - Opacity

L'opacity permet d'appliquer une transparence à un élément et à tous ses enfants (contrairement à HSLA et à RGBA)

Il prend pour valeur un flottant (entre 0.0 et 1.0)

Exemple:

CSS

p.opacity{
opacity:0.5;
}
p.opacityAutre{
opacity:0.3;
}

HTML

<p class="opacity"> exemple sur opacity </p>
<p class="opacityAutre"> exemple sur opacity </p>

Démo

VI - Remerciements

Merci à Clément BEAUFILS pour sa relecture.

Commentez