Télécharger le PDF du cours
color que nous avons déjà rencontré précédemment.
Cette propriété est à la fois très simple à utiliser et relativement complexe à parfaitement maitriser car nous allons lui passer des valeurs de couleurs très différentes les unes des autres.
La propriété color va en effet pouvoir accepter des valeurs comme :
- Un nom de couleur (en anglais) ;
- Une notation hexadécimale ;
- Une notation RGB ou RGBa ;
- Une notation HSL ou HSLa.
Toutes ces notations vont nous permettre, in fine, d’attribuer une couleur particulière à notre texte. Le but de cette leçon est de comprendre comment chaque type de valeur fonctionne et les avantages et inconvénients de chacun.
Les valeurs de type « nom de couleur »
Les 16 premières couleurs normalisées
Il y a des années de cela, les langages de programmation ne disposaient pas de toutes les fonctionnalités d’aujourd’hui tout simplement car les infrastructures étaient beaucoup moins puissantes que de nos jours.
Ainsi, au départ, seules 16 couleurs ont été normalisées en CSS. C’était déjà un grand pas en avant pour les utilisateurs : ils n’avaient plus qu’à passer le nom (en anglais) de la couleur normalisée en valeur de la propriété CSS color afin de changer la couleur d’un élément.
Ces seize couleurs CSS sont les suivantes. Notez que j’ai déjà renseigné l’équivalent de chaque nom de couleur en notation hexadécimale dans le tableau ci-dessous. Nous reparlerons de ces notations plus tard dans cette leçon.
| Nom de la couleur | Hexadecimal | Couleur |
|---|---|---|
| Aqua | #00FFFF | |
| Black | #000000 | |
| Blue | #0000FF | |
| Fuschia | #FF00FF | |
| Gray | #808080 | |
| Green | #008000 | |
| Lime | #00FF00 | |
| Maroon | #800000 | |
| Navy | #000080 | |
| Olive | #808000 | |
| Purple | #800080 | |
| Red | #FF0000 | |
| Silver | #C0C0C0 | |
| Teal | #008080 | |
| White | #FFFFFF | |
| Yellow | #FFFF00 |
Voyons immédiatement en pratique comment utiliser ces noms de couleurs en CSS avec différents exemples utilisant color en CSS :
See the Pen Cours HTML CSS 4.5.1 by Pierre (@pierregiraud) on CodePen.
Dans l’exemple ci-dessus, vous pouvez voir que nous attribuons en CSS une couleur orange à notre titre de niveau 1 avec le code h1{color : orange}. Nous définissons également des couleurs rouge (red) et bleu (blue) pour les textes de nos éléments p1 et p2.
Les autres couleurs nommées
Avec l’évolution des performances et des langages, le support pour de nouvelles couleurs a progressivement été ajouté.
Ainsi, aujourd’hui, les navigateurs reconnaissent et supportent l’utilisation de plus de 140 noms de couleurs différents. Nous allons donc pouvoir passer chacune de ces valeurs à la propriété color pour définir une nouvelle couleur pour un texte.
Voici la liste de ces couleurs CSS (noms en anglais) ainsi que leur code hexadécimal :
| Nom de la couleur | Hexadecimal | Couleur |
|---|---|---|
| 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 | |
| DarkGrey | #A9A9A9 | |
| DarkGreen | #006400 | |
| 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 | |
| Fuchsia | #FF00FF | |
| Gainsboro | #DCDCDC | |
| GhostWhite | #F8F8FF | |
| Gold | #FFD700 | |
| GoldenRod | #DAA520 | |
| Gray | #808080 | |
| Grey | #808080 | |
| Green | #008000 | |
| GreenYellow | #ADFF2F | |
| 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 | |
| LightGrey | #D3D3D3 | |
| LightGreen | #90EE90 | |
| LightPink | #FFB6C1 | |
| LightSalmon | #FFA07A | |
| LightSeaGreen | #20B2AA | |
| LightSkyBlue | #87CEFA | |
| LightSlateGray | #778899 | |
| LightSlateGrey | #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 | #FF4500 | |
| Orchid | #DA70D6 | |
| PaleGoldenRod | #EEE8AA< | |
| PaleGreen | #98FB98 | |
| PaleTurquoise | #AFEEEE | |
| PaleVioletRed | #DB7093 | |
| PapayaWhip | #FFEFD5 | |
| PeachPuff | #FFDAB9 | |
| Peru | #CD853F | |
| Pink | #FFC0CB | |
| Plum | #DDA0DD | |
| PowderBlue | #B0E0E6 | |
| Purple | #800080 | |
| RebeccaPurple | #663399 | |
| 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 | |
| SlateGrey | #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 |
Fait intéressant ici, vous pouvez noter que :
- Fuchsia possède le même code couleur que Magenta ;
- Aqua possède le même code couleur que Cyan.
Utilisons immédiatement ces noms de couleurs CSS avec la propriété color à travers de nouveaux exemples :
See the Pen Cours HTML CSS 4.5.2 by Pierre (@pierregiraud) on CodePen.
Avantages et limitations des valeurs de type « nom de couleur »
L’utilisation des valeurs de type « nom de couleur » avec la propriété CSS color est très pratique puisqu’il suffit d’indiquer le nom de la couleur souhaitée.
Cependant, ce type de valeurs possède une limitation majeure : nous sommes limités en termes de couleurs à ces quelques 140 noms. Or, parfois, nous voudrons utiliser une couleur ou une variation de couleur différente de ces 140 disponibles pour définir une identité visuelle précise.
Dans ces cas-là, nous utiliserons alors plutôt l’un des autres types de notation, que ce soit des notations RGB, HEX, ou HSL.
En effet, chacun de ces nouveaux types de valeurs va nous permettre de créer et d’utiliser jusqu’à 16 millions de variations de couleurs afin de trouver la couleur exacte voulue en CSS. Ils vont tous reposer sur une logique similaire de mélange des couleurs rouge, vert et bleu.
Les notations de type RGB
Commençons déjà par expliquer comment fonctionnent les valeurs de type RGB et comment les utiliser avec color en CSS.
Avant tout, vous devez savoir que les lettres « RGB » sont les abréviations de « Red Green Blue » soit « Rouge Vert Bleu » en français. Effectivement, pour créer une couleur RGB, nous allons devoir préciser trois niveaux d’intensité de Rouge, de Vert, et de Bleu qui vont ensuite être mélangés pour créer la couleur finale.
Chaque niveau d’intensité qu’on va renseigner va être compris entre 0 (intensité nulle ou absence de la couleur en question) et 255 (intensité maximale ou couleur pure). En précisant une intensité de rouge de 0, par exemple, on signifie qu’on ne souhaite pas utiliser de rouge dans notre couleur finale. En précisant une intensité de 255 de rouge, en revanche, on indique qu’on souhaite utiliser beaucoup de rouge pour créer notre couleur finale.
Vous vous rappelez à l’école quand vous mélangiez différentes couleurs en peinture entre elles pour en créer une nouvelle ? Cela fonctionne également de la même manière !
Pour rappel, je vous donne une image avec les couleurs obtenues lorsqu’on mélange en quantité équivalente nos trois couleurs de base. Cela vous aidera pour comprendre la suite.
Illustrons immédiatement avec quelques exemples le fonctionnement des notations RGB en CSS.
See the Pen Cours HTML CSS 4.5.3 by Pierre (@pierregiraud) on CodePen.
Regardons ces exemples de plus près, en commençant déjà par nous intéresser à la syntaxe des notations RGB en CSS. Comme vous pouvez le voir, lorsqu’on renseigne une valeur de type RGB en valeur de la propriété CSS color, il faut le déclarer en écrivant RGB().
Ensuite, vous pouvez observer dans chaque cas 3 chiffres séparés par des virgules à l’intérieur des parenthèses. Ces trois chiffres correspondent respectivement aux niveaux d’intensité de Rouge, de Vert et de Bleu qui seront utilisés pour créer notre couleur finale.
A ce niveau, vous pouvez noter que plus un niveau d’intensité va de rapprocher de 0, plus cela va correspondre à une couleur foncée. A l’inverse, plus un niveau d’intensité va se rapprocher de 255, plus la couleur va être claire. Pour retenir cela, retenez que color : RGB(0, 0, 0) correspond à du noir tandis que color : RGB(255, 255, 255) correspond à du blanc en CSS.
Intéressons-nous maintenant de plus près aux différents cas ci-dessus. On commence avec le code CSS h1{color : RGB(255, 180, 0);}. Vous remarquez que ce code me donne une sorte de orange en résultat. Essayons de déterminer pourquoi. Pour créer ce orange, j’ai précisé une intensité maximale de rouge (255) que j’ai mélangé avec une intensité forte de vert (180) et une intensité nulle de bleu (0).
Vous devriez normalement savoir que lorsqu’on mélange du rouge et du vert en quantité égale, on obtient du jaune. Ici, nous avons mélangé le maximum de rouge avec beaucoup de vert (mais en mettant moins de vert que de rouge). Notre couleur finale va donc se trouver entre du jaune et du rouge… C’est-à-dire du orange !
Pour nos paragraphes, nous précisons la même intensité de rouge, de vert et de bleu et nos trois intensités sont relativement basses. Je vous ai dit plus haut que RGB(0, 0, 0) donnait du noir tandis que RGB(255, 255, 255) donnait du blanc. Nous allons donc ici obtenir une sorte de gris foncé.
Essayez de comprendre par vous-même les couleurs obtenues pour les textes contenus dans nos éléments strong et em, ça vous fera un bon exercice.
Bon à savoir : Vous vous rappelez lorsque je vous ai dit que le type de valeurs RGB permettait de créer plus de 16 millions de couleurs en CSS ? Comprenez-vous maintenant d’où vient ce chiffre ? Explication : nous pouvons choisir parmi 256 niveaux d’intensité de rouge, vert et bleu pour créer notre couleur finale. Oui, j’ai bien dit 256 et pas 255 car le 0 compte comme un niveau d’intensité : l’intensité nulle. Ainsi, on va pouvoir créer 256 * 256 * 256 = 16 777 216 couleurs différentes en utilisant les notations RGB avec color en CSS ! Les valeurs hexadécimales vont fonctionner sur le même principe.
Les valeurs de type hexadécimales
Les valeurs de type hexadécimale vont reposer sur le même principe que les valeurs de type RGB : nous allons à nouveau pouvoir préciser trois niveaux d’intensité de rouge, de vert et de bleu pour créer une couleur personnalisée.
La seule différence entre ces deux types de notation va être la façon dont on va compter : le mot « hexadécimal » signifie « qui fonctionne en base 16 ». Cela veut dire que le système hexadécimal utilise 16 symboles différents pour compter et représenter les chiffres.
Dans la vie de tous les jours, nous utilisons le système décimal : nous comptons en base 10. Cela signifie que nous utilisons 10 symboles pour compter : ce sont le 0, le 1, le 2, 3, 4, 5, 6, 7, 8, et le 9.
Le système hexadécimal, comme je vous l’ai dit, va utiliser non pas 10 mais 16 symboles pour compter. Ces symboles vont être : 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E et F. Comme vous pouvez le remarquer, nous comptons de la même manière en hexadécimal qu’en décimal jusqu’à 9 puis nous utilisons les lettres A B C D E F qui vont être l’équivalent des unités « 10 », « 11, », « 12 », « 13 », « 14 » et « 15 » en système décimal.
Comment représente-t-on le 16 en hexadécimal me direz-vous ? Nous allons utiliser le même principe qu’avec le système décimal, excepté que cette fois-ci nous utilisons des seizaines et non pas des dizaines. Ainsi, pour représenter le « 16 » en hexadécimal, nous utiliserons le symbole « 10 » (comprendre 1 seizaine + 0 unité).
Regardez plutôt le tableau ci-dessous pour mieux comprendre :
| Décimal | Equivalent hexadécimal |
|---|---|
| 0 (ou 00) | 0 (ou 00) |
| 1 (ou 01) | 1 (ou 01) |
| 2 (ou 02) | 2 (ou 02) |
| 9 (ou 09) | 9 (ou 09) |
| 10 | A (ou 0A) |
| 11 | B (ou 0B) |
| 16 | 10 |
| 17 | 11 |
| 25 | 19 |
| 26 | 1A |
| 32 | 20 |
Au final, le système hexadécimal n’est qu’une façon différente de compter en utilisant 16 unités de base et non pas 10 comme on en a l’habitude. Cela peut désorienter au premier abord mais c’est en fait très simple. Faites l’effort de comprendre cela pour bien comprendre l’utilisation des valeurs hexadécimales avec les couleurs en CSS !
Nous allons en effet pouvoir utiliser les notations hexadécimales pour créer une couleur avec la propriété CSS color. Les valeurs hexadécimales sont même les plus utilisées en CSS pour créer des couleurs !
Nous allons ici utiliser exactement le même principe qu’avec les valeurs RGB en précisant trois intensités de Rouge, Vert et Bleu pour créer une couleur. Là encore, chacune des trois intensités des couleurs de base va pouvoir être comprise entre 0 et 255 ou plus exactement entre 00 et FF en notation hexadécimale (FF en hexadécimal est équivalent à 255 en décimal).
Pour créer une couleur en utilisant les notations hexadécimales en CSS, nous allons donc devoir préciser trois intensités de Rouge, Vert et de Bleu entre 00 et FF à la suite. De plus, nous devrons faire précéder cette notation par un dièse (symbole #).
Prenons immédiatement quelques exemples pour illustrer cela :
See the Pen Cours HTML CSS 4.5.4 by Pierre (@pierregiraud) on CodePen.
On applique une color : #FF8800 à notre titre h1 en CSS. On utilise ici une intensité maximale de rouge (FF = 255 en décimal), moyenne de vert (88 = 136 en décimal) et minimale (00) de bleu pour créer notre couleur finale. Comme on mélange beaucoup de rouge avec un peu de vert, on obtient naturellement du orange.
Notez ici quelque chose d’intéressant : lorsqu’on souhaite utiliser deux fois la même unité pour préciser une intensité (par exemple « 88 », « BB » ou « EE », on peut utiliser une notation raccourcie en se contentant de ne préciser l’unité qu’une seule fois.
See the Pen Cours HTML CSS 4.5.5 by Pierre (@pierregiraud) on CodePen.
Ici, vous pouvez remarquer qu’il est strictement équivalent d’écrire color : #FF8800 et color : #F80.
Notez par ailleurs qu’il est strictement équivalent d’utiliser des majuscules ou des minuscules pour les lettres des valeurs hexadécimales.
Les notations de type HSL
« HSL » est l’abréviation de « Hue-Saturation-Lightning », c’est-à-dire « teinte-saturation-luminosité » en français.
Pour créer une couleur en utilisant les notations HSL, nous allons devoir renseigner trois valeurs :
- La teinte. On va devoir ici renseigner un nombre entre 0 et 360 qui représente un angle du cercle chromatique (c’est-à-dire l’arc en ciel représenté dans un cercle). Ici, vous pouvez retenir que la couleur rouge correspond à un angle de 0 (degré) ou de 360 (degrés), tandis que le vert va se situer à 120 degrés et le bleu à 240 degrés. Nous allons pouvoir préciser des valeurs décimales ici pour choisir précisément une couleur ;
- La saturation. Celle-ci va être représentée sous forme de pourcentage. 100% correspond à une saturation maximale tandis que 0% correspond à une saturation minimale ;
- La luminosité. Celle-ci va également être représentée par un pourcentage. 100% de luminosité correspond à du blanc tandis que 0% correspond à du noir.
Vous pouvez vous aider des repères suivants fournis par le W3C pour bien comprendre comment fonctionnent les couleurs HSL. Ici, le pourcentage de saturation est indiqué sur l’axe horizontal tandis que le pourcentage de luminosité est indiqué sur l’axe vertical :
See the Pen Cours HTML CSS 4.5.6 by Pierre (@pierregiraud) on CodePen.
L’opacité des éléments et des textes en CSS
Jusqu’à présent, nous n’avons pas parlé d’opacité des couleurs en CSS. Nos couleurs étaient donc par défaut complètement opaques. Le CSS nous permet cependant de préciser un niveau d’opacité (ou de transparence, comme vous préférez) pour nos différents textes ou pour nos éléments de différentes façons.
Gérer l’opacité des éléments avec la propriété opacity
Tout d’abord, on va pouvoir rendre un élément HTML plus ou moins transparent grâce à la propriété CSS opacity.
Cette propriété va accepter une valeur comprise entre 0 et 1 et qui va déterminer le niveau d’opacité d’un élément : la valeur 0 va rendre l’élément totalement transparent tandis que la valeur 1 (valeur par défaut) le rend totalement opaque.
See the Pen Cours HTML CSS 4.5.7 by Pierre (@pierregiraud) on CodePen.
Ici, j’attire cependant votre attention sur un point important : la propriété opacity ne va pas gérer la transparence d’un texte mais bien définir le niveau d’opacité d’un élément en soi.
Ainsi, si l’élément possède une couleur de fond ou des bordures, celles-ci vont également être impactées par opacity et vont donc possiblement être semi transparentes. De même, en appliquant cette propriété à un élément conteneur div, nous allons rendre le div en soi et tous les éléments qu’il contient semi-transparents (sauf si une règle contraire est précisée pour chaque élément du div bien évidemment).
Ce comportement va parfois être le comportement voulu mais ce n’est pas celui attendu dans le cas où l’on souhaite simplement gérer l’opacité des textes (et uniquement des textes) de nos éléments.
Pour faire cela, nous allons plutôt devoir utiliser des variantes des notations RGB et HSL : les notations RGBa et HSLa.
Gérer l’opacité des textes avec les notations RGBa ou HSLa
Les notations RGBa et HSLa vont accepter une valeur de plus qui va correspondre au niveau d’opacité de la couleur (le « a » est l’abréviation de « alpha channel »).
Nous allons ici à nouveau devoir préciser un chiffre compris entre 0 et 1 et indiquant le niveau d’opacité de nos textes (0 = texte transparent / 1 = texte opaque).
See the Pen Cours HTML CSS 4.5.8 by Pierre (@pierregiraud) on CodePen.
Comme vous pouvez le voir, cette fois-ci seul le niveau d’opacité de nos textes change.
Notez que les notations hexadécimales supportent également la notion de transparence. Pour indiquer un niveau d’opacité, nous allons devoir ici préciser un quatrième jeu de caractères compris entre 00 (couleur totalement transparente) et FF (couleur totalement opaque).
Cependant, je vous déconseille d’utiliser les notations hexadécimales de cette manière pour le moment car la gestion de la transparence pour ce type de valeur n’est pas encore une recommandation officielle et donc le support par les différents navigateurs n’est pas forcément assuré. Utiliser plutôt les notations RGBa ou HSLa si vous souhaitez définir des couleurs avec un niveau de transparence.
