Couleurs HTML
Appliquez des couleurs HTML avec noms, codes hex (#RRGGBB, #RGB, #RRGGBBAA), rgb()/rgba() et hsl()/hsla(). Exemples, tableau de noms et conseils de contraste.
Les couleurs en HTML sont appliquées via CSS, soit en ligne grâce à l'attribut style, soit dans une feuille de style. On ne définit jamais une couleur en HTML seul — on définit une propriété CSS telle que color (couleur du texte), background-color ou border-color, à laquelle on attribue une valeur de couleur. Cette page présente tous les formats de valeur de couleur disponibles :
- Noms de couleurs — des mots-clés comme
red,tomatoourebeccapurple. - Hexadécimal —
#RRGGBB, la notation abrégée#RGB, et la forme à 8 chiffres#RRGGBBAA(avec alpha). rgb()/rgba()— canaux rouge, vert, bleu (avec opacité optionnelle).hsl()/hsla()— teinte, saturation, luminosité (avec opacité optionnelle).
Tous ces formats sont interchangeables : #FF0000, red, rgb(255, 0, 0) et hsl(0, 100%, 50%) décrivent tous le même rouge pur. Pour une référence plus approfondie côté CSS, consultez les chapitres CSS color et CSS background-color.
Codes couleur hexadécimaux
Un code couleur hexadécimal est un triplet hex représentant trois valeurs distinctes qui définissent les niveaux des couleurs composantes. Il est exprimé en notation hexadécimale (hex) pour un mélange de valeurs de couleur rouge, vert et bleu. La valeur minimale attribuable à l'une des sources de lumière est 0 (hex 00). La valeur maximale est 255 (hex FF).
Les valeurs hex s'écrivent sous forme de nombres à six chiffres, précédés du 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, on peut écrire #FFFFFF ou #ffffff.
Il existe deux autres formes hexadécimales à connaître :
- Notation abrégée
#RGB— lorsque chaque canal utilise une paire répétée, on peut la condenser.#FF0000devient#F00et#FFCC00devient#FC0. Le navigateur étend chaque chiffre en le doublant. - Forme à 8 chiffres
#RRGGBBAA— ajoute une paire finale pour le canal alpha (opacité), de00(totalement transparent) àFF(totalement opaque). Par exemple,#1c87c980correspond au bleu#1c87c9à environ 50 % d'opacité.
Pour ajouter une couleur à un élément texte, utilisez l'attribut style (où la propriété color est 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 une valeur « hex » :
<!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
Vous pouvez utiliser notre outil Color Picker pour explorer des millions de couleurs et copier leurs valeurs hex, RGB et HSL.
Noms de couleurs HTML
Pour colorier un élément texte à l'aide d'un nom de couleur HTML, saisissez 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 une valeur « nom de couleur » :
<!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
Une valeur rgb() mélange les canaux rouge, vert et bleu, chacun de 0 à 255 — exactement le même modèle que l'hex, mais exprimé en décimal. rgb(255, 0, 0) est le rouge, rgb(0, 0, 0) est le noir et rgb(255, 255, 255) est le blanc.
Pour ajouter une couleur à un élément texte, utilisez l'attribut style (où la propriété color est votre valeur RGB) ou les propriétés CSS correspondantes.
Exemple de la propriété background-color utilisée avec une valeur « RGB » :
<!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>RGBA : ajouter de l'opacité
rgba() étend rgb() avec une quatrième valeur, le canal alpha, qui contrôle l'opacité de 0 (totalement transparent) à 1 (totalement opaque). Cela est utile pour des superpositions teintées ou des arrière-plans semi-transparents où l'on souhaite laisser transparaître la couche inférieure.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
background-color: rgba(25, 25, 112, 0.5);
color: rgb(33, 33, 33);
padding: 22px;
}
</style>
</head>
<body>
<div>
<p>This box uses a semi-transparent navy background</p>
</div>
</body>
</html>En CSS moderne, rgb(25 25 112 / 50%) est la syntaxe équivalente avec séparation par espaces, et le code hex à 8 chiffres #19197080 produit le même résultat.
Valeurs de couleur HSL et HSLA
hsl() décrit une couleur de la façon dont de nombreux designers la conçoivent — par teinte, saturation et luminosité — ce qui facilite la création d'une gamme de nuances apparentées en ajustant une seule valeur.
- La teinte est un angle sur la roue chromatique de
0à360:0(et360) est le rouge,120est le vert,240est le bleu. - La saturation est un pourcentage :
0%est le gris,100%est la version la plus vive de la teinte. - La luminosité est un pourcentage :
0%est le noir,50%est la couleur « normale »,100%est le blanc.
hsla() ajoute un canal alpha pour l'opacité, tout comme rgba().
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.solid {
background-color: hsl(210, 79%, 46%);
color: white;
padding: 22px;
}
.faded {
background-color: hsla(210, 79%, 46%, 0.4);
padding: 22px;
}
</style>
</head>
<body>
<div class="solid"><p>hsl background</p></div>
<div class="faded"><p>hsla background with 40% opacity</p></div>
</body>
</html>Parce que la luminosité et la saturation sont indépendantes de la teinte, HSL est pratique pour générer des variantes « plus sombre/plus clair » ou de survol d'une couleur de marque : il suffit de conserver la teinte et de réduire la luminosité.
Couleurs et accessibilité
La couleur concerne aussi la lisibilité. Les Web Content Accessibility Guidelines (WCAG) exigent un rapport de contraste d'au moins :
- 4,5:1 pour le texte de corps normal par rapport à son arrière-plan (niveau AA).
- 3:1 pour les grands textes (environ 18pt / 24px, ou 14pt / 19px en gras) ainsi que pour les composants d'interface et les graphiques.
Deux points importants à retenir :
- Ne reposez jamais uniquement sur la couleur pour transmettre une information — par exemple, indiquez les champs de formulaire obligatoires ou les états d'erreur également par du texte ou une icône, afin que les utilisateurs daltoniens et les utilisateurs de lecteurs d'écran ne soient pas exclus.
- Vérifiez vos combinaisons. Un gris pâle sur fond blanc peut paraître élégant mais ne pas atteindre le minimum de 4,5:1. Utilisez notre vérificateur de contraste de couleur pour tester une paire premier plan/arrière-plan avant de la mettre en production.
La palette « web-safe » de 216 couleurs que l'on trouve dans les anciens tutoriels (couleurs construites uniquement à partir des paires hex
00,33,66,99,CC,FF) était un contournement pour les écrans limités à 256 couleurs. Les écrans modernes affichent des millions de couleurs, cette palette est donc obsolète et vous pouvez choisir la valeur qui convient le mieux à votre design.
Liste des noms de couleurs HTML :
Voici une liste de certains 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, des arrière-plans, des bordures et d'autres éléments. Pour approfondir le sujet côté CSS, consultez les chapitres CSS color, CSS background-color et noms de couleurs CSS.