Codes Couleurs CSS et HTML : Guide Complet 2025 des 140 couleurs CSS Dénomination, Propriétés, Codes RVB et Hexadécipal
Vous créez votre site web et vous vous demandez comment choisir les bonnes couleurs ? Vous êtes au bon endroit ! Les codes couleurs constituent le fondement de toute identité visuelle réussie sur le web. Que vous soyez entrepreneur, artisan ou commerçant, maîtriser ces codes vous permettra de créer un site professionnel qui inspire confiance à vos visiteurs.
Les couleurs font partie intégrante de votre message sur le Web : elles envoient un message, établissent l’ambiance, elles sont le cœur de votre identité de marque.
Elles sont un élément de langage à part entière : elles aident à souligner un propos, un indiquer un contenus interactif, décorent un bouton, bordent une image.
Elles véhiculent une émotion, un état d’esprit.
Choisir les bonnes couleurs pour votre site n’est pas qu’une question d’esthétique : c’est un enjeu de crédibilité professionnelle. Vos couleurs doivent refléter votre métier et rassurer vos clients potentiels. Dans cet article, vous découvrirez comment utiliser efficacement les 140 couleurs supportées par tous les navigateurs, leurs codes hexadécimaux, RVB, et des conseils pratiques pour les intégrer dans vos feuilles de style CSS.
Quelle palette de couleurs choisir pour votre site web en 2025 ?
En 2025, les tendances colorimétiques évoluent vers des palettes plutôt sophistiquées. Le Mocha Mousse (Pantone 17-1230) par exemple, qui est la couleur Pantone de l’année, s’impose comme LA référence.
Mocha Mousse : la couleur Pantone de 2025
Cette nuance brun-beige aux reflets entre chocolat et café évoque pour moi la douceur réconfortante et l’élégance intemporelle, la gourmandise, la rondeur veloutée. Très jolie couleur chaleureuse qui exprime également la terre, l’authenticité et cette recherche de simplicité que nous pouvons ressentir pour compenser notre hyperconnexion et notre activité de plus en plus cérébrale et virtuelle.
Créer une palette autour de Mocha Mousse
Mocha Mousse se mariera parfaitement avec :
- Le blanc cassé et le crème pour une élégance discrète
- Les verts sourds (sauge, eucalyptus) pour un côté naturel
- L’or et le bronze pour une touche premium accessible
- Le bleu marine pour un contraste professionnel rassurant
Comment intégrer la couleur dans votre communication sans vous tromper ?
Si vous débutez dans le webdesign et que vous ne voulez pas faire de faute de goût, je vous propose une règle simple :
1 couleur dominante
+ 1 couleur secondaire
+ noir (ou couleur très foncée pour les textes)
+ blanc pour le fond (ou couleur très très claire pour conserver un bon contraste qui vous assurera de respecter les normes d’accessibilité).
Saupoudrer votre couleur dominante dans votre site WordPress
- En couleur d’accent pour vos boutons d’appel à l’action
- Dans vos titres pour une hiérarchie visuelle douce mais efficace
- Pour vos témoignages clients afin de renforcer la crédibilité
- En arrière-plan de sections importantes (mais avec parcimonie !)
Intégrez-la dans vos contenus visuels
- Logos et identité visuelle : idéalement, cette couleur doit être présente dans vos éléments de communication
- Publications réseaux sociaux : votre « couleur d’accent » génère naturellement plus d’engagement et constitue votre identité repérable entre toutes 📱
- Supports de communication : cartes de visite, flyers, elle doit parfaitement fonctionner à l’impression.
Comment utiliser les codes couleurs du Web ?
Les trois formats essentiels à retenir :
- Nom anglais : idéal pour débuter (ex: « blue », « red »)
- Code hexadécimal : le plus utilisé en CSS (
#FF0000) - Code RVB : précision maximale (rgb(255, 0, 0))
Vous pouvez rencontrer des codes CMJN : il est adapté aux spécifications techniques des imprimeurs. C’est donc le mode colorimétrique à utiliser pour vos travaux d’impression.
Voici comment les utiliser dans votre feuille de style:
Nom anglais
<style>
div {
background-color: deepskyblue;
color: deepskyblue;
}
</style>
Code hexadécimal
<style>
div {
background-color: #00BFFF;
color: #00BFFF;
}
</style>
Voici les 140 couleurs supportées par tous les navigateurs et leurs codes RVB et Hexadécimal :
Nom Anglais |
Couleur |
Hexadécimal |
Code RVB |
| Black | #000000 | 0 0 0 | |
| Dimgrey (dimgray) | #696969 | 105 105 105 | |
| Grey (gray) | #808080 | 128 128 128 | |
| Darkgrey (darkgray) | #A9A9A9 | 169 169 169 | |
| Silver | #C0C0C0 | 192 192 192 | |
| Lightgrey (lightgray) | #D3D3D3 | 211 211 211 | |
| Gainsboro | #DCDCDC | 220 220 220 | |
| Whitesmoke | #F5F5F5 | 245 245 245 | |
| Ghostwhite | #F8F8FF | 248 248 255 | |
| White | #FFFFFF | 255 255 255 | |
| Ivory | #FFFFF0 | 255 255 240 | |
| Floralwhite | #FFFAF0 | 255 250 240 | |
| Seashell | #FFF5EE | 255 245 238 | |
| Lavenderblush | #FFF0F5 | 255 240 245 | |
| Oldlace | #FDF5E6 | 253 245 230 | |
| Linen | #FAF0E6 | 250 240 230 | |
| Mistyrose | #FFE4E1 | 255 228 225 | |
| Pink | #FFC0CB | 255 192 203 | |
| Lightpink | #FFB6C1 | 255 182 193 | |
| hotpink | #FF69B4 | 255 105 180 | |
| Deeppink | #FF1493 | 255 20 147 | |
| Palevioletred | #DB7093 | 219 112 147 | |
| Fuchsia (magenta) | #FF00FF | 255 0 255 | |
| Mediumvioletred | #C71585 | 199 21 133 | |
| Thistle | #D8BFD8 | 216 191 216 | |
| Plum | #DDA0DD | 221 160 221 | |
| Violet | #EE82EE | 238 130 238 | |
| Orchid | #DA70D6 | 218 112 214 | |
| Mediumorchid | #BA55D3 | 186 85 211 | |
| Darkorchid | #9932CC | 153 50 204 | |
| Darkviolet | #9400D3 | 148 0 211 | |
| Blueviolet | #8A2BE2 | 138 43 226 | |
| Indigo | #4B0082 | 75 0 130 | |
| Mediumslateblue | #7B68EE | 123 104 238 | |
| Slateblue | #6A5ACD | 106 90 205 | |
| Darkslateblue | #483D8B | 72 61 139 | |
| Mediumpurple | #9370DB | 147 112 219 | |
| Darkmagenta | #8B008B | 139 0 139 | |
| Purple | #800080 | 128 0 128 | |
| Rosybrown | #BC8F8F | 188 143 143 | |
| Lightcoral | #F08080 | 240 128 128 | |
| Coral | #FF7F50 | 255 127 80 | |
| Tomato | #FF6347 | 255 99 71 | |
| Orangered | #FF4500 | 255 69 0 | |
| Red | #FF0000 | 255 0 0 | |
| Crimson | #DC143C | 220 20 60 | |
| Lightsalmon | #FFA07A | 255 160 122 | |
| Darksalmon | #E9967A | 233 150 122 | |
| Salmon | #FA8072 | 250 128 114 | |
| Indianred | #CD5C5C | 205 92 92 | |
| Firebrick | #B22222 | 178 34 34 | |
| Brown | #A52A2A | 165 42 42 | |
| Darkred | #8B0000 | 139 0 0 | |
| Maroon | #800000 | 128 0 0 | |
| Beige | #F5F5DC | 245 245 220 | |
| Antiquewhite | #FAEBD7 | 250 235 215 | |
| Papayawhip | #FFEFD5 | 255 239 213 | |
| Blanchedalmond | #FFEBCD | 255 235 205 | |
| Bisque | #ffe4c4 | 255 228 186 | |
| Peachpuff | #FFDAB9 | 255 218 185 | |
| Moccasin | #FFE4B5 | 255 228 181 | |
| Navajowhite | #FFDEAD | 255 222 173 | |
| Wheat | #F5DEB3 | 245 222 179 | |
| Burlywood | #DEB887 | 222 184 135 | |
| Tan | #D2B48C | 210 180 140 | |
| Sandybrown | #F4A460 | 244 164 96 | |
| Orange | #FFA500 | 255 165 0 | |
| Darkorange | #FF8C00 | 255 140 0 | |
| Chocolate | #D2691E | 210 105 30 | |
| Peru | #CD853F | 205 133 63 | |
| Sienna | #A0522D | 160 82 45 | |
| Saddlebrown | #8B4513 | 139 69 19 | |
| Lightyellow | #FFFFE0 | 255 255 224 | |
| Cornsilk | #FFF8DC | 255 248 220 | |
| Lightgoldenrodyellow | #FAFAD2 | 250 250 210 | |
| Lemonchiffon | #FFFACD | 255 250 205 | |
| Palegoldenrod | #EEE8AA | 238 232 170 | |
| Khaki | #F0E68C | 240 230 140 | |
| Yellow | #FFFF00 | 255 255 0 | |
| Gold | #FFD700 | 255 215 0 | |
| Goldenrod | #DAA520 | 218 165 32 | |
| Darkgoldenrod | #B8860B | 184 134 11 | |
| Darkkhaki | #BDB76B | 189 183 107 | |
| Yellowgreen | #9ACD32 | 154 205 50 | |
| Olivedrab | #6B8E23 | 107 142 35 | |
| Olive | #808000 | 128 128 0 | |
| Darkolivegreen | #556B2F | 85 107 47 | |
| Greenyellow | #ADFF2F | 173 255 47 | |
| Chartreuse | #7FFF00 | 127 255 0 | |
| Lawngreen | #7CFC00 | 124 252 0 | |
| Lime | #00FF00 | 0 255 0 | |
| Limegreen | #32CD32 | 50 205 50 | |
| Mintcream | #F5FFFA | 245 255 250 | |
| Honeydew | #F0FFF0 | 240 255 240 | |
| Palegreen | #98FB98 | 152 251 152 | |
| Lightgreen | #90EE90 | 144 238 144 | |
| Springgreen | #00FF7F | 0 255 127 | |
| Mediumspringgreen | #00FA9A | 0 250 154 | |
| Forestgreen | #228B22 | 34 139 34 | |
| Green | #008000 | 0 128 0 | |
| Darkgreen | #006400 | 0 100 0 | |
| Darkseagreen | #8FBC8F | 143 188 143 | |
| Mediumseagreen | #3CB371 | 60 179 113 | |
| Seagreen | #2E8B57 | 46 139 87 | |
| Lightslategray | #778899 | 119 136 153 | |
| Slategray | #708090 | 112 128 144 | |
| Darkslategray | #2F4F4F | 47 79 79 | |
| Aliceblue | #F0F8FF | 240 248 255 | |
| Azure | #F0FFFF | 240 255 255 | |
| Lightcyan | #E0FFFF | 224 255 255 | |
| Paleturquoise | #AFEEEE | 175 238 238 | |
| Aquamarine | #7FFFD4 | 127 255 212 | |
| Mediumaquamarine | #66CDAA | 102 205 170 | |
| Aqua | #00FFFF | 0 255 255 | |
| Turquoise | #40E0D0 | 64 224 208 | |
| Mediumturquoise | #48D1CC | 72 209 204 | |
| Darkturquoise | #00CED1 | 0 206 206 | |
| Lightseagreen | #20B2AA | 32 178 170 | |
| Darkcyan | #008B8B | 0 139 139 | |
| Teal | #008080 | 0 128 128 | |
| Cadetblue | #5F9EA0 | 95 158 160 | |
| Powderblue | #B0E0E6 | 176 224 230 | |
| Lightblue | #ADD8E6 | 173 216 230 | |
| Lightskyblue | #87CEFA | 135 206 250 | |
| Skyblue | #87CEEB | 135 206 235 | |
| Deepskyblue | #00BFFF | 0 191 255 | |
| Dodgerblue | #1E90FF | 30 144 255 | |
| Lavender | #E6E6FA | 230 230 250 | |
| Lightsteelblue | #B0C4DE | 176 196 222 | |
| Cornflowerblue | #6495ED | 100 149 237 | |
| Steelblue | #4682B4 | 70 130 180 | |
| Royalblue | #4169E1 | 65 105 225 | |
| Blue | #0000FF | 0 0 255 | |
| Mediumblue | #0000CD | 0 0 205 | |
| Darkblue | #00008B | 0 0 139 | |
| Navy | #000080 | 0 0 128 | |
| Midnightblue | #191970 | 25 25 112 |
Envie de changement ?
Vous utilisez WordPress ? Quel que soit le thème graphique installé sur votre site, il est possible de modifier le jeu de couleurs de votre webdesign en quelques clics (et si ce n’est pas le cas, Mirobolus peut vous aider à optimiser vos réglages de styles pour gagner en efficacité et en rapidité de chargement de vos pages). Et avec un thème comme DIVI ou Elementor, c’est d’une simplicité enfantine de changer la couleur d’accent de votre site et les polices de caractères.
N’hésitez pas à me contacter, je peux vous accompagner pour relooker votre site.
Il n’est pas toujours nécessaire de tout chambouler : on épure, on allège la feuille de styles et on repart avec des règles plus conforme à votre identité, pour optimiser votre message et toucher plus efficacement votre cible.
Alors on y va ? Êtes-vous prêt pour créer ensemble une identité visuelle qui vous ressemble et qui convertit vos visiteurs en clients ? Prenons rendez-vous pour en parler !
