<named-color>

Baseline Widely available

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis ⁨juillet 2015⁩.

Letype de données CSS<named-color> correspond au nom d'une couleur, commered,blue,black oulightseagreen. Syntaxiquement, un<named-color> est équivalent à un<ident>.

Une valeur<named-color> peut être utilisée partout où une valeur<color> est acceptée.

Syntaxe

css

color: red;color: orange;color: tan;color: rebeccapurple;color: transparent;

Valeur

Les couleurs nommées comprennent les couleurs standard, ainsi que les mots-cléstransparent etcurrentColor.

Couleurs standard

Les couleurs de base possèdent des noms standard, faciles à retenir :

Mot-clé	Valeur hexadécimale RGB	Exemple
`black`	`#000000`
`silver`	`#c0c0c0`
`gray`	`#808080`
`white`	`#ffffff`
`maroon`	`#800000`
`red`	`#ff0000`
`purple`	`#800080`
`fuchsia`	`#ff00ff`
`green`	`#008000`
`lime`	`#00ff00`
`olive`	`#808000`
`yellow`	`#ffff00`
`navy`	`#000080`
`blue`	`#0000ff`
`teal`	`#008080`
`aqua`	`#00ffff`

En plus de ces 16 couleurs, environ 150 autres couleurs possèdent un mot-clé qui leur est associé :

Mot-clé	Valeur hexadécimale RGB	Exemple
`aliceblue`	`#f0f8ff`
`antiquewhite`	`#faebd7`
`aqua`	`#00ffff`
`aquamarine`	`#7fffd4`
`azure`	`#f0ffff`
`beige`	`#f5f5dc`
`bisque`	`#ffe4c4`
`black`	`#000000`
`blanchedalmond`	`#ffebcd`
`blue`	`#0000ff`
`blueviolet`	`#8a2be2`
`brown`	`#a52a2a`
`burlywood`	`#deb887`
`cadetblue`	`#5f9ea0`
`chartreuse`	`#7fff00`
`chocolate`	`#d2691e`
`coral`	`#ff7f50`
`cornflowerblue`	`#6495ed`
`cornsilk`	`#fff8dc`
`crimson`	`#dc143c`
`cyan`	`#00ffff` (synonyme de`aqua`)
`darkblue`	`#00008b`
`darkcyan`	`#008b8b`
`darkgoldenrod`	`#b8860b`
`darkgray`	`#a9a9a9`
`darkgreen`	`#006400`
`darkgrey`	`#a9a9a9`
`darkkhaki`	`#bdb76b`
`darkmagenta`	`#8b008b`
`darkolivegreen`	`#556b2f`
`darkorange`	`#ff8c00`
`darkorchid`	`#9932cc`
`darkred`	`#8b0000`
`darksalmon`	`#e9967a`
`darkseagreen`	`#8fbc8f`
`darkslateblue`	`#483d8b`
`darkslategray`	`#2f4f4f`
`darkslategrey`	`#2f4f4f`
`darkturquoise`	`#00ced1`
`darkviolet`	`#9400d3`
`deeppink`	`#ff1493`
`deepskyblue`	`#00bfff`
`dimgray`	`#696969`
`dimgrey`	`#696969`
`dodgerblue`	`#1e90ff`
`firebrick`	`#b22222`
`floralwhite`	`#fffaf0`
`forestgreen`	`#228b22`
`fuchsia`	`#ff00ff`
`gainsboro`	`#dcdcdc`
`ghostwhite`	`#f8f8ff`
`gold`	`#ffd700`
`goldenrod`	`#daa520`
`gray`	`#808080`
`green`	`#008000`
`greenyellow`	`#adff2f`
`grey`	`#808080` (synonyme de`gray`)
`honeydew`	`#f0fff0`
`hotpink`	`#ff69b4`
`indianred`	`#cd5c5c`
`indigo`	`#4b0082`
`ivory`	`#fffff0`
`khaki`	`#f0e68c`
`lavender`	`#e6e6fa`
`lavenderblush`	`#fff0f5`
`lawngreen`	`#7cfc00`
`lemonchiffon`	`#fffacd`
`lightblue`	`#add8e6`
`lightcoral`	`#f08080`
`lightcyan`	`#e0ffff`
`lightgoldenrodyellow`	`#fafad2`
`lightgray`	`#d3d3d3`
`lightgreen`	`#90ee90`
`lightgrey`	`#d3d3d3`
`lightpink`	`#ffb6c1`
`lightsalmon`	`#ffa07a`
`lightseagreen`	`#20b2aa`
`lightskyblue`	`#87cefa`
`lightslategray`	`#778899`
`lightslategrey`	`#778899`
`lightsteelblue`	`#b0c4de`
`lightyellow`	`#ffffe0`
`lime`	`#00ff00`
`limegreen`	`#32cd32`
`linen`	`#faf0e6`
`magenta`	`#ff00ff` (synonyme de`fuchsia`)
`maroon`	`#800000`
`mediumaquamarine`	`#66cdaa`
`mediumblue`	`#0000cd`
`mediumorchid`	`#ba55d3`
`mediumpurple`	`#9370db`
`mediumseagreen`	`#3cb371`
`mediumslateblue`	`#7b68ee`
`mediumspringgreen`	`#00fa9a`
`mediumturquoise`	`#48d1cc`
`mediumvioletred`	`#c71585`
`midnightblue`	`#191970`
`mintcream`	`#f5fffa`
`mistyrose`	`#ffe4e1`
`moccasin`	`#ffe4b5`
`navajowhite`	`#ffdead`
`navy`	`#000080`
`oldlace`	`#fdf5e6`
`olive`	`#808000`
`olivedrab`	`#6b8e23`
`orange`	`#ffa500`
`orangered`	`#ff4500`
`orchid`	`#da70d6`
`palegoldenrod`	`#eee8aa`
`palegreen`	`#98fb98`
`paleturquoise`	`#afeeee`
`palevioletred`	`#db7093`
`papayawhip`	`#ffefd5`
`peachpuff`	`#ffdab9`
`peru`	`#cd853f`
`pink`	`#ffc0cb`
`plum`	`#dda0dd`
`powderblue`	`#b0e0e6`
`purple`	`#800080`
`rebeccapurple`	`#663399`
`red`	`#ff0000`
`rosybrown`	`#bc8f8f`
`royalblue`	`#4169e1`
`saddlebrown`	`#8b4513`
`salmon`	`#fa8072`
`sandybrown`	`#f4a460`
`seagreen`	`#2e8b57`
`seashell`	`#fff5ee`
`sienna`	`#a0522d`
`silver`	`#c0c0c0`
`skyblue`	`#87ceeb`
`slateblue`	`#6a5acd`
`slategray`	`#708090`
`slategrey`	`#708090`
`snow`	`#fffafa`
`springgreen`	`#00ff7f`
`steelblue`	`#4682b4`
`tan`	`#d2b48c`
`teal`	`#008080`
`thistle`	`#d8bfd8`
`tomato`	`#ff6347`
`transparent`	Voirtransparent.
`turquoise`	`#40e0d0`
`violet`	`#ee82ee`
`wheat`	`#f5deb3`
`white`	`#ffffff`
`whitesmoke`	`#f5f5f5`
`yellow`	`#ffff00`
`yellowgreen`	`#9acd32`

Au départ, dansCSS Niveau 1^(angl.), seules 16 couleurs de base étaient définies, avec l'ajout deorange dansCSS Niveau 2^(angl.). Les créateur·ice·s de sites trouvaient cette liste trop courte, et les éditeurs de navigateurs ont ajouté de nombreux noms de couleurs issus des couleurs X11. DansSVG 1^(angl.), puis dansCSS Colors Niveau 3^(angl.), ces noms ont été standardisés, formellement définis et uniformisés (certains avaient des orthographes différentes qui sont désormais des alias). On les appellemots-clés de couleur étendus,couleurs X11 oucouleurs SVG.

DansCSS Colors Niveau 4^(angl.), une couleur supplémentaire,rebeccapurple, a été ajoutée en hommage aupionnier du Web Eric Meyer^(angl.).

transparent

Le mot-clétransparent représente une couleur entièrement transparente. Cela rend l'arrière-plan derrière l'élément coloré totalement visible. Techniquement,transparent est un raccourci pourrgb(0 0 0 / 0%).

Pour éviter des comportements inattendus, par exemple dans un<gradient>, la spécification CSS actuelle indique quetransparent doit être calculé dans l'espace colorimétrique alpha-prémultiplié^(angl.). Cependant, les anciens navigateurs peuvent le traiter comme du noir avec une valeur alpha de0.

Le mot-clétransparent n'était pas une vraie couleur dans CSS Niveau 2 (Révision 1). C'était un mot-clé spécial qui pouvait être utilisé à la place d'une valeur<color> classique sur deux propriétés CSS :background etborder. Il a été ajouté essentiellement pour permettre aux développeur·euse·s d'écraser une couleur unie héritée. Avec l'arrivée des canaux alpha dans CSS Colors Niveau 3,transparent a été redéfini comme une vraie couleur. Il peut désormais être utilisé partout où une valeur<color> est acceptée.

Description

Tous les noms désignent une couleur dans l'espace colorimétrique sRGB. Bien que les noms décrivent plus ou moins leur couleur respective, ils restent essentiellement artificiels, sans logique stricte derrière les termes utilisés.

Les mots-clés de couleur représentent tous des couleurs unies, opaques, sans transparence.

Plusieurs mots-clés sont des alias les uns des autres :

aqua /cyan
fuchsia /magenta
darkgray /darkgrey
darkslategray /darkslategrey
dimgray /dimgrey
lightgray /lightgrey
lightslategray /lightslategrey
gray /grey
slategray /slategrey

Bien que de nombreux mots-clés proviennent deX11, leurs valeurs RGB peuvent différer de la couleur correspondante sur les systèmes X11, car les fabricants adaptent parfois les couleurs X11 à leur matériel spécifique.

Exemples

Utilisation des couleurs nommées

HTML

html

<div>  <div></div>  <div></div>  <div></div></div>

CSS

css

#container {  display: flex;  justify-content: space-around;  background-color: darkslateblue;  padding: 20px;}#container > div {  height: 100px;  width: 100px;  margin: 3px;  border: 2px solid black;}#one {  background-color: red;}#two {  background-color: lavender;}#three {  background-color: transparent;}