<color>
Le type de données CSS <color> permet de représenter des couleurs dans l'espace de couleurs sRGB. Une couleur pourra être décrite de trois façons :- Grâce à un mot-clé
- En utilisant le système de coordonnées cubiques RGB grâce à la notation #-hexadecimal ou aux notations fonctionnelles rgb() et rgba()
- En utilisant le système de coordonnées cylindriques HSL grâce aux notations fonctionnelles hsl() et hsla()
Les mots-clés
Certains mots-clés ont la même valeur:| aqua | cyan | #00ffff | |
| fuchsia | magenta | #ff00ff | |
| darkgray | darkgrey | #a9a9a9 | |
| darkslategray | darkslategrey | #2f4f4f | |
| dimgray | dimgrey | #696969 | |
| lightgray | lightgrey | #d3d3d3 | |
| lightslategray | lightslategrey | #778899 | |
| gray | grey | #808080 | |
| slategray | slategrey | #708090 |
Liste complète des couleurs
| black | #000000 | |
| silver | #c0c0c0 | |
| gray | #808080 | |
| white | #ffffff | |
| maroon | #800000 | |
| red | #ff0000 | |
| purple | #800080 | |
| fushia | #ff00ff | |
| green | #008000 | |
| lime | #00ff00 | |
| olive | #808000 | |
| yellow | #ffff00 | |
| navy | #000080 | |
| blue | #0000ff | |
| teal | #008080 | |
| aqua | #00ffff | |
| orange | #ffa500 | |
| aliceblue | #f0f8ff | |
| antiquewhite | #faebd7 | |
| aquamarine | #7fffda | |
| azure | #f0ffff | |
| beige | #f5f5dc | |
| bisque | #ffe4c4 | |
| blanchedalmond | #ffebcd | |
| 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 | |
| darkgrey | #a9a9a9 | |
| darkkhaki | #bdb76b | |
| darkmagenta | #8b008b | |
| darkolivegreen | #556b2f | |
| darkorange | #ff8c00 | |
| darkorchid | #9932cc | |
| darkred | #8b0000 | |
| darksalmon | #e9967a | |
| darkseagreen | #8fbc8f | |
| darkslateblue | #483d8b | |
| darkslategray | #2f4f4f | |
| darkslategrey | #2f4f4f | |
| darkturquoise | #00ced1 | |
| darkviolet | #9400d3 | |
| deeppink | #ff1493 | |
| deepskyblue | #00bfff | |
| dimgray | #696969 | |
| dimgrey | #696969 | |
| dodgerblue | #1e90ff | |
| firebrick | #b22222 | |
| floralwhite | #fffaf0 | |
| forestgreen | #228b22 | |
| gainsboro | #dcdcdc | |
| ghostwhite | #f8f8ff | |
| gold | #ffd700 | |
| goldenrod | #daa520 | |
| greenyellow | #adff2f | |
| grey | #808080 | |
| honeydew | #f0fff0 | |
| hotpink | #ff69b4 | |
| indianred | #cd5c5c | |
| indigo | #4b0082 | |
| ivory | #fffff0 | |
| khaki | #f0e68c | |
| lavender | #e6e6fa | |
| lavenderblush | #fff0f5 | |
| lawngreen | #7cfc00 | |
| lemonchiffon | #fffacd | |
| lightblue | #add8e6 | |
| lightcoral | #f08080 | |
| lightcyan | #e0ffff | |
| lightgoldenrodyellow | #fafad2 | |
| lightgray | #d3d3d3 | |
| lightgreen | #90ee90 | |
| lightgrey | #d3d3d3 | |
| lightpink | #ffb6c1 | |
| lightsalmon | #ffa07a | |
| lightseagreen | #20b2aa | |
| lightskyblue | #87cefa | |
| lightslategray | #778899 | |
| lightslategrey | #778899 | |
| lightsteelblue | #b0c4de | |
| lightyellow | #ffffe0 | |
| limegreen | #32cd32 | |
| linen | #faf0e6 | |
| magenta | #ff00ff | |
| 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 | |
| oldlace | #fdf5e6 | |
| olivedrab | #6b8e23 | |
| orangered | #ff4500 | |
| orchid | #da70d6 | |
| palegoldenrod | #eee8aa | |
| palegreen | #98fb98 | |
| paleturquoise | #afeeee | |
| palevioletred | #db7093 | |
| papayawhip | #ffefd5 | |
| peachpuff | #ffdab9 | |
| peru | #cd853f | |
| pink | #ffc0cb | |
| plum | #dda0dd | |
| powderblue | #b0e0e6 | |
| rosybrown | #bc8f8f | |
| royalblue | #4169e1 | |
| saddlebrown | #8b4513 | |
| salmon | #fa8072 | |
| sandybrown | #f4a460 | |
| seagreen | #2e8b57 | |
| seashell | #fff5ee | |
| sienna | #a0522d | |
| skyblue | #87ceeb | |
| slateblue | #6a5acd | |
| slategray | #708090 | |
| slategrey | #708090 | |
| snow | #fffafa | |
| springgreen | #00ff7f | |
| steelblue | #4682b4 | |
| tan | #d2b48c | |
| thistle | #d8bfd8 | |
| tommato | #ff6347 | |
| turquoise | #40e0d0 | |
| violet | #ee82ee | |
| whitesmoke | #f5f5f5 | |
| yellowgreen | #9acd32 | |
| rebeccapurple | #663399 |
Le mot-clé "transparent"
Le mot-clé transparent représente une couleur totalement transparente (autrement dit, la couleur qui sera vue sera la couleur située en arrière-plan). D'un point de vue technique, il s'agit d'un noir pur avec un canal alpha minimal : rgba(0,0,0,0). Dans l'exemple qui suit, la carré intérieur à une couleur de fond transparente ce qui fait que celle-ci apparait de la même couleur que celle de son parent.<style> #fond {
width: 200px;
height: 150px;
background-color: palegreen;
padding: 20px;
}
#carre {
width: 80px;
height: 80px;
background-color: transparent;
border: 1px solid black;
}
</style>
<div id="fond">
<div id="carre"></div>
</div>
Le mot-clé "currentcolor"
Le mot-clé currentcolor représente la valeur calculée de la propriété color pour l'élément. Il permet aux propriétés de couleur d'hériter de la valeur de l'élément parent même si, par défaut, celles-ci n'utilisent pas l'héritage.<style>
#cadre {
width: 300px;
height: 120px;
background-color: cyan;
color: red;
}
#texte1 {
background-color: yellow;
color: blue;
}
#texte2 {
background-color: red;
color: currentcolor;
}
</style>
<div id="cadre">
<div id="texte1">On voit le texte</div>
<div id="texte2">On ne voit pas le texte</div>
</div>
On voit le texte
On ne voit pas le texte
Le modèle rgb()
Les couleurs peuvent être définies de deux façons via le modèle RGB (rouge-vert-bleu ou Red-Green-Blue en anglais) :En notation hexadécimale :
- #RRGGBB : le signe "#" suivi par six caractères hexadécimaux (0~9, A~F), les deux premiers déterminent la composante rouge, les deux suivants la composante verte et les deux derniers la composante bleue.
- #RGB : le signe « # » suivi par trois caractères hexadécimaux (0~9, A~F), le premier chiffre représente la composante rouge, le deuxième la composante verte et le troisième la composante bleue.
Une couleur qui pourra être exprimée avec cette deuxième forme pourra également être exprimée avec la première (ainsi #f03 et #ff0033 représentent la même couleur).
"rgb", suivi de trois valeurs soit en nombres entiers (0~255) soit en pourcentages (0%~100%). 255 = 100% = FF. Il n'est pas possible de mélanger des entiers et des pourcentages. rgb(128, 128, 128) = rgb(50%, 50%, 50%) = #808080 = gray = grey.
background-color: rgb(128, 128, 128);
background-color: rgb(50%, 50%, 50%);
background-color: #808080;
background-color: gray;
background-color: grey;
Le modèle hsl()
Les couleurs peuvent être définies selon le modèle HSL Hue-Saturation-Lightness (teinte, saturation, luminosité). HSL est considéré comme plus intuitif que RGB car on peut ajuster les couleurs au fur et à mesure ou créer des palettes de couleurs plus simplement par exemple en conservant la même teinte et en faisant varier la saturation et/ou la luminosité.La teinte (hue) est représentée comme un angle sur le cercle des couleurs. L'angle est exprimé comme un nombre (un entier entre 0 et 360) sans unité. Par définition, le rouge correspond à 0 et à 360 et les autres couleurs évoluent sur le cercle. Vert correspond à 120 et bleu à 240. La valeur se comporte comme un angle et tournera en boucle avec une même mesure de couleur qui peut avoir différentes valeurs (par exemple -120 sera équivalent à 240 et 480 sera équivalent à 120).
La saturation (saturation) et la luminosité (lightness) sont représentées par des pourcentages.
- Pour la saturation, avec 100% l'image sera complètement saturée et avec 0%, l'image sera en nuances de gris.
- Pour la luminosité, 100% correspondra à du blanc et 0% à du noir. 50% agira comme une luminosité dite normale.
background-color: hsl(0, 100%, 50%);
background-color: hsl(30, 100%, 50%);
background-color: hsl(60, 100%, 50%);
background-color: hsl(90, 100%, 50%);
background-color: hsl(120, 100%, 50%);
background-color: hsl(150, 100%, 50%);
background-color: hsl(180, 100%, 50%);
background-color: hsl(210, 100%, 50%);
background-color: hsl(240, 100%, 50%);
background-color: hsl(270, 100%, 50%);
background-color: hsl(300, 100%, 50%);
background-color: hsl(330, 100%, 50%);
background-color: hsl(360, 100%, 50%);
RGBa(R, G, B, a) & HSLa(H, S, L, a)
Les fonctions rgba() et hsla() sont identiues aux fonctions rgb() et hsl() à la différence qu'elles ajoutent à ces dernières une quatrième valeur "a" (canal alpha ou couche alpha) qui permet de définir l'opacité de la couleur. Cette valeur peut être un nombre décimal compris entre 0 et 1 ou bien un pourcentage. Avec une valeur de 0 ou 0%, la couleur sera transparente tandis qu'une valeur de 1 ou 100% rendra la couleur totalement opaque. Par exemple une valeur de 0.4 sera équivalente à 40%.rgba(128, 128, 128, 0.4);
rgba(128, 128, 128, 40%);
0%
10%
20%
30%
40%
50%
60%
70%
80%
90%
100%