Dénomination et codes des couleurs en CSS
Les couleurs CSS sont les mêmes que celles de HTML mais la syntaxe pour désigner une couleur est plus diversifiée : CSS reconnait en effet les codes hexadécimaux, la décomposition RGB, la décomposition HSL et surtout les couleurs nommées.
Table des matières.
- Syntaxes pour spécifier une couleur
- Liste et nuancier des couleurs nommées
- Les couleurs systèmes ✗
- Voyez aussi notre Synthétiseur de couleurs.
Espace de couleurs.
CSS utilise par défaut l'espace sRGB
qui est le plus
facile à restituer, même sur du matériel ancien. Il est cependant possible de choisir un autre espace de
couleurs avec la directive @color-profile
.
Codification des couleurs.
lightblue
Le nom d'une couleur. Il y a 132 noms de couleurs normalisés par le W3C (voir le nuancier ci-dessous). Le nom ne doit pas être entre guillemets, ni entre apostrophes ; il n'est pas sensible à la casse. Ces noms sont maintenant reconnus par tous les navigateurs.
transparent
La couleur totalement transparente, donc invisible. Équivalent à
#0000
.currentcolor
Ce terme désigne la couleur courante, celle du texte, définie par la propriété
color
.
Il peut être utile pour définir la couleur d'autre chose que le texte (par exemple une bordure) lorsque cette dernière a été modifiée au préalable et que l'on souhaite revenir à la même couleur que le texte.#rrggbb
Le code hexadécimal de la couleur sur 6 digits, précédés d'un dièse (
#
). Les deux premiers digits (rr
) représentent la valeur de rouge, les deux suivants le vert (gg
) et les deux derniers le bleu (bb
).
Ces trois valeurs peuvent évoluer de00
àff
. En mélangeant dans des proportions différentes ces trois couleurs de base, on peut obtenir n'importe laquelle des couleurs.
Cette notation hexadécimale est parfaitement reconnue par tous les navigateurs. Malheureusement, les codes ne sont pas très faciles à lire. Pour vous faciliter la tâche, vous pouvez vous reporter au nuancier ci-dessous.#rgb
Le code hexadécimal de la couleur sur 3 digits, précédés d'un dièse (
#
). Cette notation est une version simplifiée de la précédente, qui offre cependant moins de nuances de couleurs puisqu'on attribue un seul digit à chacune des couleurs.
#f00
est équivalent à#ff0000
.
#0a0
est équivalent à#00aa00
.#rrggbbaa
Le code hexadécimal de la couleur sur 8 digits, précédés d'un dièse (
#
). Les deux derniers digits (aa
) traduisent l'opacité de la couleur,00
correspondant à une couleur totalement transparente (donc invisible) etff
une couleur totalement opaque.
#ff0000ff
est du rouge totalement opaque (non transparent).
#0000ff80
est du bleu semi-transparent.#rgba
Variante de la notation précédente mais en n'affectant qu'un seul digit à chacune des composantes.
0f0f
est un vert totalement opaque.
00f8
est un bleu semi-transparent.rgb(r,g,b) rgba(r,g,b,a) hsl(h,s,l) hsla(h,s,l,a) hwb(h,w,b) ⚠ hwba(h,w,b,a) ⚠
Toutes ces fonctions définissent une couleur à partir de 3 composantes, et éventuellement, d'un quatrième qui est la transparence, mais chacune dans un référentiel différent.
Les deux premières,rgb()
etrgba()
, utilisent le référentiel bien connu rouge, vert, bleu.
hsl()
ethsla()
travaillent dans le référentiel Teinte, Luminosité, Saturation.
hwb()
ethwb()
, encore peu connues, construisent une couleur à partir d'une teinte, et en ajoutant une dose de blanc (w
) et de noir (b
).Voici une présentation rapide des paramètres nécessaires à ces fonctions :
r
,g
etb
correspondent aux couleurs rouge, verte et bleue. Ce sont trois nombres de 0 à 255.a
est le taux de transparence : un pourcentage de 0 à 100%.h
est la teinte de la couleur souhaitée. C'est un nombre de 0 à 360 suivi d'une des unités angulaires en CSS. Exemple :214deg
.s
est la saturation de la couleur : un pourcentage de 0% à 100%.l
est la luminosité de la couleur : un pourcentage de 0% à 100%.w
est le taux de blanc : un pourcentage de 0% à 100%.b
est le taux de noir : un pourcentage de 0% à 100%.
Reportez-vous à la description de ces fonctions pour des explications plus complètes :
rgb()
,rgba()
,hsl()
,hsla()
,hwb()
, ethwba()
.
Voici toutes les syntaxes pour désigner une couleur.
Nuancier : toutes les couleurs nommées.
Ces noms de couleur sont maintenant standardisés : tous les navigateurs devraient les reconnaître.
Trier les couleurs par :
AliceBlue
AntiqueWhite
Aqua
AquaMarine
Azure
Beige
Bisque
Black
BlanchedAlmond
Blue
BlueViolet
Brown
BurlyWood
CadetBlue
Chartreuse
Chocolate
Coral
CornflowerBlue
Cornsilk
Crimson
DarkBlue
DarkCyan
DarkGoldenRod
DarkGray
DarkGreen
DarkKhaki
DarkMagenta
DarkOliveGreen
DarkOrange
DarkOrchid
DarkRed
DarkSalmon
DarkSeaGreen
DarkSlateBlue
DarkSlateGray
DarkTurquoise
DarkViolet
DeepPink
DeepSkyBLue
DimGray
DodgerBlue
Feldspar
FireBrick
FloralWhite
ForestGreen
Fuchsia
Gainsboro
GhostWhite
Gold
GoldenRod
Gray
Green
GreenYellow
HoneyDew
HotPink
IndianRed
Indigo
Ivory
Khaki
Lavender
LavenderBlush
LawnGreen
LemonChiffon
LightBlue
LightCoral
LightCyan
LightGoldenRodYellow
LightGreen
LightGrey
LightPink
LightSalmon
LightSeaGreen
LightSkyBlue
LightSlateBlue
LightSlateGray
LightSteelBlue
LightYellow
Lime
LimeGreen
Linen
Maroon
MediumAquaMarine
MediumBlue
MediumOrchid
MediumPurple
MediumSeaGreen
MediumSlateBlue
MediumSpringGreen
MediumTurquoise
MediumVioletRed
MidnightBlue
MintCream
MistyRose
Moccasin
NavajoWhite
Navy
OldLace
Olive
OliveDrab
Orange
OrangeRed
Orchid
PaleGoldenRod
PaleGreen
PaleTurquoise
PaleVioletRed
PapayaWhip
PeachPuff
Peru
Pink
Plum
PowderBlue
Purple
Red
RosyBrown
RoyalBlue
SaddleBrown
Salmon
SandyBrown
SeaGreen
SeaShell
Sienna
Silver
SkyBlue
SlateBlue
SlateGray
Snow
SpringGreen
SteelBlue
Tan
Thistle
Teal
Tomato
Turquoise
VioletRed
Wheat
White
WhiteSmoke
Yellow
YellowGreen
Remarque : plusieurs appellations existent parfois pour une même couleur :
Et tous les dérivés
Noms obsolètes ou mal reconnus. ✗
Couleurs système. ✗
Ces noms de couleurs étaient initialement disponibles pour faciliter l'intégration d'une page dans la charte du système d'exploitation. Cette fonctionnalité est maintenant déclarée obsolète : évitez de l'utiliser.