Les couleurs en CSS.
Les couleurs CSS sont les mêmes que celles de HTML.
Les 16 couleurs fondamentales ont un nom parlant (en anglais)
qui est normalisé : elles sont reconnus par tous les navigateurs.
Pour faire référence à une couleur non nommée, vous devrez utiliser le
code hexadécimal. C'est bien sûr un peu moins parlant mais universel.
Voyez aussi notre Synthétiseur de couleurs.
Définition des couleurs en CSS.
| red |
La couleur est désignée par son nom.
Il y a 132 noms de couleurs normalisés par le W3C
(voir le nuancier ci-dessous).
Ce noms sont maintenant reconnus par tous les navigateurs.
|
| #rrvvbb |
La couleur est désignée par son code hexadécimal :
un dièse suivi de 6 digits.
Les deux premiers digits (de 00 à ff)
représentent la valeur de rouge,
les deux suivants le vert et les deux derniers le bleu.
En mélangeant dans des proportions différentes ces trois
couleurs de base, on peut obtenir toutes les couleurs.
La 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.
|
| #rvb |
La couleur est désignée par un code hexadécimal sur 3 digits.
Cette notation est une version simplifiée de la précédente,
qui offre cependant moins de nuances de couleurs.
#fff est équivalent à #ffffff.
#888 est équivalent à #888888.
|
| #rrvvbbaa |
La couleur est désignée par un code hexadécimal sur 8 digits.
Les deux derniers digits traduisent l'opacité de la couleur.
#ff0000ff est du rouge totalement opaque (non transparent).
#0000ff80 est du bleu semi-transparent.
|
| rgb(r,v,b) |
La couleur est définie par trois nombres de 0 à 255 indiquant
respectivement le taux de rouge, de vert et de bleu.
|
| rgba(r,v,b,a) |
La couleur est définie par trois nombre de 0 à 255 et un nombre
de 0 à 1.
Ce dernier paramètres (a) représente l'opacité de la couleur.
Si a=0 la couleur est totalement transparente (invisible),
si a=1 la couleur est totalement opaque.
|
| hsl(t,s,l) |
La couleur est définie par :
- t : un nombre de 0 à 360 indiquant la teinte, c'est à dire
la position de la couleur sur une roue chromatique.
L'unité
deg peut
être indiquée mais est considérée comme unité par défaut.
- s : un pourcentage de 0% à 100% indiquant la saturation.
- l : un pourcentage de 0% à 100% indiquant la luminosité.
|
| hsla(h,s,l,a) |
Identique à la notation précédente avec en plus l'opacité (a) :
un nombre de 0 à 1 indiquant l'opacité de la couleur.
Si a=0, la couleur est totalement transparente.
Si a=1, la couleur est totalement opaque.
|
| currentColor |
Désigne la couleur courante, celle du texte, définie par la
propriété color.
Si currentColor est appliquée à la propriété
color elle même, elle est équivalente à inherit.
|
| initial |
Valeur initiale. |
| inherit |
Même valeur que celle de l'élément parent. |
Couleurs nommées fondamentales.
#00FFFF
Aqua
#000000
Black
#0000FF
Blue
#FF00FF
Fuchsia
#808080
Gray
#008000
Green
#00FF00
Lime
#800000
Maroon
#000080
Navy
#808000
Olive
#800080
Purple
#FF0000
Red
#C0C0C0
Silver
#008080
Teal
#FFFFFF
White
#FFFF00
Yellow
Autres couleurs nommées.
Ces noms risquent de ne pas être reconnus par tous les navigateurs.
Le nuancier ci-dessous vous permettra de vérifier le degré de
compatibilité de votre navigateur.
#F0F8FF
AliceBlue
#FAEBD7
AntiqueWhite
#00FFFF
Aqua
#7FFFD4
AquaMarine
#F0FFFF
Azure
#F5F5DC
Beige
#FFE4C4
Bisque
#000000
Black
#FFEBCD
BlanchedAlmond
#0000FF
Blue
#8A2BE2
BlueViolet
#A52A2A
Brown
#DEB887
BurlyWood
#5F9EA0
CadetBlue
#7FFF00
Chartreuse
#D2691E
Chocolate
#FF7F50
Coral
#6495ED
CornflowerBlue
#FFF8DC
Cornsilk
#DC143C
Crimson
#00008B
DarkBlue
#008B8B
DarkCyan
#B8860B
DarkGoldenRod
#A9A9A9
DarkGray
#006400
DarkGreen
#BDB76B
DarkKhaki
#8B008B
DarkMagenta
#556B2F
DarkOliveGreen
#FF8C00
DarkOrange
#9932CC
DarkOrchid
#8B0000
DarkRed
#E9967A
DarkSalmon
#8FBC8F
DarkSeaGreen
#483D8B
DarkSlateBlue
#2F4F4F
DarkSlateGray
#00CED1
DarkTurquoise
#9400D3
DarkViolet
#FF1493
DeepPink
#00BFFF
DeepSkyBLue
#696969
DimGray
#1E90FF
DodgerBlue
#D19275
Feldspar
#B22222
FireBrick
#FFFAF0
FloralWhite
#228B22
ForestGreen
#FF00FF
Fuchsia
#DCDCDC
Gainsboro
#F8F8FF
GhostWhite
#FFD700
Gold
#DAA520
GoldenRod
#808080
Gray
#008000
Green
#ADFF2F
GreenYellow
#F0FFF0
HoneyDew
#FF69B4
HotPink
#CD5C5C
IndianRed
#4B0082
Indigo
#FFFFF0
Ivory
#F0E68C
Khaki
#E6E6FA
Lavender
#FFF0F5
LavenderBlush
#7CFC00
LawnGreen
#FFFACD
LemonChiffon
#ADD8E6
LightBlue
#F08080
LightCoral
#E0FFFF
LightCyan
#FAFAD2
LightGoldenRodYellow
#90EE90
LightGreen
#D3D3D3
LightGrey
#FFB6C1
LightPink
#FFA07A
LightSalmon
#20B2AA
LightSeaGreen
#87CEFA
LightSkyBlue
#8470FF
LightSlateBlue
#778899
LightSlateGray
#B0C4DE
LightSteelBlue
#FFFFE0
LightYellow
#00FF00
Lime
#32CD32
LimeGreen
#FAF0E6
Linen
#800000
Maroon
#66CDAA
MediumAquaMarine
#0000CD
MediumBlue
#BA55D3
MediumOrchid
#9370D8
MediumPurple
#3CB371
MediumSeaGreen
#7B68EE
MediumSlateBlue
#00FA9A
MediumSpringGreen
#48D1CC
MediumTurquoise
#C71585
MediumVioletRed
#191970
MidnightBlue
#F5FFFA
MintCream
#FFE4E1
MistyRose
#FFE4B5
Moccasin
#FFDEAD
NavajoWhite
#000080
Navy
#FDF5E6
OldLace
#808000
Olive
#6B8E23
OliveDrab
#FFA500
Orange
#FF4500
OrangeRed
#DA70D6
Orchid
#EEE8AA
PaleGoldenRod
#98FB98
PaleGreen
#AFEEEE
PaleTurquoise
#D87093
PaleVioletRed
#FFEFD5
PapayaWhip
#FFDAB9
PeachPuff
#CD853F
Peru
#FFC0CB
Pink
#DDA0DD
Plum
#B0E0E6
PowderBlue
#800080
Purple
#FF0000
Red
#BC8F8F
RosyBrown
#4169E1
RoyalBlue
#8B4513
SaddleBrown
#FA8072
Salmon
#F4A460
SandyBrown
#2E8B57
SeaGreen
#FFF5EE
SeaShell
#A0522D
Sienna
#C0C0C0
Silver
#87CEEB
SkyBlue
#6A5ACD
SlateBlue
#708090
SlateGray
#FFFAFA
Snow
#00FF7F
SpringGreen
#4682B4
SteelBlue
#D2B48C
Tan
#008080
Teal
#D8BFD8
Thistle
#FF6347
Tomato
#40E0D0
Turquoise
#D02090
VioletRed
#F5DEB3
Wheat
#FFFFFF
White
#F5F5F5
WhiteSmoke
#FFFF00
Yellow
#9ACD32
YellowGreen
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.
Ces fonctionalité est maintenant déclarée obsolète : évitez de l'utiliser.
ActiveBorder
ActiveBorder
ActiveCaption
ActiveCaption
AppWorkspace
AppWorkspace
Background
Background
ButtonFace
ButtonFace
ButtonHighlight
ButtonHighlight
ButtonText
ButtonText
CaptionText
CaptionText
GrayText
GrayText
Highlight
Highlight
HighlightText
HighlightText
InactiveBorder
InactiveBorder
InactiveCaption
InactiveCaption
InfoBackground
InfoBackground
InfoText
InfoText
Menu
Menu
MenuText
MenuText
Scrollbar
Scrollbar
ThreeDDarkShadow
ThreeDDarkShadow
ThreeDFace
ThreeDFace
ThreeDHighlight
ThreeDHighlight
ThreeDLightShadow
ThreeDLightShadow
ThreedShadow
ThreedShadow
Window
Window
WindowFrame
WindowFrame
WindowText
WindowText