Noms des couleurs CSS : Guide de référence complet

Les couleurs sont l'âme du design web. Bien que la plupart des développeurs utilisent des codes HEX ou des valeurs RGB pour la précision, les noms de couleurs CSS offrent un moyen lisible par l'homme d'appliquer des styles rapidement. Les navigateurs modernes prennent en charge plus de 140 couleurs nommées, des plus courantes comme Red (rouge) et Blue (bleu) aux noms plus exotiques comme AliceBlue ou PapayaWhip.

Ce guide fournit une référence complète et consultable pour chaque couleur nommée en CSS, catégorisée par teinte pour vous aider à trouver la nuance parfaite pour votre projet.

1. Référence rapide : Les 16 couleurs de base

Ce sont les couleurs originales définies dans la spécification HTML 4.01 et elles sont prises en charge par tous les navigateurs et appareils.

Nom de la couleur	HEX	RGB
White (Blanc)	`#FFFFFF`	`(255, 255, 255)`
Silver (Argent)	`#C0C0C0`	`(192, 192, 192)`
Gray (Gris)	`#808080`	`(128, 128, 128)`
Black (Noir)	`#000000`	`(0, 0, 0)`
Red (Rouge)	`#FF0000`	`(255, 0, 0)`
Maroon (Marron)	`#800000`	`(128, 0, 0)`
Yellow (Jaune)	`#FFFF00`	`(255, 255, 0)`
Olive (Olive)	`#808000`	`(128, 128, 0)`
Lime (Citron vert)	`#00FF00`	`(0, 255, 0)`
Green (Vert)	`#008000`	`(0, 128, 0)`
Aqua (Aqua)	`#00FFFF`	`(0, 255, 255)`
Teal (Sarcelle)	`#008080`	`(0, 128, 128)`
Blue (Bleu)	`#0000FF`	`(0, 0, 255)`
Navy (Marine)	`#000080`	`(0, 0, 128)`
Fuchsia (Fuchsia)	`#FF00FF`	`(255, 0, 255)`
Purple (Violet)	`#800080`	`(128, 0, 128)`

2. Liste complète de plus de 140 couleurs CSS

Voici l'ensemble complet des couleurs étendues prises en charge par les navigateurs modernes (SVG 1.0/CSS3).

Couleurs Roses (Pink Colors)

Nom	HEX	RGB	Catégorie
Pink	`#FFC0CB`	`(255, 192, 203)`	Rose
LightPink	`#FFB6C1`	`(255, 182, 193)`	Rose
HotPink	`#FF69B4`	`(255, 105, 180)`	Rose
DeepPink	`#FF1493`	`(255, 20, 147)`	Rose
PaleVioletRed	`#DB7093`	`(219, 112, 147)`	Rose
MediumVioletRed	`#C71585`	`(199, 21, 133)`	Rose

Couleurs Rouges (Red Colors)

Nom	HEX	RGB	Catégorie
LightSalmon	`#FFA07A`	`(255, 160, 122)`	Rouge
Salmon	`#FA8072`	`(250, 128, 114)`	Rouge
DarkSalmon	`#E9967A`	`(233, 150, 122)`	Rouge
LightCoral	`#F08080`	`(240, 128, 128)`	Rouge
IndianRed	`#CD5C5C`	`(205, 92, 92)`	Rouge
Crimson	`#DC143C`	`(220, 20, 60)`	Rouge
FireBrick	`#B22222`	`(178, 34, 34)`	Rouge
DarkRed	`#8B0000`	`(139, 0, 0)`	Rouge
Red	`#FF0000`	`(255, 0, 0)`	Rouge

Couleurs Oranges (Orange Colors)

Nom	HEX	RGB	Catégorie
Orange	`#FFA500`	`(255, 165, 0)`	Orange
DarkOrange	`#FF8C00`	`(255, 140, 0)`	Orange
Coral	`#FF7F50`	`(255, 127, 80)`	Orange
Tomato	`#FF6347`	`(255, 99, 71)`	Orange
OrangeRed	`#FF4500`	`(255, 69, 0)`	Orange

Couleurs Jaunes (Yellow Colors)

Nom	HEX	RGB	Catégorie
Yellow	`#FFFF00`	`(255, 255, 0)`	Jaune
LightYellow	`#FFFFE0`	`(255, 255, 224)`	Jaune
LemonChiffon	`#FFFACD`	`(255, 250, 205)`	Jaune
LightGoldenRodYellow	`#FAFAD2`	`(250, 250, 210)`	Jaune
PapayaWhip	`#FFEFD5`	`(255, 239, 213)`	Jaune
Moccasin	`#FFE4B5`	`(255, 228, 181)`	Jaune
PeachPuff	`#FFDAB9`	`(255, 218, 185)`	Jaune
PaleGoldenRod	`#EEE8AA`	`(238, 232, 170)`	Jaune
Khaki	`#F0E68C`	`(240, 230, 140)`	Jaune
DarkKhaki	`#BDB76B`	`(189, 183, 107)`	Jaune
Gold	`#FFD700`	`(255, 215, 0)`	Jaune

Couleurs Marron (Brown Colors)

Nom	HEX	RGB	Catégorie
Cornsilk	`#FFF8DC`	`(255, 248, 220)`	Marron
BlanchedAlmond	`#FFEBCD`	`(255, 235, 205)`	Marron
Bisque	`#FFE4C4`	`(255, 228, 196)`	Marron
NavajoWhite	`#FFDEAD`	`(255, 222, 173)`	Marron
Wheat	`#F5DEB3`	`(245, 222, 179)`	Marron
BurlyWood	`#DEB887`	`(222, 184, 135)`	Marron
Tan	`#D2B48C`	`(210, 180, 140)`	Marron
RosyBrown	`#BC8F8F`	`(188, 143, 143)`	Marron
SandyBrown	`#F4A460`	`(244, 164, 96)`	Marron
GoldenRod	`#DAA520`	`(218, 165, 32)`	Marron
Peru	`#CD853F`	`(205, 133, 63)`	Marron
Chocolate	`#D2691E`	`(210, 105, 30)`	Marron
SaddleBrown	`#8B4513`	`(139, 69, 19)`	Marron
Sienna	`#A0522D`	`(160, 82, 45)`	Marron
Brown	`#A52A2A`	`(165, 42, 42)`	Marron
Maroon	`#800000`	`(128, 0, 0)`	Marron

Couleurs Vertes (Green Colors)

Nom	HEX	RGB	Catégorie
DarkOliveGreen	`#556B2F`	`(85, 107, 47)`	Vert
Olive	`#808000`	`(128, 128, 0)`	Vert
OliveDrab	`#6B8E23`	`(107, 142, 35)`	Vert
YellowGreen	`#9ACD32`	`(154, 205, 50)`	Vert
LimeGreen	`#32CD32`	`(50, 205, 50)`	Vert
Lime	`#00FF00`	`(0, 255, 0)`	Vert
LawnGreen	`#7CFC00`	`(124, 252, 0)`	Vert
Chartreuse	`#7FFF00"	`(127, 255, 0)`	Vert
GreenYellow	`#ADFF2F`	`(173, 255, 47)`	Vert
SpringGreen	`#00FF7F`	`(0, 255, 127)`	Vert
MediumSpringGreen	`#00FA9A`	`(0, 250, 154)`	Vert
LightGreen	`#90EE90`	`(144, 238, 144)`	Vert
PaleGreen	`#98FB98`	`(152, 251, 152)`	Vert
DarkSeaGreen	`#8FBC8F`	`(143, 188, 143)`	Vert
MediumSeaGreen	`#3CB371`	`(60, 179, 113)`	Vert
SeaGreen	`#2E8B57`	`(46, 139, 87)`	Vert
ForestGreen	`#228B22`	`(34, 139, 34)`	Vert
Green	`#008000`	`(0, 128, 0)`	Vert
DarkGreen	`#006400`	`(0, 100, 0)`	Vert

Couleurs Cyan et Sarcelle (Cyan and Teal Colors)

Nom	HEX	RGB	Catégorie
Aqua	`#00FFFF`	`(0, 255, 255)`	Cyan
Cyan	`#00FFFF`	`(0, 255, 255)`	Cyan
LightCyan	`#E0FFFF`	`(224, 255, 255)`	Cyan
PaleTurquoise	`#AFEEEE`	`(175, 238, 238)`	Cyan
Aquamarine	`#7FFFD4`	`(127, 255, 212)`	Cyan
Turquoise	`#40E0D0`	`(64, 224, 208)`	Cyan
MediumTurquoise	`#48D1CC`	`(72, 209, 204)`	Cyan
DarkTurquoise	`#00CED1`	`(0, 206, 209)`	Cyan
LightSeaGreen	`#20B2AA`	`(32, 178, 170)`	Cyan
CadetBlue	`#5F9EA0`	`(95, 158, 160)`	Cyan
DarkCyan	`#008B8B`	`(0, 139, 139)`	Cyan
Teal	`#008080`	`(0, 128, 128)`	Cyan

Couleurs Bleues (Blue Colors)

Nom	HEX	RGB	Catégorie
LightSteelBlue	`#B0C4DE`	`(176, 196, 222)`	Bleu
PowderBlue	`#B0E0E6`	`(176, 224, 230)`	Bleu
LightBlue	`#ADD8E6`	`(173, 216, 230)`	Bleu
SkyBlue	`#87CEEB`	`(135, 206, 235)`	Bleu
LightSkyBlue	`#87CEFA`	`(135, 206, 250)`	Bleu
DeepSkyBlue	`#00BFFF`	`(0, 191, 255)`	Bleu
DodgerBlue	`#1E90FF`	`(30, 144, 255)`	Bleu
CornflowerBlue	`#6495ED`	`(100, 149, 237)`	Bleu
MediumSlateBlue	`#7B68EE`	`(123, 104, 238)`	Bleu
RoyalBlue	`#4169E1`	`(65, 105, 225)`	Bleu
Blue	`#0000FF`	`(0, 0, 255)`	Bleu
MediumBlue	`#0000CD`	`(0, 0, 205)`	Bleu
DarkBlue	`#00008B`	`(0, 0, 139)`	Bleu
Navy	`#000080`	`(0, 0, 128)`	Bleu
MidnightBlue	`#191970`	`(25, 25, 112)`	Bleu

Couleurs Violettes (Purple and Violet Colors)

Nom	HEX	RGB	Catégorie
Lavender	`#E6E6FA`	`(230, 230, 250)`	Violet
Thistle	`#D8BFD8`	`(216, 191, 216)`	Violet
Plum	`#DDA0DD`	`(221, 160, 221)`	Violet
Violet	`#EE82EE`	`(238, 130, 238)`	Violet
Orchid	`#DA70D6`	`(218, 112, 214)`	Violet
Fuchsia	`#FF00FF`	`(255, 0, 255)`	Violet
Magenta	`#FF00FF`	`(255, 0, 255)`	Violet
MediumOrchid	`#BA55D3`	`(186, 85, 211)`	Violet
MediumPurple	`#9370DB`	`(147, 112, 219)`	Violet
BlueViolet	`#8A2BE2`	`(138, 43, 226)`	Violet
DarkViolet	`#9400D3`	`(148, 0, 211)`	Violet
DarkOrchid	`#9932CC`	`(153, 50, 204)`	Violet
DarkMagenta	`#8B008B`	`(139, 0, 139)`	Violet
Purple	`#800080`	`(128, 0, 128)`	Violet
Indigo	`#4B0082`	`(75, 0, 130)`	Violet
DarkSlateBlue	`#483D8B`	`(72, 61, 139)`	Violet
SlateBlue	`#6A5ACD`	`(106, 90, 205)`	Violet
RebeccaPurple	`#663399`	`(102, 51, 153)`	Violet

Couleurs Blanches (White and Off-White Colors)

Nom	HEX	RGB	Catégorie
White	`#FFFFFF`	`(255, 255, 255)`	Blanc
Snow	`#FFFAFA`	`(255, 250, 250)`	Blanc
HoneyDew	`#F0FFF0`	`(240, 255, 240)`	Blanc
MintCream	`#F5FFFA`	`(245, 255, 250)`	Blanc
Azure	`#F0FFFF`	`(240, 255, 255)`	Blanc
AliceBlue	`#F0F8FF`	`(240, 248, 255)`	Blanc
GhostWhite	`#F8F8FF`	`(248, 248, 255)`	Blanc
WhiteSmoke	`#F5F5F5`	`(245, 245, 245)`	Blanc
SeaShell	`#FFF5EE`	`(255, 245, 238)`	Blanc
Beige	`#F5F5DC`	`(245, 245, 220)`	Blanc
OldLace	`#FDF5E6`	`(253, 245, 230)`	Blanc
FloralWhite	`#FFFAF0"	`(255, 250, 240)`	Blanc
Ivory	`#FFFFF0`	`(255, 255, 240)`	Blanc
AntiqueWhite	`#FAEBD7`	`(250, 235, 215)`	Blanc
Linen	`#FAF0E6`	`(250, 240, 230)`	Blanc
MistyRose	`#FFE4E1`	`(255, 228, 225)`	Blanc
LavenderBlush	`#FFF0F5`	`(255, 240, 245)`	Blanc

Couleurs Grises et Noires (Gray and Black Colors)

Nom	HEX	RGB	Catégorie
Gainsboro	`#DCDCDC`	`(220, 220, 220)`	Gris
LightGray	`#D3D3D3`	`(211, 211, 211)`	Gris
LightGrey	`#D3D3D3`	`(211, 211, 211)`	Gris
Silver	`#C0C0C0`	`(192, 192, 192)`	Gris
DarkGray	`#A9A9A9`	`(169, 169, 169)`	Gris
DarkGrey	`#A9A9A9`	`(169, 169, 169)`	Gris
Gray	`#808080`	`(128, 128, 128)`	Gris
Grey	`#808080"	`(128, 128, 128)`	Gris
DimGray	`#696969`	`(105, 105, 105)`	Gris
DimGrey	`#696969"	`(105, 105, 105)`	Gris
LightSlateGray	`#778899`	`(119, 136, 153)`	Gris
LightSlateGrey	`#778899"	`(119, 136, 153)`	Gris
SlateGray	`#708090`	`(112, 128, 144)`	Gris
SlateGrey	`#708090"	`(112, 128, 144)`	Gris
DarkSlateGray	`#2F4F4F`	`(47, 79, 79)`	Gris
DarkSlateGrey	`#2F4F4F"	`(47, 79, 79)`	Gris
Black	`#000000`	`(0, 0, 0)`	Gris

3. Comment utiliser les noms de couleurs CSS

L'utilisation de ces noms dans votre code est simple. Ils peuvent être appliqués à n'importe quelle propriété acceptant une valeur <color>.

Propriétés CSS standard

/* Utilisation du nom pour la couleur du texte */
h1 {
  color: Crimson;
}

/* Utilisation du nom pour l'arrière-plan */
.alert {
  background-color: PapayaWhip;
  border: 1px solid OrangeRed;
}

Propriétés SVG

Les noms de couleurs CSS fonctionnent également parfaitement avec les attributs SVG :

<circle cx="50" cy="50" r="40" fill="RoyalBlue" stroke="MidnightBlue" stroke-width="2" />

Le mot-clé 'currentColor'

currentColor est une valeur spéciale qui hérite de la valeur de la propriété color de l'élément.

div {
  color: SeaGreen;
  border: 2px solid currentColor; /* La bordure sera également SeaGreen */
}

4. Questions fréquemment posées (FAQ)

Q : Les noms de couleurs CSS sont-ils sensibles à la casse ?

A : Non. Vous pouvez écrire AliceBlue, aliceblue ou même ALICEBLUE. Ils sont tous traités comme la même couleur. Cependant, le CamelCase (comme AliceBlue) est préféré par de nombreux développeurs pour la lisibilité.

Q : Quels noms de couleurs sont "Web-Safe" ?

A : Les "couleurs web-safe" sont un vestige du passé lorsque les moniteurs ne prenaient en charge que 256 couleurs. Aujourd'hui, les plus de 140 couleurs nommées en CSS sont sûres à utiliser sur n'importe quel appareil moderne.

Q : Pourquoi utiliser un nom de couleur plutôt qu'un code HEX ?

A : Les noms de couleurs sont beaucoup plus faciles à retenir et rendent votre code plus lisible. background-color: White est instantanément compréhensible, tandis que #FFFFFF nécessite un petit effort mental de traduction. Cependant, pour les couleurs de marque précises, HEX, RGB ou HSL restent les meilleurs choix.

Q : Existe-t-il des noms en double ?

A : Oui. Aqua et Cyan sont exactement les mêmes (#00FFFF), et Fuchsia et Magenta sont les mêmes (#FF00FF). De plus, de nombreuses couleurs grises ont les deux orthographes "Gray" et "Grey" (par exemple, DarkGray et DarkGrey).

Q : Comment gérer les problèmes de contraste ?

A : Lors de l'utilisation de couleurs nommées, assurez-vous toujours qu'il y a suffisamment de contraste entre le texte et l'arrière-plan. Par exemple, un texte jaune (Yellow) sur un fond blanc (White) est presque impossible à lire et ne respecte pas les normes d'accessibilité (WCAG).

Outils associés sur Tool3M

Convertisseur de couleur : Convertissez instantanément ces couleurs nommées en formats HEX, RGB, HSL ou CMYK.
Image en Base64 : Convertissez des images en chaînes Base64 pour une utilisation en CSS/HTML.

Noms des couleurs CSS : Guide de référence complet avec HEX et RGB