Pour indiquer la couleur d'un élément,du fond ou d'une bordure, nous disposons de six types de valeur.
- la couleur en anglais : red, black, white, blue, green, etc. ;
- la couleur en hexadécimal : #C0C0C0 ;
- la couleur en Red Green Blue (RGB ou RVB en français) : rgb(0, 255, 0) ;
- la couleur en RGB avec transparence : rgba(0, 255, 0, 0.5) ;
- la couleur en Hue Saturation Luminosity (HSL ou teinte, saturation, luminosité) : hsl(250, 100%, 50%) ;
- la couleur en HSL avec transparence : hsla(250, 100%, 50%, 0.5).
Liste des noms des couleurs
| aliceblue | F0F8FF | antiquewhite | FAEBD7 | ||||
| aqua | 00FFFF | aquamarine | 7FFFD4 | ||||
| azure | F0FFFF | beige | F5F5DC | ||||
| bisque | FFE4C4 | black | 000000 | ||||
| blanchedalmond | FFEBCD | blue | 0000FF | ||||
| blueviolet | 8A2BE2 | brown | A52A2A | ||||
| burlywood | DEB887 | cadetblue | 5F9EA0 | ||||
| chartreuse | 7FFF00 | chocolate | D2691E | ||||
| coral | FF7F50 | cornflowerblue | 6495ED | ||||
| cornsilk | FFF8DC | crimson | DC143C | ||||
| cyan | 00FFFF | darkblue | 00008B | ||||
| darkcyan | 008B8B | darkgoldenrod | B8860B | ||||
| darkgray | A9A9A9 | darkgreen | 006400 | ||||
| darkkhaki | BDB76B | darkmagenta | 8B008B | ||||
| darkolivegreen | 556B2F | darkorange | FF8C00 | ||||
| darkorchid | 9932CC | darkred | 8B0000 | ||||
| darksalmon | E9967A | darkseagreen | 8FBC8F | ||||
| darkslateblue | 483D8B | darkslategray | 2F4F4F | ||||
| darkturquoise | 00CED1 | darkviolet | 9400D3 | ||||
| deeppink | FF1493 | deepskyblue | 00BFFF | ||||
| dimgray | 696969 | dodgerblue | 1E90FF | ||||
| firebrick | B22222 | floralwhite | FFFAF0 | ||||
| forestgreen | 228B22 | fushia | FF00FF | ||||
| gainsboro | DCDCDC | ghostwhite | F8F8FF | ||||
| gold | FFD700 | goldenrod | DAA520 | ||||
| gray | 808080 | green | 008000 | ||||
| greenyellow | ADFF2F | honeydew | F0FFF0 | ||||
| hotpink | FF69B4 | indianred | CD5C5C | ||||
| indigo | 4B0082 | ivory | FFFFF0 | ||||
| khaki | F0E68C | lavender | E6E6FA | ||||
| lavenderblush | FFF0F5 | lawngreen | 7CFC00 | ||||
| lightpink | FFB6C1 | lightsalmon | FFA07A | ||||
| lightseagreen | 20B2AA | lightskyblue | 87CEFA | ||||
| lightslategray | 778899 | lightsteelblue | B0C4DE | ||||
| lightyellow | FFFFE0 | lime | 00FF00 | ||||
| limegreen | 32CD32 | linen | FAF0E6 | ||||
| magenta | FF00FF | maroon | 800000 | ||||
| mediumaquamarine | 66CDAA | mediumblue | 0000CD | ||||
| mediumorchid | BA55D3 | mediumpurple | 9370DB | ||||
| mediumseagreen | 3CB371 | mediumslateblue | 7B68EE | ||||
| mediumspringgreen | 00FA9A | mediumturquoise | 48D1CC | ||||
| mediumvioletred | C71585 | midnightblue | 191970 | ||||
| mintcream | F5FFFA | mistyrose | FFE4E1 | ||||
| moccasin | FFE4B5 | navajowhite | FFDEAD | ||||
| navy | 000080 | oldlace | FDF5E6 | ||||
| olive | 808000 | olivedrab | 6B8E23 | ||||
| orange | FFA500 | orangered | FFA500 | ||||
| orchid | DA70D6 | palegoldenrod | EEE8AA | ||||
| palegreen | 98FB98 | paleturquoise | AFEEEE | ||||
| palevioletred | DB7093 | papayawhip | FFEFD5 | ||||
| peachpuff | FFDAB9 | peru | CD853F | ||||
| pink | FFC0CB | plum | DDA0DD | ||||
| powderblue | B0E0E6 | purple | 800080 | ||||
| red | FF0000 | rosybrown | BC8F8F | ||||
| royalblue | 4169E1 | saddlebrown | 8B4513 | ||||
| salmon | FA8072 | sandybrown | F4A460 | ||||
| seagreen | 2E8B57 | seashell | FFF5EE | ||||
| sienna | A0522D | silver | C0C0C0 | ||||
| skyblue | 87CEEB | slateblue | 6A5ACD | ||||
| slategray | 708090 | snow | FFFAFA | ||||
| springgreen | 00FF7F | steelblue | 4682B4 | ||||
| tan | D2B48C | teal | 008080 | ||||
| thistle | D8BFD8 | tomato | FF6347 | ||||
| turquoise | 40E0D0 | violet | EE82EE | ||||
| wheat | F5DEB3 | white | FFFFFF | ||||
| whitesmoke | F5F5F5 | yellow | FFFF00 | ||||
| yellowgreen | 9ACD32 |
Couleurs hexadécimal
Ce petit utilitaire permet de sélectionner tout type de couleur. En cliquant sur la zone de texte, une palette de couleur apparaît
et il suffit de cliquer sur la couleur que vous recherchez. Le code hexadécimal de la couleur s'écrit dans la zone de texte.
Il faut bien sûr ajouter un # devant le code couleur.
color:#76B4B5;
Pour sélectionnez et trouver une couleur, cliquer dans le rectangle :
Il a été développé par jscolor : site web de jscolor
Couleurs RGB
Il est possible de définir plus de 16 millions de couleurs en indiquant les valeurs RGB (Red Green Blue) d'une couleur.
Le standard CSS définit une notation RGB dite « fonctionnelle » permettant de définir les composantes de rouge, de vert et de bleu en indiquant
leur proportion relative en pourcentage ou bien en notation entière absolue (chaque composante étant un entier compris entre 0 et 255).
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) ;
color:#76B4B5; est équivalent à color:rgb(118,180,181); background-color:#76B4B5; est équivalent à background-color:rgb(118,180,181,0.8);Exemple:
.boite { background-color:rgb(255,0,0,); }
Résultat:
Transparence RGBa
Le RGB existe depuis un moment dans la norme CSS. Avec le CSS3, l'opacité est appliquée au RGB via RGBa.
La notation RGBa obéit aux mêmes règles de fonctionnement que la notation classique RGB, mis à part qu'une composante est ajoutée à la valeur : rgb(0,0,0) devient donc rgba(0,0,0,0).
La dernière valeur (l'alpha) indiquant le degré d'opacité entre 0 et 1.
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).
color:rgba(118,180,181,0.8); background-color:rgba(118,180,181,0.8);Exemple avec une transparence de 1.0 , 0.5 et 0.2:
.boite1 { background-color:rgba(255,0,0,1); }
.boite2 { background-color:rgba(255,0,0,0.5); }
.boite3 { background-color:rgba(255,0,0,0.2); }
Attention la valeur a de RGBa ne fonctionne pas comme la propriété opacity. (voir plus loin opacity ou RGBa)
RGBa est susceptible de s'appliquer à toutes les propriétés dont la valeur peut être une couleur : background-color, color, border-color, box-shadow, text-shadow, etc.
Couleurs 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.
- H: entre 0 et 119 (nuance de rouge)
- L: entre 120 et 239 (nuance de vert) en (%)
- S: entre 240 et 359 (nuance de bleu) en (%)
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).
.boite { background-color:hsl(0,100%,50%); }
Résultat:
Transparence 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).
- H: entre 0 et 119 (nuance de rouge) ;
- L: entre 120 et 239 (nuance de vert) ;
- S: entre 240 et 359 (nuance de bleu).
- A: opacité en valeur flottante (0.0 à 1.0).
La couleur rouge est en hexa:#ff0000 ou en rgb: 255,0,0 ou en hsl: 0,100%,50%
Le même exemple que pour rgba avec une transparence de 1.0 , 0.5 et 0.2:
.boite1 { background-color:hsla(0,100%,50%,1); }
.boite2 { background-color:hsla(0,100%,50%,0.5); }
.boite3 { background-color:hsla(0,100%,50%,0.2); }
Opacity
L'opacity permet d'appliquer une transparence à un élément et à tous ses enfants (contrairement à HSLA et à RGBA)
Il prend pour valeur entre 0.0 et 1.0
p.opaque { opacity:0.8; }
Pour faire le même effet de transparence sous Internet Explorer < 9 vous devez utiliser la propriété de feuille de style css filter qui est propre à Internet Explorer.
La valeur opacity de la propriété de feuille de style css filter accepte comme valeur un nombre compris entre 0 et 100, 0 étant totalement transparent et 100 totalement opaque.
p.opaque { filter:alpha(opacity=80); }
Exemple d'une image normal avec aucune opacité ou opacity:1;
img { opacity:0.4;
filter:alpha(opacity=40); /* For IE < 9 */ }
Il est aussi possible de jouer avec la transparence et la pseudo-classe :hover
Exemple CSS:
.imggauche { float:left; opacity:0.4; filter:alpha(opacity=40); }
.imgdroite { float:right; opacity:0.4; filter:alpha(opacity=40); }
.imggauche:hover { opacity:1.0; filter:alpha(opacity=100); }
.imgdroite:hover { opacity:1.0; filter:alpha(opacity=100); }
Voici le résultat en survolant l'image opaque avec la souris:
Opacity ou RGBa
L'opacity permet d'appliquer une transparence à un élément et à tous ses enfants. Cela est IMPORTANT, car un texte prend la même opacité que l'opacity de la couleur de fond. Ce qui n'est pas le cas si la couleur de fond est définie en hlsa ou rgba!
Pourquoi?
Les 2 exemples qui suivent ont été placé sur une image afin d'accentuer ce problème de transparence.
Illustration du principe de transparence de la couche Alpha (RGBa ou HSLa).
Code CSS:
.exemple { background-image:url(/images/fleurs/glycine2.jpg); }
.boite1 { float:left; background-color:rgba(2,107,0,1); }
.boite2 { float:right; background-color:rgba(2,107,0,0.5); }
Code html:
<div class="exemple"> <div class="boite1"><p>Un texte</p><p> Alpha=1 </p></div> <div class="boite2"><p>Un texte</p><p> Alpha=0.3 </p></div> </div>
Un texte
Alpha=1
Un texte
Alpha=0.3
Comme vous pouvez constater dans cet exemple, la couleur jaune du texte est le même. La transparence ne s'est appliquée QUE sur le parent boite2.
Illustration du principe d'opacité (opacity) sur un élément.
Code CSS:
.exemple { background-image:url(/images/fleurs/glycine2.jpg); }
.boite1 { float:left; background-color:#016b00; opacity:1; filter:alpha(opacity=100); }
.boite2 { float:right; background-color:#016b00; opacity:0.3; filter:alpha(opacity=30); }
N'oubliez pas que filter:alpha(opacity=30); est codé pour Internet Explorer < 9
Code html:<div class="exemple"> <div class="boite1"><p>Un texte</p><p> opacity=1 </p></div> <div class="boite2"><p>Un texte</p><p> opacity=0.3 </p></div> </div>
Un texte
opacity=1
Un texte
opacity=0.3
Ici, la différence est flagrante et le texte jaune a hérité de la transparence de son parent boite2.