Les couleurs sont essentielles lors de la création d’une interface web avec CSS. Ce cours vous présente les différentes manières de coder les couleurs pour les exploiter dans vos feuilles de style.
Le système RVB
Le système RVB, pour Rouge Vert Bleu (RGB, Red Green Blue en anglais) est une méthode d’encodage des couleurs qui dérive de la technologie la plus souvent employée dans le domaine du numérique. Les écrans à tube cathodique ou à cristaux liquides, les appareils photo numériques ou les scanners utilisent un système RVB basé sur le principe additif de ces trois couleurs de base.
Dans le système RVB, le mélange des trois couleurs de base et les variations de dosage de chacune des couleurs permettent ainsi de créer une multitude de couleurs. La synthèse additive se base sur l’ajout de lumière, si les trois couleurs sont absentes, nous avons du noir et à l’inverse si les trois couleurs sont au maximum, nous obtenons du blanc.
L’œil humain fonctionne également par identification de ces trois couleurs. La rétine est tapissée de bâtonnets, qui permettent une vision en noir, blanc et nuances de gris et de trois types de cônes qui permettent notamment la perception des couleurs. C’est ce que l’on appelle la vision trichromatique, c’est-à-dire basée sur trois couleurs.
Si vous avez déjà travaillé en PAO (Publication Assistée par Ordinateur) ou si vous avez tout simplement déjà acheté des cartouches pour votre imprimante, vous avez déjà entendu parler du système CMJN pour Cyan, Magenta, Jaune et Noir qui est utilisé pour l’impression. Nous avons affaire à un système inversé, il s’agit d’une synthèse soustractive. Lors d’une impression, nous partons d’une page blanche sur laquelle nous déposons des couches d’encres qui absorbent la lumière et forment les différentes couleurs. Le mélange maximal des couleurs va tendre vers le noir, sans l’atteindre. Il faut donc une cartouche noire en complément.
Le cercle chromatique
Le cercle chromatique est un outil permettant de représenter les couleurs.
Les couleurs primaires
Une couleur primaire est une couleur qui ne peut pas être obtenue par mélange d’autres couleurs. C’est une des couleurs qui au contraire est donc utilisée pour construire les autres. En fonction du système utilisé, ces couleurs primaires sont différentes :
- Écran : rouge, vert et bleu ;
- Impression : cyan, jaune et magenta ;
- Peinture : bleu, jaune et rouge.
Construction du cercle chromatique
Contrairement à ce que l’on peut imaginer, les couleurs ne sont pas disposées aléatoirement pour construire un cercle chromatique.
Pour construire ce cercle chromatique, il faut suivre les étapes suivantes :
- On prend un cercle vide.
- On dispose les trois couleurs primaires de manière équidistante sur le cercle.
- On mélange ensuite à quantité égale les couleurs primaires pour obtenir les couleurs secondaires :
- Rouge + Bleu → Magenta
- Bleu + Vert → Cyan
- Vert + Rouge → Jaune
- Sur le même principe on mélange les couleurs primaires avec les couleurs secondaires pour obtenir les couleurs tertiaires :
- Rouge + Magenta → Rose
- Bleu + Magenta → Violet
- etc.
- Pour affiner le cercle, on continue les mélanges toujours sur le même principe…
Les couleurs complémentaires
Les couleurs complémentaires sont deux couleurs qui se situent à l’opposé l’une de l’autre sur le cercle chromatique.
Voici quelques propriétés/caractéristiques des couleurs complémentaires :
- Si l’on mélange deux couleurs complémentaires, la perception de la couleur est annulée et cela produit du gris.
- La couleur complémentaire d’une couleur chaude est une couleur froide et vice versa.
- L’utilisation de couleurs complémentaires offre un fort taux de contraste.
Le codage des couleurs
Il existe actuellement cinq méthodes différentes pour utiliser des couleurs en CSS :
- Notation en langage naturel ;
- Notation en hexadécimal ;
- Notation rgb ;
- Notation rgba ;
- Notation hsl.
Le langage naturel
Le langage naturel est probablement la méthode la plus simple pour utiliser les couleurs dans du code CSS. Il s’agit de mettre tout simplement le nom de la couleur en anglais. Vous avez ainsi un peu plus de 140 possibilités.
C’est une solution très simple, mais également très limitée en termes de possibilités. Pour avoir plus de choix, il va être nécessaire de se pencher sur les autres notations.
Liste des couleurs en langage naturel
La notation hexadécimal
La notation hexadécimale est probablement la plus répandue, mais ce n’est pas forcément la plus facile à comprendre. Avant d’aborder le détail de cette notation particulière, nous allons commencer par voir qu’est-ce que l’hexadécimal.
Hexadécimal ? Qu’est-ce que c’est ?
Vous avez l’habitude de compter avec le système décimal qui est un système de numération en base 10. Cela signifie que pour sur caractère vous avez 10 possibilités : 0, 1, 2, 3, 4, 5, 6, 7, 8 et 9. Au-delà, il est nécessaire d’ajouter un second caractère : 10, 11, 12, etc. Nous avons donc, en décimal, 10n possibilités où n est le nombre de caractères. Nous avons donc sur un caractère 10 possibilités (de 0 à 9), sur deux caractères 10 x 10 = 100 possibilités (de 0 à 99), sur trois caractères 10 x 10 x 10 = 1000 possibilités (de 0 à 999), etc.
Le système hexadécimal est un système de numération en base 16. Il utilise donc pour cela 16 symboles, les chiffres arabes pour les dix premiers chiffres et les lettres A à F pour les six suivants. Essayez de voir ce système comme une autre manière de compter… Au-delà de 9 en décimal, on ajoute caractère de plus pour passer à 10. En hexadécimal, après 9, on continue avec les lettres A à F. D’ailleurs, ne voyez pas ces lettres comme telles, mais voyez-les plutôt comme des chiffres…
| Décimal | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
| Hexadécimal | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | A | B | C | D | E | F |
Cela vous parait peut-être étrange de mélanger des chiffres et des lettres pour compter, mais vous avez probablement déjà compté en utilisant autre chose que des chiffres ! C’est ce que l’on fait lorsque l’on numérote des titres par exemple… Nous pouvons donc compter en utilisant le système alphabétique qui est donc un système de numération en base 26 (base hexavigesimal). Dans ce système, le A équivaut au 0 et le Z à 26.
Vous ne devez donc pas voir le système hexadécimal comme un système énigmatique et indéchiffrable, mais bien comme un système différent pour compter offrant plus de possibilités de permutation par caractère que le système décimal. Le système hexadécimal est très couramment utilisé en informatique car en plus des possibilités de permutation, il sert de compromis entre le code binaire (0 ou 1, une base 2) des machines (puisque 16 = 24) et une base de numération pratique pour les développeurs.
Le codage des couleurs en hexadécimal
Maintenant que nous savons ce qu’est l’hexadécimal, nous pouvons nous pencher sur la question du codage des couleurs en hexadécimal. Les codes couleur hexadécimaux se présentent sous la forme de 6 chiffres précédés du caractère # (dièse et pas hashtag).
Ces six chiffres sont plutôt trois séries de deux chiffres. Chaque série permettant de coder une des trois couleurs primaires, le rouge, le vert et le bleu. Les deux premiers chiffres correspondent donc à la quantité de rouge, les deux du milieu à la quantité de vert et les deux derniers à la quantité de bleu.
Chaque couleur étant codée sur deux caractères en hexadécimal, il y a donc 16 x 16 = 256 possibilités de dosage du rouge, 256 possibilités pour le bleu et 256 possibilités pour le vert. Ainsi nous avons en codage hexadécimal 256 x 256 x 256 = 16 777 216 possibilités.
Le code #FF0000 correspond à du rouge. La dose de rouge, définie par les deux premiers caractères, est à sa valeur maximale et les deux autres couleurs sont à 0. Sur le même principe, #00FF00 donne du vert et #0000FF du bleu.
La valeur la plus faible #000000 correspond à l’absence totale de couleur (ou de lumière), le mode RVB est une synthèse additive, cela correspond donc au noir. À l’inverse, la valeur la plus élevée est #FFFFFF correspond au mélange des trois couleurs en quantité maximale et donc du blanc.
Si les trois couleurs primaires ont une valeur identique, nous aurons toujours affaire à du gris, puisqu’aucune des trois couleurs ne domine. Ainsi #333333, #CCCCCC ou #EBEBEB sont trois gris allant du plus foncé au plus clair.
| #FF0000 | |
| #00FF00 | |
| #0000FF | |
| #000000 | |
| #FFFFFF | |
| #333333 | |
| #CCCCCC | |
| #EBEBEB | |
| #EF12AC | |
| #EDD602 |
Voici donc un exemple d’utilisation de cette notation hexadécimale dans du code CSS :
.exemple {
color: #edd602 ;
background-color: #efefef ;
}La notation rgb
La notation rgb fonctionne sur le même principe de dosage des trois couleurs primaires. Cette notation, appelée notation fonctionnelle, est introduite par une fonction suivie de trois valeurs : rgb(123, 123, 123). La première valeur permet de doser la quantité de rouge, la seconde la quantité de vert et la dernière, la quantité de bleu.
Les trois valeurs peuvent être exprimées en décimal avec une valeur de 0 à 255 ou en pourcentage de 0% à 100%. Vous remarquerez que la notation décimale offre donc 256 possibilités pour chaque couleur, nous avons donc le même nombre de possibilités que la notation hexadécimale.
| rgb(255, 0, 0) | |
| rgb(0, 255, 0) | |
| rgb(0, 0, 255) | |
| rgb(0, 0, 0) | |
| rgb(255, 255, 255) | |
| rgb(51, 51, 51) | |
| rgb(204, 204, 204) | |
| rgb(235, 235, 235) | |
| rgb(239, 18, 172) | |
| rgb(237, 214, 2) |
Voici donc un exemple d’utilisation de la notation rgb dans du code CSS :
.exemple {
color: rgb(237, 214, 2) ;
background-color: rgb(239, 239, 239) ;
}L’avantage de cette notation est sa lisibilité. L’inconvénient est sa lourdeur en termes de rédaction. Mais vous pouvez utiliser la solution que vous préférez.
La notation rgba
La notation rgba est identique à la notation rgb mais avec un paramètre de plus. Le a de rgba correspond à l’alpha, c’est-à-dire l’opacité de la couleur. Cette valeur est comprise entre 0 et 1 (notation anglo-saxonne pour les décimales avec un point à la place de la virgule).
Dans l’exemple ci-dessus, l’opacité est réglée à 0.8. Cela signifie que la couleur est opaque à 80% et donc qu’elle est transparente à 20%.
Vous ne devez pas utiliser ce genre de notation si vous n’avez pas de « chevauchement » d’éléments.
Dans l’exemple ci-dessous, la couleur d’arrière-plan du menu déroulant est opaque à 90%. Le texte de la page est donc visible par transparence derrière le menu.
Voici un deuxième exemple d’utilisation d’une couleur transparente pour la création d’une fenêtre modale ( live demo). Pour focaliser l’attention de l’internaute sur un message, un masque semi-transparent est placé entre la fenêtre du message et le contenu de la page.
La notation hsl
La dernière notation possible est la notation HSL pour Teinte (H) Saturation (S) et Luminosité (L). Il s’agit d’une autre manière de représenter les couleurs.
| hsl(0, 100%, 50%) | |
| hsl(120, 100%, 50%) | |
| hsl(240, 100%, 50%) | |
| hsl(0, 0%, 0%) | |
| hsl(0, 0%, 100%) | |
| hsl(180, 0%, 20%) | |
| hsl(0, 0%, 20%) | |
| hsl(0, 0%, 92%) | |
| hsl(318, 87%, 50%) | |
| hsl(54, 98%, 47%) |
Voici donc un exemple d’utilisation de la notation hsl dans du code CSS :
.exemple {
color: hsl(54, 98%, 47%);
background-color: hsl(0, 0%, 94%) ;
}Les trois paramètres de hsl
La teinte correspond à l’angle de la position de la couleur sur le cercle chromatique.
La saturation est la distance (exprimée en pourcentage) depuis une couleur achromatique (niveau de gris) et la luminosité correspond à la position (exprimée en pourcentage) de la couleur entre le noir et le blanc.
Source : Hcl-hcv_models.svg: Jacob RusHSL_color_solid_dblcone.png: SharkDderivative work: SharkD Talk [CC BY-SA 3.0 (https://creativecommons.org/licenses/by-sa/3.0)]
Avantages de hsl
Les couleurs sont beaucoup plus simples à manipuler qu’avec les autres systèmes d’encodage.
La gestion des nuances (tints) et des ombres (shades) se fait simplement en gérant la luminosité des couleurs. Dans la palette de couleurs ci-dessous, nous avons une couleur de base (au centre) à partir de laquelle nous déterminons une couleur 10% plus foncée (à gauche) et 10% plus claire (à droite).
Il est très facile de créer des palettes de couleurs monochromes en faisant varier la saturation d’une couleur.
Il est très simple également de déterminer la couleur complémentaire d’une couleur donnée en ajoutant 180° à la teinte.
Comme rgb, hsl permet de gérer l’alpha (l’opacité) d’une couleur avec la fonction hsla et un quatrième paramètre. Sa compatibilité est encore limitée pour certains navigateurs. par exemple, à la date où ce texte est écrit, Microsoft Edge ne supporte pas hsla ( https://caniuse.com/#feat=mdn-css_properties_color_hsl_function_accepts_alpha).
Inconvénients de hsl
Le modèle hsl de Photoshop et de Gimp n’est pas tout à fait le même que celui de CSS. Les couleurs ne coïncident donc pas complétement.
Il est donc nécessaire d’utiliser des convertisseurs RVB vers HSL pour résoudre le problème : https://web-color.aliasdmc.fr/convertisseur-couleur-rgb-hsl-hexa-predefini.php#bloc-resultat.
Comment trouver les codes des couleurs ?
Il existe de nombreux logiciels permettant de trouver les codes des couleurs, ces logiciels s’appellent des color pickers. Ils peuvent être autonomes, en ligne ou encore intégrés à d’autres logiciels comme des logiciels de retouche photo comme Gimp ou Photoshop. Il suffit de sélectionner la couleur désirée dans un cercle chromatique et le logiciel indique les codes couleurs correspondants.
Exemples de logiciels :
- ColorTagGen (Mac) : https://itunes.apple.com/fr/app/color-tag-gen/id446932394?mt=12
- ColorPic (windows) : http://www.iconico.com/colorpic/
- ColorZilla (plugin Firefox) : https://addons.mozilla.org/fr/firefox/addon/colorzilla/
Exemples de color pickers en ligne :
- Code couleur : http://www.code-couleur.com
- Google : https://www.google.com/search?q=color+picker
- Mozilla : https://developer.mozilla.org/fr/docs/Web/CSS/Couleurs_CSS/S%C3%A9lecteur_de_couleurs
Combinaison des couleurs
Lorsque l’on souhaite créer une palette de couleurs pour un site web (ou pour un document), il existe plusieurs règles théoriques de combinaison des couleurs.
Combinaison par nuances
Il est possible de travailler par nuances, c’est-à-dire que l’on détermine une couleur de base et l’on va ensuite choisir une couleur plus claire et une couleur plus foncée.
Combinaison par couleurs complémentaires
Dans ce cas-là, on utilise deux couleurs complémentaires pour obtenir un taux de contraste élevé.
Combinaison de trois couleurs
Pour déterminer les trois couleurs, nous pouvons dessiner un triangle dans le cercle chromatique et le faire tourner pour le faire pointer vers trois couleurs.
Combinaison de quatre couleurs
Cette fois-ci nous dessinons un carré dans le cercle et nous le faisons tourner afin que les angles pointent vers quatre couleurs.
Logiciels pour la création des palettes
Nous venons de voir la théorie, mais nous n’allons pas nous amuser à dessiner des formes dans un cercle chromatique lorsque nous souhaitons créer une palette de couleurs. Nous allons plutôt utiliser des outils dont certains vont nous permettre d’appliquer les règles de combinaison.
Le site paletton.com permet d’appliquer les principes que nous venons de voir. Il suffit de choisir le type de combinaison, de sélectionner une couleur et d’ajuster les différents paramètres.
Il existe de nombreux logiciels/site web qui permettent de générer sa palette de couleurs. À vous de choisir celui qui vous convient :
Contraste des couleurs
Dans un souci d’accessibilité, il est important d’avoir un contraste suffisamment important entre la couleur du texte et de son l’arrière-plan.
Le W3C (World Wide Web Consortium) a défini une formule qui permet de calculer les différences de luminosité et de tonalité entre les couleurs : http://www.w3.org/TR/WCAG20/#contrast-ratiodef
La formule est la suivante (L1 + 0.05) / (L2 + 0.05) sachant que :
- L1 est la luminosité relative de la couleur la plus claire ;
- L2 est la luminosité relative de la couleur la plus foncée ;
- Sachant que le ratio obtenu doit être idéalement supérieur à 4,5 : 1 ou 4,5 pour 1 ou 4,5.
Pour vérifier le niveau de contraste, il existe des outils qui vont calculer le ratio comme http://juicystudio.com/services/luminositycontrastratio.php.
Mais si vous souhaitez faire la vérification pour une page web existante, il sera plus simple d’utiliser les outils d’accessibilité fournis avec les outils développeurs de la plupart des navigateurs. Dans l’animation ci-dessous, vous voyez que le premier texte vérifié à un taux de contraste de 2.81 ce qui est trop faible alors que le second texte a un taux de contraste de 7,46.
L’extension pour Firefox, Wave accessibility est également très pratique pour effectuer ces vérifications : https://addons.mozilla.org/fr/firefox/addon/wave-accessibility-tool/. Elle permet de vérifier toute la page et de vous dresser un diagnostic complet et clair en un clic.
Sauf mention contraire*, l'article Les couleurs en CSS et son contenu par Julien Crego sont mis à disposition selon les termes de la licence Creative Commons
Attribution - Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International
Cette licence vous permet de remixer, arranger, et adapter cette œuvre à des fins non commerciales tant que vous créditez la source en citant le nom des auteurs et que les nouvelles œuvres sont diffusées selon les mêmes conditions.
* Cette notice est intégrée automatiquement à la fin de chaque article de ce site.