Comment fonctionnent les couleurs en html ?
Il existe plusieurs façons de définir une couleur à l'intérieur d'une propriété CSS quand vous créez une page html. Vous pouvez soit utiliser son nom anglais (par exemple orange), soit son code RGB sous forme hexadecimal (par exemple : #FFA500) ou sous forme rgb(rouge,vert,bleu). Les trois lignes de code qui suivent nous donnent donc le même résultat.
color : red;
color : #FF0000;
color : rgb(255,0,0);
Il y a quelques années, l'arrivée de CSS3 a permis au webdesigner d'intégrer à sa couleur des notions de teinte, de luminosité, de saturation ou encore d'opacité. La notation ressemble assez à celle de tout à l'heure: hsl(teinte, saturation, luminosité).
color : hsl(100%,0,0);
color : hsl(0,25%,0);
color : hsl(0,0,100%);
Liste des codes couleurs en html
Cet outil est un tableau "dynamique" des couleurs HTML, vous pouvez obtenir le code HTML d'une couleur simple en cliquant simplement sur la case qui correspond.
 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Noms des couleurs
Certaines couleurs ont aussi un nom spécifique qui leur est attribué. Ces noms sont regroupés dans des palettes comme la table X11 (norme SVG), qui contient environ 150 noms officiels reconnus par la plupart des navigateurs web. Attention toutefois, il existe quelques variantes de cette palette où les codes de certaines couleurs peuvent légèrement différer. Par ailleurs, il existe plus de 550 noms de couleur HTML référencés, mais tous ne sont pas garantis d’être pris en charge partout./p>
| Couleur | Nom de la couleur | Hexa | Couleur | Nom de la couleur | Hexa | Couleur | Nom de la couleur | Hexa |
|---|---|---|---|---|---|---|---|---|
| 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 | DarkBlue | #00008B | DarkCyan | #008B8B | |||
| DarkGoldenrod | #B8860B | DarkGray | #A9A9A9 | DarkGreen | #006400 | |||
| DarkKhaki | #BDB76B | DarkMagenta | #8B008B | DarkOliveGreen | #556B2F | |||
| DarkOrange | #FF8C00 | DarkOrchid | #9932CC | DarkRed | #8B0000 | |||
| DarkSalmon | #E9967A | DarkSeaGreen | #8FBC8F | DarkSlateBlue | #483D8B | |||
| DarkSlateGray | #2F4F4F | DarkTurquoise | #00CED1 | DarkViolet | #9400D3 | |||
| DeepPink | #FF1493 | DeepSkyBlue | #00BFFF | DimGray | #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 | |||
| 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 | LightGreen | #90EE90 | |||
| LightGrey | #D3D3D3 | LightPink | #FFB6C1 | LightSalmon | #FFA07A | |||
| LightSeaGreen | #20B2AA | LightSkyBlue | #87CEFA | LightSlateGray | #778899 | |||
| LightSteelBlue | #B0C4DE | LightYellow | #FFFFE0 | Lime | #00FF00 | |||
| LimeGreen | #32CD32 | Linen | #FAF0E6 | Magenta | #FF00FF | |||
| 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 | |||
| 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 | Snow | #FFFAFA | SpringGreen | #00FF7F | |||
| SteelBlue | #4682B4 | Tan | #D2B48C | Teal | #008080 | |||
| Thistle | #D8BFD8 | Tomato | #FF6347 | Turquoise | #40E0D0 | |||
| Violet | #EE82EE | Wheat | #F5DEB3 | White | #FFFFFF | |||
| WhiteSmoke | #F5F5F5 | Yellow | #FFFF00 | YellowGreen | #9ACD32 |