Couleurs HTML
Il existe trois façons de changer la couleur du texte en HTML : en utilisant des codes couleur hexadécimaux, des noms de couleurs HTML ou des valeurs RGB.
Codes couleur hexadécimaux
Un code couleur hexadécimal est un triplet hexadécimal, qui représente trois valeurs distinctes définissant les niveaux des couleurs composantes. Il est spécifié avec une notation hexadécimale (hex) pour un mélange de valeurs de couleur Rouge, Vert et Bleu. La valeur la plus basse qui peut être donnée à l’une des sources lumineuses est 0 (hex 00). La valeur la plus élevée est 255 (hex FF).
Les valeurs hexadécimales s’écrivent sous forme de nombres à six chiffres, commençant par le signe #. Les lettres utilisées dans un chiffre hexadécimal peuvent être en majuscules ou en minuscules. Par exemple, pour spécifier la couleur blanche, vous pouvez écrire #FFFFFF ou #ffffff.
Pour ajouter une couleur à un élément de texte, utilisez l’attribut style (où la propriété color correspond à votre code Hex) ou les propriétés CSS correspondantes telles que color: ou background-color:.
Exemple de la propriété background-color utilisée avec la valeur "hex" :
Couleurs du texte et de l’arrière-plan|Exemple de couleurs HTML|Codes couleur hexadécimaux|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
background-color: #1c87c9;
color: #d5dce8;
padding: 22px;
}
</style>
</head>
<body>
<div>
<p>This is a text in grey, and the background is blue</p>
</div>
<p style="color:#8ebf42;"> This is a text in green</p>
</body>
</html>Résultat
Dans le tableau ci-dessous, vous pouvez voir les valeurs hexadécimales des couleurs web. Vous pouvez également utiliser notre outil Color Picker pour parcourir des millions de couleurs avec des codes couleur hexadécimaux.
Noms de couleurs HTML
Pour colorer l’élément de texte à l’aide d’un nom de couleur HTML, mettez le nom de la couleur (blue, par exemple) à la place du code Hex de l’étape précédente.
Exemple de la propriété color utilisée avec la valeur "color name" :
Exemple de noms de couleurs HTML|Couleurs HTML|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
background-color: blue;
color: white;
padding: 22px;
}
</style>
</head>
<body>
<div>
<p>This is a text in grey, and the background is blue</p>
</div>
<p style="color:blue;"> This is a text in blue</p>
</body>
</html>Valeurs de couleur RGB
Pour ajouter une couleur à un élément de texte, utilisez l’attribut style (où la propriété color correspond à votre valeur RGB) ou les propriétés CSS correspondantes.
Exemple de la propriété background-color utilisée avec la valeur "RGB" :
Exemple de valeurs de couleur RGB|Couleurs HTML|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
background-color:rgb(25,25,112);
color: rgb(169,169,169);
padding: 22px;
}
</style>
</head>
<body>
<div>
<p>This is a text in grey, and the background is blue</p>
</div>
<p style="color:rgb(25,25,112);"> This is a text in blue</p>
</body>
</html>Voici la palette de 216 couleurs compatible avec les différents navigateurs, utilisée pour créer des pages web. Cette palette est en grande partie obsolète pour les écrans modernes, mais elle est toujours présentée ici à titre de référence.
| Valeur hexadécimale | Couleur | Valeur RGB |
|---|---|---|
| #000000 | black | rgb(0,0,0) |
| #FFFFFF | white | rgb(255,255,255) |
| #FF0000 | red | rgb(255,0,0) |
| #00FFFF | aqua | rgb(0,255,255) |
| #0000FF | blue | rgb(0,0,255) |
| #C0C0C0 | silver | rgb(192,192,192) |
| #FF00FF | fuchsia | rgb(255,0,255) |
| #000000 | black | rgb(0,0,0) |
| #080000 | rgb(8,0,0) | |
| #100000 | rgb(16,0,0) | |
| #180000 | rgb(24,0,0) | |
| #200000 | rgb(32,0,0) | |
| #280000 | rgb(40,0,0) | |
| #300000 | rgb(48,0,0) | |
| #380000 | rgb(56,0,0) | |
| #400000 | rgb(64,0,0) | |
| #480000 | rgb(72,0,0) | |
| #500000 | rgb(80,0,0) | |
| #580000 | rgb(88,0,0) | |
| #600000 | rgb(96,0,0) | |
| #680000 | rgb(104,0,0) | |
| #700000 | rgb(112,0,0) | |
| #780000 | rgb(120,0,0) | |
| #800000 | rgb(128,0,0) | |
| #880000 | rgb(136,0,0) | |
| #900000 | rgb(144,0,0) | |
| #980000 | rgb(152,0,0) | |
| #A00000 | rgb(160,0,0) | |
| #A80000 | rgb(168,0,0) | |
| #B00000 | rgb(176,0,0) | |
| #B80000 | rgb(184,0,0) | |
| #C00000 | rgb(192,0,0) | |
| #C80000 | rgb(200,0,0) | |
| #D00000 | rgb(208,0,0) | |
| #D80000 | rgb(216,0,0) | |
| #E00000 | rgb(224,0,0) | |
| #E80000 | rgb(232,0,0) | |
| #F00000 | rgb(240,0,0) | |
| #F80000 | rgb(248,0,0) | |
| #FF0000 | rgb(255,0,0) | |
| #000000 | rgb(0,0,0) | |
| #080808 | rgb(8,8,8) | |
| #101010 | rgb(16,16,16) | |
| #181818 | rgb(24,24,24) | |
| #202020 | rgb(32,32,32) | |
| #282828 | rgb(40,40,40) | |
| #303030 | rgb(48,48,48) | |
| #383838 | rgb(56,56,56) | |
| #404040 | rgb(64,64,64) | |
| #484848 | rgb(72,72,72) | |
| #505050 | rgb(80,80,80) | |
| #585858 | rgb(88,88,88) | |
| #606060 | rgb(96,96,96) | |
| #686868 | rgb(104,104,104) | |
| #707070 | rgb(112,112,112) | |
| #787878 | rgb(120,120,120) | |
| #808080 | rgb(128,128,128) | |
| #888888 | rgb(136,136,136) | |
| #909090 | rgb(144,144,144) | |
| #989898 | rgb(152,152,152) | |
| #A0A0A0 | rgb(160,160,160) | |
| #A8A8A8 | rgb(168,168,168) | |
| #B0B0B0 | rgb(176,176,176) | |
| #B8B8B8 | rgb(184,184,184) | |
| #C0C0C0 | rgb(192,192,192) | |
| #C8C8C8 | rgb(200,200,200) | |
| #D0D0D0 | rgb(208,208,208) | |
| #D8D8D8 | rgb(216,216,216) | |
| #E0E0E0 | rgb(224,224,224) | |
| #E8E8E8 | rgb(232,232,232) | |
| #F0F0F0 | rgb(240,240,240) | |
| #F8F8F8 | rgb(248,248,248) | |
| #FFFFFF | rgb(255,255,255) | |
| #000000 | #000033 | #000066 |
| #003300 | #003333 | #003366 |
| #006600 | #006633 | #006666 |
| #009900 | #009933 | #009966 |
| #00CC00 | #00CC33 | #00CC66 |
| #00FF00 | #00FF33 | #00FF66 |
| #330000 | #330033 | #330066 |
| #333300 | #333333 | #333366 |
| #336600 | #336633 | #336666 |
| #339900 | #339933 | #339966 |
| #33CC00 | #33CC33 | #33CC66 |
| #33FF00 | #33FF33 | #33FF66 |
| #660000 | #660033 | #660066 |
| #663300 | #663333 | #663366 |
| #666600 | #666633 | #666666 |
| #669900 | #669933 | #669966 |
| #66CC00 | #66CC33 | #66CC66 |
| #66FF00 | #66FF33 | #66FF66 |
| #990000 | #990033 | #990066 |
| #993300 | #993333 | #993366 |
| #996600 | #996633 | #996666 |
| #999900 | #999933 | #999966 |
| #99CC00 | #99CC33 | #99CC66 |
| #99FF00 | #99FF33 | #99FF66 |
| #CC0000 | #CC0033 | #CC0066 |
| #CC3300 | #CC3333 | #CC3366 |
| #CC6600 | #CC6633 | #CC6666 |
| #CC9900 | #CC9933 | #CC9966 |
| #CCCC00 | #CCCC33 | #CCCC66 |
| #CCFF00 | #CCFF33 | #CCFF66 |
| #FF0000 | #FF0033 | #FF0066 |
| #FF3300 | #FF3333 | #FF3366 |
| #FF6600 | #FF6633 | #FF6666 |
| #FF9900 | #FF9933 | #FF9966 |
| #FFCC00 | #FFCC33 | #FFCC66 |
| #FFFF00 | #FFFF33 | #FFFF66 |
Liste des noms de couleurs HTML :
Voici une liste de certains des noms de couleurs HTML standard :
| Nom de la couleur | Valeur hexadécimale |
|---|---|
| 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 |
| DarkGrey | #A9A9A9 |
| DarkGreen | #006400 |
| 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 |
| Grey | #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 |
| LightGray | #D3D3D3 |
| LightGrey | #D3D3D3 |
| LightGreen | #90EE90 |
| LightPink | #FFB6C1 |
| LightSalmon | #FFA07A |
| LightSeaGreen | #20B2AA |
| LightSkyBlue | #87CEFA |
| LightSlateGray | #778899 |
| LightSlateGrey | #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 |
| SlateGrey | #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 |
Ces noms de couleurs peuvent être utilisés dans le code HTML et CSS pour spécifier la couleur du texte, de l’arrière-plan, des bordures et d’autres éléments.
Practice
Which of the following are ways to specify colors in HTML?