Couleurs HTML

Ce tableau des couleurs HTML montre les 148 couleurs CSS nommées avec leur nom, leur code HEX et leurs valeurs RGB et HSL. Cherchez par nom ou par code, filtrez par famille de couleurs, triez par nom, teinte ou luminosité et copiez une valeur d’un clic : tout est visible tout de suite, y compris sur mobile.

Source : W3C – CSS Color Module Level 4: Named Colors (148 noms de couleurs avec leurs valeurs). Mise à jour : 2 octobre 2026.

Recherche par nom de couleur ou code HEX

Famille de couleurs

Tri

148 couleurs sur 148

aliceblue#F0F8FFrgb(240, 248, 255)hsl(208, 100%, 97%)Contraste du texte avec le noir : 19,6 : 1
antiquewhite#FAEBD7rgb(250, 235, 215)hsl(34, 78%, 91%)Contraste du texte avec le noir : 17,9 : 1
aqua#00FFFFrgb(0, 255, 255)hsl(180, 100%, 50%)Contraste du texte avec le noir : 16,7 : 1
aquamarine#7FFFD4rgb(127, 255, 212)hsl(160, 100%, 75%)Contraste du texte avec le noir : 17,2 : 1
azure#F0FFFFrgb(240, 255, 255)hsl(180, 100%, 97%)Contraste du texte avec le noir : 20,5 : 1
beige#F5F5DCrgb(245, 245, 220)hsl(60, 56%, 91%)Contraste du texte avec le noir : 19,0 : 1
bisque#FFE4C4rgb(255, 228, 196)hsl(33, 100%, 88%)Contraste du texte avec le noir : 17,1 : 1
black#000000rgb(0, 0, 0)hsl(0, 0%, 0%)Contraste du texte avec le blanc : 21,0 : 1
blanchedalmond#FFEBCDrgb(255, 235, 205)hsl(36, 100%, 90%)Contraste du texte avec le noir : 18,0 : 1
blue#0000FFrgb(0, 0, 255)hsl(240, 100%, 50%)Contraste du texte avec le blanc : 8,6 : 1
blueviolet#8A2BE2rgb(138, 43, 226)hsl(271, 76%, 53%)Contraste du texte avec le blanc : 6,0 : 1
brown#A52A2Argb(165, 42, 42)hsl(0, 59%, 41%)Contraste du texte avec le blanc : 7,1 : 1
burlywood#DEB887rgb(222, 184, 135)hsl(34, 57%, 70%)Contraste du texte avec le noir : 11,3 : 1
cadetblue#5F9EA0rgb(95, 158, 160)hsl(182, 25%, 50%)Contraste du texte avec le noir : 6,9 : 1
chartreuse#7FFF00rgb(127, 255, 0)hsl(90, 100%, 50%)Contraste du texte avec le noir : 16,2 : 1
chocolate#D2691Ergb(210, 105, 30)hsl(25, 75%, 47%)Contraste du texte avec le noir : 5,8 : 1
coral#FF7F50rgb(255, 127, 80)hsl(16, 100%, 66%)Contraste du texte avec le noir : 8,4 : 1
cornflowerblue#6495EDrgb(100, 149, 237)hsl(219, 79%, 66%)Contraste du texte avec le noir : 7,1 : 1
cornsilk#FFF8DCrgb(255, 248, 220)hsl(48, 100%, 93%)Contraste du texte avec le noir : 19,7 : 1
crimson#DC143Crgb(220, 20, 60)hsl(348, 83%, 47%)Contraste du texte avec le blanc : 5,0 : 1
cyan#00FFFFrgb(0, 255, 255)hsl(180, 100%, 50%)Contraste du texte avec le noir : 16,7 : 1
darkblue#00008Brgb(0, 0, 139)hsl(240, 100%, 27%)Contraste du texte avec le blanc : 15,3 : 1
darkcyan#008B8Brgb(0, 139, 139)hsl(180, 100%, 27%)Contraste du texte avec le noir : 5,1 : 1
darkgoldenrod#B8860Brgb(184, 134, 11)hsl(43, 89%, 38%)Contraste du texte avec le noir : 6,5 : 1
darkgray#A9A9A9rgb(169, 169, 169)hsl(0, 0%, 66%)Contraste du texte avec le noir : 8,9 : 1
darkgreen#006400rgb(0, 100, 0)hsl(120, 100%, 20%)Contraste du texte avec le blanc : 7,4 : 1
darkgrey#A9A9A9rgb(169, 169, 169)hsl(0, 0%, 66%)Contraste du texte avec le noir : 8,9 : 1
darkkhaki#BDB76Brgb(189, 183, 107)hsl(56, 38%, 58%)Contraste du texte avec le noir : 10,1 : 1
darkmagenta#8B008Brgb(139, 0, 139)hsl(300, 100%, 27%)Contraste du texte avec le blanc : 8,5 : 1
darkolivegreen#556B2Frgb(85, 107, 47)hsl(82, 39%, 30%)Contraste du texte avec le blanc : 5,9 : 1
darkorange#FF8C00rgb(255, 140, 0)hsl(33, 100%, 50%)Contraste du texte avec le noir : 9,0 : 1
darkorchid#9932CCrgb(153, 50, 204)hsl(280, 61%, 50%)Contraste du texte avec le blanc : 5,7 : 1
darkred#8B0000rgb(139, 0, 0)hsl(0, 100%, 27%)Contraste du texte avec le blanc : 10,0 : 1
darksalmon#E9967Argb(233, 150, 122)hsl(15, 72%, 70%)Contraste du texte avec le noir : 9,1 : 1
darkseagreen#8FBC8Frgb(143, 188, 143)hsl(120, 25%, 65%)Contraste du texte avec le noir : 9,8 : 1
darkslateblue#483D8Brgb(72, 61, 139)hsl(248, 39%, 39%)Contraste du texte avec le blanc : 9,1 : 1
darkslategray#2F4F4Frgb(47, 79, 79)hsl(180, 25%, 25%)Contraste du texte avec le blanc : 8,9 : 1
darkslategrey#2F4F4Frgb(47, 79, 79)hsl(180, 25%, 25%)Contraste du texte avec le blanc : 8,9 : 1
darkturquoise#00CED1rgb(0, 206, 209)hsl(181, 100%, 41%)Contraste du texte avec le noir : 10,7 : 1
darkviolet#9400D3rgb(148, 0, 211)hsl(282, 100%, 41%)Contraste du texte avec le blanc : 6,6 : 1
deeppink#FF1493rgb(255, 20, 147)hsl(328, 100%, 54%)Contraste du texte avec le noir : 5,8 : 1
deepskyblue#00BFFFrgb(0, 191, 255)hsl(195, 100%, 50%)Contraste du texte avec le noir : 9,9 : 1
dimgray#696969rgb(105, 105, 105)hsl(0, 0%, 41%)Contraste du texte avec le blanc : 5,5 : 1
dimgrey#696969rgb(105, 105, 105)hsl(0, 0%, 41%)Contraste du texte avec le blanc : 5,5 : 1
dodgerblue#1E90FFrgb(30, 144, 255)hsl(210, 100%, 56%)Contraste du texte avec le noir : 6,5 : 1
firebrick#B22222rgb(178, 34, 34)hsl(0, 68%, 42%)Contraste du texte avec le blanc : 6,7 : 1
floralwhite#FFFAF0rgb(255, 250, 240)hsl(40, 100%, 97%)Contraste du texte avec le noir : 20,2 : 1
forestgreen#228B22rgb(34, 139, 34)hsl(120, 61%, 34%)Contraste du texte avec le noir : 4,8 : 1
fuchsia#FF00FFrgb(255, 0, 255)hsl(300, 100%, 50%)Contraste du texte avec le noir : 6,7 : 1
gainsboro#DCDCDCrgb(220, 220, 220)hsl(0, 0%, 86%)Contraste du texte avec le noir : 15,3 : 1
ghostwhite#F8F8FFrgb(248, 248, 255)hsl(240, 100%, 99%)Contraste du texte avec le noir : 19,9 : 1
gold#FFD700rgb(255, 215, 0)hsl(51, 100%, 50%)Contraste du texte avec le noir : 15,0 : 1
goldenrod#DAA520rgb(218, 165, 32)hsl(43, 74%, 49%)Contraste du texte avec le noir : 9,4 : 1
gray#808080rgb(128, 128, 128)hsl(0, 0%, 50%)Contraste du texte avec le noir : 5,3 : 1
green#008000rgb(0, 128, 0)hsl(120, 100%, 25%)Contraste du texte avec le blanc : 5,1 : 1
greenyellow#ADFF2Frgb(173, 255, 47)hsl(84, 100%, 59%)Contraste du texte avec le noir : 17,1 : 1
grey#808080rgb(128, 128, 128)hsl(0, 0%, 50%)Contraste du texte avec le noir : 5,3 : 1
honeydew#F0FFF0rgb(240, 255, 240)hsl(120, 100%, 97%)Contraste du texte avec le noir : 20,3 : 1
hotpink#FF69B4rgb(255, 105, 180)hsl(330, 100%, 71%)Contraste du texte avec le noir : 7,9 : 1
indianred#CD5C5Crgb(205, 92, 92)hsl(0, 53%, 58%)Contraste du texte avec le noir : 5,3 : 1
indigo#4B0082rgb(75, 0, 130)hsl(275, 100%, 25%)Contraste du texte avec le blanc : 13,0 : 1
ivory#FFFFF0rgb(255, 255, 240)hsl(60, 100%, 97%)Contraste du texte avec le noir : 20,8 : 1
khaki#F0E68Crgb(240, 230, 140)hsl(54, 77%, 75%)Contraste du texte avec le noir : 16,4 : 1
lavender#E6E6FArgb(230, 230, 250)hsl(240, 67%, 94%)Contraste du texte avec le noir : 17,1 : 1
lavenderblush#FFF0F5rgb(255, 240, 245)hsl(340, 100%, 97%)Contraste du texte avec le noir : 19,0 : 1
lawngreen#7CFC00rgb(124, 252, 0)hsl(90, 100%, 49%)Contraste du texte avec le noir : 15,8 : 1
lemonchiffon#FFFACDrgb(255, 250, 205)hsl(54, 100%, 90%)Contraste du texte avec le noir : 19,8 : 1
lightblue#ADD8E6rgb(173, 216, 230)hsl(195, 53%, 79%)Contraste du texte avec le noir : 13,7 : 1
lightcoral#F08080rgb(240, 128, 128)hsl(0, 79%, 72%)Contraste du texte avec le noir : 8,1 : 1
lightcyan#E0FFFFrgb(224, 255, 255)hsl(180, 100%, 94%)Contraste du texte avec le noir : 19,9 : 1
lightgoldenrodyellow#FAFAD2rgb(250, 250, 210)hsl(60, 80%, 90%)Contraste du texte avec le noir : 19,7 : 1
lightgray#D3D3D3rgb(211, 211, 211)hsl(0, 0%, 83%)Contraste du texte avec le noir : 14,0 : 1
lightgreen#90EE90rgb(144, 238, 144)hsl(120, 73%, 75%)Contraste du texte avec le noir : 14,8 : 1
lightgrey#D3D3D3rgb(211, 211, 211)hsl(0, 0%, 83%)Contraste du texte avec le noir : 14,0 : 1
lightpink#FFB6C1rgb(255, 182, 193)hsl(351, 100%, 86%)Contraste du texte avec le noir : 12,7 : 1
lightsalmon#FFA07Argb(255, 160, 122)hsl(17, 100%, 74%)Contraste du texte avec le noir : 10,6 : 1
lightseagreen#20B2AArgb(32, 178, 170)hsl(177, 70%, 41%)Contraste du texte avec le noir : 8,0 : 1
lightskyblue#87CEFArgb(135, 206, 250)hsl(203, 92%, 75%)Contraste du texte avec le noir : 12,2 : 1
lightslategray#778899rgb(119, 136, 153)hsl(210, 14%, 53%)Contraste du texte avec le noir : 5,8 : 1
lightslategrey#778899rgb(119, 136, 153)hsl(210, 14%, 53%)Contraste du texte avec le noir : 5,8 : 1
lightsteelblue#B0C4DErgb(176, 196, 222)hsl(214, 41%, 78%)Contraste du texte avec le noir : 11,8 : 1
lightyellow#FFFFE0rgb(255, 255, 224)hsl(60, 100%, 94%)Contraste du texte avec le noir : 20,6 : 1
lime#00FF00rgb(0, 255, 0)hsl(120, 100%, 50%)Contraste du texte avec le noir : 15,3 : 1
limegreen#32CD32rgb(50, 205, 50)hsl(120, 61%, 50%)Contraste du texte avec le noir : 9,9 : 1
linen#FAF0E6rgb(250, 240, 230)hsl(30, 67%, 94%)Contraste du texte avec le noir : 18,7 : 1
magenta#FF00FFrgb(255, 0, 255)hsl(300, 100%, 50%)Contraste du texte avec le noir : 6,7 : 1
maroon#800000rgb(128, 0, 0)hsl(0, 100%, 25%)Contraste du texte avec le blanc : 10,9 : 1
mediumaquamarine#66CDAArgb(102, 205, 170)hsl(160, 51%, 60%)Contraste du texte avec le noir : 10,9 : 1
mediumblue#0000CDrgb(0, 0, 205)hsl(240, 100%, 40%)Contraste du texte avec le blanc : 11,2 : 1
mediumorchid#BA55D3rgb(186, 85, 211)hsl(288, 59%, 58%)Contraste du texte avec le noir : 5,3 : 1
mediumpurple#9370DBrgb(147, 112, 219)hsl(260, 60%, 65%)Contraste du texte avec le noir : 5,6 : 1
mediumseagreen#3CB371rgb(60, 179, 113)hsl(147, 50%, 47%)Contraste du texte avec le noir : 7,9 : 1
mediumslateblue#7B68EErgb(123, 104, 238)hsl(249, 80%, 67%)Contraste du texte avec le noir : 5,1 : 1
mediumspringgreen#00FA9Argb(0, 250, 154)hsl(157, 100%, 49%)Contraste du texte avec le noir : 15,1 : 1
mediumturquoise#48D1CCrgb(72, 209, 204)hsl(178, 60%, 55%)Contraste du texte avec le noir : 11,3 : 1
mediumvioletred#C71585rgb(199, 21, 133)hsl(322, 81%, 43%)Contraste du texte avec le blanc : 5,4 : 1
midnightblue#191970rgb(25, 25, 112)hsl(240, 64%, 27%)Contraste du texte avec le blanc : 14,8 : 1
mintcream#F5FFFArgb(245, 255, 250)hsl(150, 100%, 98%)Contraste du texte avec le noir : 20,6 : 1
mistyrose#FFE4E1rgb(255, 228, 225)hsl(6, 100%, 94%)Contraste du texte avec le noir : 17,4 : 1
moccasin#FFE4B5rgb(255, 228, 181)hsl(38, 100%, 85%)Contraste du texte avec le noir : 17,0 : 1
navajowhite#FFDEADrgb(255, 222, 173)hsl(36, 100%, 84%)Contraste du texte avec le noir : 16,3 : 1
navy#000080rgb(0, 0, 128)hsl(240, 100%, 25%)Contraste du texte avec le blanc : 16,0 : 1
oldlace#FDF5E6rgb(253, 245, 230)hsl(39, 85%, 95%)Contraste du texte avec le noir : 19,4 : 1
olive#808000rgb(128, 128, 0)hsl(60, 100%, 25%)Contraste du texte avec le noir : 5,0 : 1
olivedrab#6B8E23rgb(107, 142, 35)hsl(80, 60%, 35%)Contraste du texte avec le noir : 5,5 : 1
orange#FFA500rgb(255, 165, 0)hsl(39, 100%, 50%)Contraste du texte avec le noir : 10,6 : 1
orangered#FF4500rgb(255, 69, 0)hsl(16, 100%, 50%)Contraste du texte avec le noir : 6,1 : 1
orchid#DA70D6rgb(218, 112, 214)hsl(302, 59%, 65%)Contraste du texte avec le noir : 7,3 : 1
palegoldenrod#EEE8AArgb(238, 232, 170)hsl(55, 67%, 80%)Contraste du texte avec le noir : 16,8 : 1
palegreen#98FB98rgb(152, 251, 152)hsl(120, 93%, 79%)Contraste du texte avec le noir : 16,6 : 1
paleturquoise#AFEEEErgb(175, 238, 238)hsl(180, 65%, 81%)Contraste du texte avec le noir : 16,3 : 1
palevioletred#DB7093rgb(219, 112, 147)hsl(340, 60%, 65%)Contraste du texte avec le noir : 6,8 : 1
papayawhip#FFEFD5rgb(255, 239, 213)hsl(37, 100%, 92%)Contraste du texte avec le noir : 18,6 : 1
peachpuff#FFDAB9rgb(255, 218, 185)hsl(28, 100%, 86%)Contraste du texte avec le noir : 16,0 : 1
peru#CD853Frgb(205, 133, 63)hsl(30, 59%, 53%)Contraste du texte avec le noir : 7,0 : 1
pink#FFC0CBrgb(255, 192, 203)hsl(350, 100%, 88%)Contraste du texte avec le noir : 13,7 : 1
plum#DDA0DDrgb(221, 160, 221)hsl(300, 47%, 75%)Contraste du texte avec le noir : 10,1 : 1
powderblue#B0E0E6rgb(176, 224, 230)hsl(187, 52%, 80%)Contraste du texte avec le noir : 14,7 : 1
purple#800080rgb(128, 0, 128)hsl(300, 100%, 25%)Contraste du texte avec le blanc : 9,4 : 1
rebeccapurple#663399rgb(102, 51, 153)hsl(270, 50%, 40%)Contraste du texte avec le blanc : 8,4 : 1
red#FF0000rgb(255, 0, 0)hsl(0, 100%, 50%)Contraste du texte avec le noir : 5,3 : 1
rosybrown#BC8F8Frgb(188, 143, 143)hsl(0, 25%, 65%)Contraste du texte avec le noir : 7,5 : 1
royalblue#4169E1rgb(65, 105, 225)hsl(225, 73%, 57%)Contraste du texte avec le blanc : 4,8 : 1
saddlebrown#8B4513rgb(139, 69, 19)hsl(25, 76%, 31%)Contraste du texte avec le blanc : 7,1 : 1
salmon#FA8072rgb(250, 128, 114)hsl(6, 93%, 71%)Contraste du texte avec le noir : 8,4 : 1
sandybrown#F4A460rgb(244, 164, 96)hsl(28, 87%, 67%)Contraste du texte avec le noir : 10,3 : 1
seagreen#2E8B57rgb(46, 139, 87)hsl(146, 50%, 36%)Contraste du texte avec le noir : 4,9 : 1
seashell#FFF5EErgb(255, 245, 238)hsl(25, 100%, 97%)Contraste du texte avec le noir : 19,5 : 1
sienna#A0522Drgb(160, 82, 45)hsl(19, 56%, 40%)Contraste du texte avec le blanc : 5,6 : 1
silver#C0C0C0rgb(192, 192, 192)hsl(0, 0%, 75%)Contraste du texte avec le noir : 11,5 : 1
skyblue#87CEEBrgb(135, 206, 235)hsl(197, 71%, 73%)Contraste du texte avec le noir : 12,1 : 1
slateblue#6A5ACDrgb(106, 90, 205)hsl(248, 53%, 58%)Contraste du texte avec le blanc : 5,3 : 1
slategray#708090rgb(112, 128, 144)hsl(210, 13%, 50%)Contraste du texte avec le noir : 5,2 : 1
slategrey#708090rgb(112, 128, 144)hsl(210, 13%, 50%)Contraste du texte avec le noir : 5,2 : 1
snow#FFFAFArgb(255, 250, 250)hsl(0, 100%, 99%)Contraste du texte avec le noir : 20,3 : 1
springgreen#00FF7Frgb(0, 255, 127)hsl(150, 100%, 50%)Contraste du texte avec le noir : 15,6 : 1
steelblue#4682B4rgb(70, 130, 180)hsl(207, 44%, 49%)Contraste du texte avec le noir : 5,1 : 1
tan#D2B48Crgb(210, 180, 140)hsl(34, 44%, 69%)Contraste du texte avec le noir : 10,6 : 1
teal#008080rgb(0, 128, 128)hsl(180, 100%, 25%)Contraste du texte avec le blanc : 4,8 : 1
thistle#D8BFD8rgb(216, 191, 216)hsl(300, 24%, 80%)Contraste du texte avec le noir : 12,4 : 1
tomato#FF6347rgb(255, 99, 71)hsl(9, 100%, 64%)Contraste du texte avec le noir : 7,1 : 1
turquoise#40E0D0rgb(64, 224, 208)hsl(174, 72%, 56%)Contraste du texte avec le noir : 12,8 : 1
violet#EE82EErgb(238, 130, 238)hsl(300, 76%, 72%)Contraste du texte avec le noir : 9,1 : 1
wheat#F5DEB3rgb(245, 222, 179)hsl(39, 77%, 83%)Contraste du texte avec le noir : 16,0 : 1
white#FFFFFFrgb(255, 255, 255)hsl(0, 0%, 100%)Contraste du texte avec le noir : 21,0 : 1
whitesmoke#F5F5F5rgb(245, 245, 245)hsl(0, 0%, 96%)Contraste du texte avec le noir : 19,3 : 1
yellow#FFFF00rgb(255, 255, 0)hsl(60, 100%, 50%)Contraste du texte avec le noir : 19,6 : 1
yellowgreen#9ACD32rgb(154, 205, 50)hsl(80, 61%, 50%)Contraste du texte avec le noir : 11,2 : 1

Ma boîte à outils

Résultat

Comment le calcul est fait

En bref : en HTML et en CSS, on peut indiquer les couleurs non seulement par un code, mais aussi par un nom anglais, par exemple color: tomato au lieu de #FF6347. Il existe 148 noms de ce type. Le tableau ci-dessus présente chacun avec son code HEX, ses composantes RGB et sa valeur HSL.

Utiliser le tableau

Champ de recherche : tapez une partie d’un nom ou d’un code HEX (« blue », « green », « 6495ED »).
Choisissez une famille de couleurs pour ne voir que les rouges, les verts, etc.
Triez par nom, par teinte (ordre de l’arc-en-ciel, gris à la fin) ou par luminosité.
Cliquez sur HEX, Nom ou RGB : la valeur est dans le presse-papiers.

HEX, RGB et HSL

HEX : code à six chiffres pour le rouge, le vert et le bleu, de 00 à FF (p. ex. #FF6347).
RGB : les mêmes parts sous forme de nombres de 0 à 255 (rgb(255, 99, 71)).
HSL : teinte en degrés, saturation et luminosité en pourcentage, pratique pour éclaircir ou ternir une couleur.

Contraste du texte

Sous chaque couleur, vous voyez si le texte noir ou blanc y est plus lisible, avec le rapport de contraste selon WCAG 2.2. Pour du texte normal, WCAG exige au moins 4,5 : 1, pour un grand texte 3 : 1. Les noms équivalents comme aqua et cyan ou gray et grey sont des alias de même valeur.

Questions fréquentes

Combien de noms de couleurs existe-t-il en HTML et CSS ?

Il y a 148 couleurs nommées, dont des alias comme aqua et cyan, magenta et fuchsia, gray et grey. S’y ajoutent les mots-clés transparent et currentcolor.

Comment écrire un nom de couleur en CSS ?

Directement comme valeur, par exemple color: tomato; ou background: cornflowerblue;. Les noms sont en anglais et insensibles à la casse.

Quels sont les codes HEX du rouge, du vert et du bleu ?

red vaut #FF0000, lime (vert pur) #00FF00 et blue #0000FF. Le mot green désigne en CSS un vert plus foncé, #008000.

Comment trouver le nom d’une couleur à partir de son code HEX ?

Saisissez le code dans la recherche, avec ou sans #. S’il existe un nom ayant exactement cette valeur, il apparaît dans la liste.

Quelle couleur de texte convient à une couleur ?

L’indication sous la couleur dit si le noir ou le blanc offre le plus de contraste. Pour un texte lisible, le rapport doit être d’au moins 4,5 : 1.

Sources et références juridiques

Dernière mise à jour : 2 octobre 2026 · Principes éditoriaux