Un site sans couleur, personne n'en veut. Mais l'écrire correctement en CSS a longtemps semé la confusion : le langage accepte plusieurs syntaxes différentes pour désigner exactement la même teinte, et elles ne se valent pas selon ce que vous voulez en faire.
Ce terme fait le tour des formats disponibles, des propriétés où une couleur peut s'appliquer, et du piège le plus fréquent : confondre une couleur pleinement opaque avec une couleur transparente.
Définition
En CSS, une couleur n'a pas de propriété qui lui soit réservée : c'est une valeur qu'on transmet à toute propriété qui en accepte une, par exemple color pour le texte, background-color pour un fond, ou border-color pour un contour. Le langage propose plusieurs syntaxes pour écrire la même couleur, et aucune n'est meilleure dans l'absolu : elles répondent simplement à des besoins différents.
Les formats disponibles
Un mot-clé (red, tomato, rebeccapurple) est le plus lisible, mais il ne couvre que les 148 noms fixés par la spécification. Le format hexadécimal (#ff6600) est le plus compact, et c'est celui que renvoie la plupart des logiciels de design. Les fonctions rgb() et hsl() décrivent une couleur par ses composantes plutôt que par un code opaque, ce qui les rend plus faciles à ajuster à la main. Une fonction plus récente, oklch(), corrige un défaut des deux précédentes : elle représente les variations de luminosité de façon plus régulière pour l'œil humain, ce qui évite qu'une teinte paraisse soudain beaucoup plus claire ou plus sombre qu'une autre alors que leurs chiffres semblaient proches.
.bouton-principal {
color: white;
background-color: #ff6600;
}
.bouton-principal:hover {
background-color: rgb(230 90 0);
}
.carte {
background-color: hsl(24 100% 50%);
border: 1px solid oklch(70% 0.15 40);
}Où une couleur peut s'appliquer
La couleur n'est pas réservée au texte ou au fond. Elle apparaît dans le contour d'un élément, dans une ombre, dans un dégradé, ou encore dans le contour de focus affiché au clavier. Toute propriété dont la documentation mentionne une valeur de type <color> accepte n'importe lequel des formats présentés plus haut, y compris en les mélangeant d'une propriété à l'autre dans la même feuille de style.
| Format | Exemple | Quand l'utiliser |
|---|---|---|
| Mot-clé | tomato | Prototypage rapide, couleurs neutres |
| Hexadécimal | #ff6600 | Couleur copiée depuis une maquette |
rgb() | rgb(255 102 0) | Composantes lisibles, avec transparence possible |
hsl() | hsl(24 100% 50%) | Ajuster une teinte à la main (plus clair, plus sombre) |
oklch() | oklch(70% 0.2 40) | Palette cohérente perceptuellement |
La transparence, un cas à part
Les mots-clés et le format hexadécimal à six caractères ne permettent aucune transparence : la couleur est pleinement opaque ou elle ne l'est pas. Pour une couleur partiellement transparente, il faut un quatrième canal, appelé canal alpha. C'est exactement le rôle de rgba() et hsla(), qui ajoute cette information sans toucher au reste de la mise en page.
#ff660080) pour inclure la transparence, mais elle reste moins lisible qu'un rgb() à quatre valeurs : réservez-la aux couleurs déjà générées automatiquement par un outil.Bonnes pratiques
Écrire la même couleur en toutes lettres à quinze endroits d'une feuille de style est la première source d'incohérence visuelle : un bouton légèrement plus orange qu'un autre, sans que personne ne l'ait décidé. La pratique courante consiste à centraliser chaque couleur dans une Variable CSS, puis à ne plus jamais écrire de valeur littérale dans les composants eux-mêmes. Un changement de charte graphique devient alors une modification à un seul endroit plutôt qu'une chasse au texte dans tout le projet. Notre formation HTML et CSS met en place ce système de variables de couleur dès les premiers projets, pour prendre l'habitude avant qu'un site ne devienne trop grand pour s'en passer.
Questions fréquentes
#fff fonctionne-t-elle ?Parce que chaque caractère y est automatiquement doublé : #fff équivaut exactement à #ffffff, et #039 équivaut à #003399. Cette abréviation ne fonctionne que lorsque les deux chiffres de chaque composante sont identiques, ce qui n'est pas toujours le cas pour une couleur arbitraire.
hsl() à rgb() ?Cela dépend de l'origine de la couleur. Si elle vient d'une maquette qui donne des valeurs rouge, vert, bleu, rgb() évite une conversion. Si vous devez ajuster une teinte à la main, par exemple assombrir une couleur au survol, hsl() est plus intuitif : il suffit de baisser le troisième nombre, la luminosité, sans recalculer trois composantes en même temps.
Oui, sans la répéter, grâce à un mot-clé spécial appelé currentColor. Il reprend automatiquement la valeur calculée de la propriété color de l'élément, ce qui évite de synchroniser deux valeurs à la main quand l'une des deux change.