Les couleurs en CSS

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.

Principe de fonctionnement du système RVB
Principe de fonctionnement du système RVB

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.

Récepteurs photosensibles de l’œil humain
Récepteurs photosensibles de l’œil humain sur la rétine

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.

Principe de fonctionnement du système CMJN
Principe de fonctionnement du système CMJN

Le cercle chromatique

Le cercle chromatique est un outil permettant de représenter les couleurs.

Cercle chromatique
Cercle chromatique

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 :

  1. On prend un cercle vide.
  2. On dispose les trois couleurs primaires de manière équidistante sur le cercle.
  3. On mélange ensuite à quantité égale les couleurs primaires pour obtenir les couleurs secondaires :
    • Rouge + Bleu → Magenta
    • Bleu + Vert → Cyan
    • Vert + Rouge → Jaune
  4. 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.
  5. Pour affiner le cercle, on continue les mélanges toujours sur le même principe…

Construction du cercle chromatique
Construction du cercle chromatique

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.

Couleurs complémentaires
Couleurs complémentaires

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

IndianRed LightCoral Salmon DarkSalmon LightSalmon Crimson Red FireBrick DarkRed Pink LightPink HotPink DeepPink MediumVioletRed PaleVioletRed LightSalmon Coral Tomato OrangeRed DarkOrange Orange Gold Yellow LightYellow LemonChiffon LightGoldenrodYellow PapayaWhip Moccasin PeachPuff PaleGoldenrod Khaki DarkKhaki Lavender Thistle Plum Violet Orchid Fuchsia Magenta MediumOrchid MediumPurple RebeccaPurple BlueViolet DarkViolet DarkOrchid DarkMagenta Purple Indigo SlateBlue DarkSlateBlue MediumSlateBlue GreenYellow Chartreuse LawnGreen Lime LimeGreen PaleGreen LightGreen MediumSpringGreen SpringGreen MediumSeaGreen SeaGreen ForestGreen Green DarkGreen YellowGreen OliveDrab Olive DarkOliveGreen MediumAquamarine DarkSeaGreen LightSeaGreen DarkCyan Teal Aqua Cyan LightCyan PaleTurquoise Aquamarine Turquoise MediumTurquoise DarkTurquoise CadetBlue SteelBlue LightSteelBlue PowderBlue LightBlue SkyBlue LightSkyBlue DeepSkyBlue DodgerBlue CornflowerBlue MediumSlateBlue RoyalBlue Blue MediumBlue DarkBlue Navy MidnightBlue Cornsilk BlanchedAlmond Bisque NavajoWhite Wheat BurlyWood Tan RosyBrown SandyBrown Goldenrod DarkGoldenrod Peru Chocolate SaddleBrown Sienna Brown Maroon White Snow HoneyDew MintCream Azure AliceBlue GhostWhite WhiteSmoke SeaShell Beige OldLace FloralWhite Ivory AntiqueWhite Linen LavenderBlush MistyRose Gainsboro LightGray Silver DarkGray Gray DimGray LightSlateGray SlateGray DarkSlateGray Black

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écimal0123456789101112131415
Hexadécimal0123456789ABCDEF
Équivalences décimale et hexadécimale

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.

Ce système est également utilisé pour les plaques minéralogiques en France qui sont sous la forme AA-111-AA, ce qui donne [(23 × 23) – 2] × 999 × [(23 × 23) – 1] = 277 977 744 possibilités, en excluant les lettres aujourd’hui interdites (les I, O et U du fait de leur trop proche ressemblance avec le 1, le 0 et le V) ainsi que les séries SS et WW du bloc de gauche et la série SS du bloc de droite.

Plaque minéralogique normale et équivalent en décimale
Plaque minéralogique normale et équivalent imaginaire en décimale

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

#123456

Ces 6 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 bleu et les deux derniers à la quantité de vert.

#123456

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
Exemples de codes couleur en hexadécimal

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.

rgb(123, 123, 123)

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)
Exemples de codes couleur rgb

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

rgba(55, 66, 77, 0.8)

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.

Exemple de transparence pour un menu déroulant
Exemple de transparence pour un menu déroulant

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.

Exemple de couleur transparente pour une fenêtre modale
Exemple de couleur transparente pour une fenêtre modale

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(182, 100%, 50%)
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%)
Exemples de codes couleur hsl

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.

Angle de la couleur sur le cercle chromatique pour la teinte
Angle de la couleur sur le cercle chromatique pour la teinte

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.

Représentation de la saturation et de la teinte
Représentation de la saturation et de la teinte
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).

hsl(100,80%,70%) hsl(100,80%,60%) hsl(100,80%,80%)

Il est très facile de créer des palettes de couleurs monochromes en faisant varier la saturation d’une couleur.

hsl(182,100%,50%) hsl(182,80%,50%) hsl(182,60%,50%)
hsl(328,100%,60%) hsl(328,80%,60%) hsl(328,60%,60%)

Il est très simple également de déterminer la couleur complémentaire d’une couleur donnée en ajoutant 180° à la teinte.

hsl(30,90%,50%) hsl(210,90%,50%)
hsl(123,70%,55%) hsl(303,70%,55%)

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

hsla(182, 100%, 50%,0.5)

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 colorpicker
Exemples de colorpicker

Exemples de logiciels :

Exemples de color pickers en ligne :

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

Couleurs complémentaires
Couleurs complémentaires

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 trois couleurs
Combinaison de 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.

Combinaison de quatre couleurs
Combinaison de 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.

Paletton.com : générateur de palette
Paletton.com : générateur de palette

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.

Démonstration vérification du contraste avec Firefox
Démonstration vérification du contraste avec Firefox

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.

Démonstration vérification du contraste avec l'extension Wave
Démonstration vérification du contraste avec l’extension Wave

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

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.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.