Couleur des textes HTML avec CSS color et opacité

Dans cette nouvelle leçon, nous allons apprendre à modifier la couleur et l’opacité de nos textes grâce à la propriété 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 couleurHexadecimalCouleur
Aqua#00FFFF
Black#000000
Blue#0000FF
Fuschia#FF00FF
Gray#808080
Green#008800
Lime#00FF00
Maroon#800000
Navy#000080
Olive#808000
Purple#800080
Red#FF0000
Silver#C0C0C0
Teal#008080
White#FFFFFF
Yellow#00FFFF

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 couleurHexadecimalCouleur
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.

Le mélange des couleurs CSS

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écimalEquivalent 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)
10A (ou 0A)
11B (ou 0B)
1610
1711
2519
261A
3220

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 :

Spectre de couleur des notations HSL CSS 1

Spectre de couleur des notations HSL CSS 2

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.

Laisser un commentaire