Aller au contenu

Noms de couleurs HTML et CSS

Toutes les couleurs nommées que comprend n'importe quel navigateur, comme tomato ou rebeccapurple, avec leur code HEX, RGB, HSL et OKLCH prêts à copier.

Copier comme

Les 148 couleurs nommées de CSS et HTML

Elles fonctionnent dans n'importe quel navigateur en écrivant leur nom, par exemple color: tomato;. Elles ne sont pas sensibles à la casse.

Rouges10

Voir les détails

  • IndianRed

    #CD5C5C

  • LightCoral

    #F08080

  • Salmon

    #FA8072

  • DarkSalmon

    #E9967A

  • LightSalmon

    #FFA07A

  • Crimson

    #DC143C

  • Red

    #FF0000

  • FireBrick

    #B22222

  • DarkRed

    #8B0000

  • Maroon

    #800000

Oranges5

Voir les détails

  • Coral

    #FF7F50

  • Tomato

    #FF6347

  • OrangeRed

    #FF4500

  • DarkOrange

    #FF8C00

  • Orange

    #FFA500

Jaunes11

Voir les détails

  • Gold

    #FFD700

  • Yellow

    #FFFF00

  • LightYellow

    #FFFFE0

  • LemonChiffon

    #FFFACD

  • LightGoldenrodYellow

    #FAFAD2

  • PapayaWhip

    #FFEFD5

  • Moccasin

    #FFE4B5

  • PeachPuff

    #FFDAB9

  • PaleGoldenrod

    #EEE8AA

  • Khaki

    #F0E68C

  • DarkKhaki

    #BDB76B

Verts23

Voir les détails

  • GreenYellow

    #ADFF2F

  • Chartreuse

    #7FFF00

  • LawnGreen

    #7CFC00

  • Lime

    #00FF00

  • LimeGreen

    #32CD32

  • PaleGreen

    #98FB98

  • LightGreen

    #90EE90

  • MediumSpringGreen

    #00FA9A

  • SpringGreen

    #00FF7F

  • MediumSeaGreen

    #3CB371

  • SeaGreen

    #2E8B57

  • ForestGreen

    #228B22

  • Green

    #008000

  • DarkGreen

    #006400

  • YellowGreen

    #9ACD32

  • OliveDrab

    #6B8E23

  • Olive

    #808000

  • DarkOliveGreen

    #556B2F

  • MediumAquamarine

    #66CDAA

  • DarkSeaGreen

    #8FBC8F

  • LightSeaGreen

    #20B2AA

  • DarkCyan

    #008B8B

  • Teal

    #008080

Cyans8

Voir les détails

  • Aqua

    #00FFFF

  • Cyan

    #00FFFF

  • LightCyan

    #E0FFFF

  • PaleTurquoise

    #AFEEEE

  • Aquamarine

    #7FFFD4

  • Turquoise

    #40E0D0

  • MediumTurquoise

    #48D1CC

  • DarkTurquoise

    #00CED1

Bleus17

Voir les détails

  • CadetBlue

    #5F9EA0

  • SteelBlue

    #4682B4

  • LightSteelBlue

    #B0C4DE

  • PowderBlue

    #B0E0E6

  • LightBlue

    #ADD8E6

  • SkyBlue

    #87CEEB

  • LightSkyBlue

    #87CEFA

  • DeepSkyBlue

    #00BFFF

  • DodgerBlue

    #1E90FF

  • CornflowerBlue

    #6495ED

  • MediumSlateBlue

    #7B68EE

  • RoyalBlue

    #4169E1

  • Blue

    #0000FF

  • MediumBlue

    #0000CD

  • DarkBlue

    #00008B

  • Navy

    #000080

  • MidnightBlue

    #191970

Violets18

Voir les détails

  • Lavender

    #E6E6FA

  • Thistle

    #D8BFD8

  • Plum

    #DDA0DD

  • Violet

    #EE82EE

  • Orchid

    #DA70D6

  • Fuchsia

    #FF00FF

  • Magenta

    #FF00FF

  • MediumOrchid

    #BA55D3

  • MediumPurple

    #9370DB

  • RebeccaPurple

    #663399

  • BlueViolet

    #8A2BE2

  • DarkViolet

    #9400D3

  • DarkOrchid

    #9932CC

  • DarkMagenta

    #8B008B

  • Purple

    #800080

  • Indigo

    #4B0082

  • SlateBlue

    #6A5ACD

  • DarkSlateBlue

    #483D8B

Roses6

Voir les détails

  • Pink

    #FFC0CB

  • LightPink

    #FFB6C1

  • HotPink

    #FF69B4

  • DeepPink

    #FF1493

  • MediumVioletRed

    #C71585

  • PaleVioletRed

    #DB7093

Marrons16

Voir les détails

  • Cornsilk

    #FFF8DC

  • BlanchedAlmond

    #FFEBCD

  • Bisque

    #FFE4C4

  • NavajoWhite

    #FFDEAD

  • Wheat

    #F5DEB3

  • BurlyWood

    #DEB887

  • Tan

    #D2B48C

  • RosyBrown

    #BC8F8F

  • SandyBrown

    #F4A460

  • Goldenrod

    #DAA520

  • DarkGoldenrod

    #B8860B

  • Peru

    #CD853F

  • Chocolate

    #D2691E

  • SaddleBrown

    #8B4513

  • Sienna

    #A0522D

  • Brown

    #A52A2A

Blancs17

Voir les détails

  • White

    #FFFFFF

  • Snow

    #FFFAFA

  • HoneyDew

    #F0FFF0

  • MintCream

    #F5FFFA

  • Azure

    #F0FFFF

  • AliceBlue

    #F0F8FF

  • GhostWhite

    #F8F8FF

  • WhiteSmoke

    #F5F5F5

  • Seashell

    #FFF5EE

  • Beige

    #F5F5DC

  • OldLace

    #FDF5E6

  • FloralWhite

    #FFFAF0

  • Ivory

    #FFFFF0

  • AntiqueWhite

    #FAEBD7

  • Linen

    #FAF0E6

  • LavenderBlush

    #FFF0F5

  • MistyRose

    #FFE4E1

Gris17

Voir les détails

  • Gainsboro

    #DCDCDC

  • LightGray

    #D3D3D3

  • LightGrey

    #D3D3D3

  • Silver

    #C0C0C0

  • DarkGray

    #A9A9A9

  • DarkGrey

    #A9A9A9

  • Gray

    #808080

  • Grey

    #808080

  • DimGray

    #696969

  • DimGrey

    #696969

  • LightSlateGray

    #778899

  • LightSlateGrey

    #778899

  • SlateGray

    #708090

  • SlateGrey

    #708090

  • DarkSlateGray

    #2F4F4F

  • DarkSlateGrey

    #2F4F4F

  • Black

    #000000

Que sont les noms de couleurs CSS

CSS reconnaît 148 noms de couleurs, comme tomato, cornflowerblue ou rebeccapurple. Chacun correspond à un code HEX fixe et fonctionne de la même façon dans tous les navigateurs, sans rien définir d'autre.

Ils sont pratiques pour les prototypes, les exemples et les couleurs ponctuelles, car ils se lisent mieux qu'un code. Pour un design system aux nuances exactes et cohérentes, mieux vaut toujours travailler en HEX, RGB ou OKLCH.

Curiosités des noms de couleurs CSS

Derrière la liste, il y a un peu d'histoire et quelques bizarreries bonnes à connaître.

  • Au départ, il n'y en avait que 16

    HTML 4 ne définissait que 16 noms, comme navy, teal ou olive. Les autres sont arrivés ensuite, hérités des couleurs du système graphique X11.

  • 148 noms, 139 couleurs

    Neuf paires désignent la même couleur : gray et grey (et leurs variantes), aqua et cyan, et fuchsia et magenta.

  • darkgray est plus clair que gray

    À cause de cet héritage X11, darkgray (#A9A9A9) est plus clair que gray (#808080). Si vous cherchez un gris foncé, utilisez dimgray.

  • rebeccapurple a une histoire

    Il a été ajouté en 2014 en mémoire de Rebecca Meyer, fille d'Eric Meyer, l'une des figures de CSS. C'est le seul nom ajouté ces dernières années.

  • Insensibles à la casse

    tomato, Tomato et TOMATO sont la même couleur. Par convention, on les écrit en minuscules.

  • transparent et currentColor

    Ils ne font pas partie de la liste, mais ce sont aussi des mots-clés de couleur : transparent est totalement transparent et currentColor reprend la couleur du texte de l'élément.

Questions fréquentes

148 noms, correspondant à 139 couleurs différentes car il existe neuf paires d'alias (comme gray et grey). Ils vont des basiques comme red ou blue à d'autres comme mediumseagreen ou rebeccapurple.

Oui, vous pouvez les écrire tels quels dans n'importe quelle propriété de couleur, par exemple color: tomato;, sans les convertir d'abord en HEX ou RGB.

Oui. CSS accepte les deux orthographes pour tous les gris (gray/grey, darkgray/darkgrey…) et ils donnent exactement la même couleur.

Parce que les noms viennent de sources différentes : gray (#808080) vient de la liste HTML d'origine et darkgray (#A9A9A9) a été hérité des couleurs X11, où « gray » était plus clair. Pour un gris foncé, utilisez dimgray (#696969).

C'est la couleur #663399, ajoutée à CSS en 2014 en mémoire de Rebecca Meyer, fille d'Eric Meyer, l'une des figures de la communauté CSS.

Non. Tomato, tomato et TOMATO fonctionnent de la même façon, même si on les écrit habituellement en minuscules.

Oui, ils font partie du standard CSS et tous les navigateurs actuels les prennent en charge.

Outils associés