Trouver un code couleur

Codes couleur donne la liste complète des 148 noms de couleurs que CSS comprend, chacun avec son code hex, RGB et HSL et son contraste sur blanc et sur noir. Cherchez par nom ou collez une valeur hex pour découvrir le nom d’une couleur, filtrez par famille, et triez par teinte ou par luminosité pour voir l’ensemble entier rangé comme l’œil le lit plutôt que par ordre alphabétique.

100 % local

Rechercher par nom ou code hexadécimal

Trier

148 couleurs sur 148

Noms des couleurs CSS, codes hexadécimaux, RGB et HSL et taux de contraste
Nom	Sur blanc	Sur noir
aliceblue	1.07	19.58
antiquewhite	1.17	17.93
aqua	1.25	16.75
aquamarine	1.22	17.16
azure	1.03	20.45
beige	1.11	18.98
bisque	1.22	17.15
black	21.00	1.00
blanchedalmond	1.17	18.02
blue	8.59	2.44
blueviolet	5.96	3.52
brown	7.08	2.96
burlywood	1.86	11.31
cadetblue	3.05	6.88
chartreuse	1.30	16.21
chocolate	3.63	5.78
coral	2.50	8.40
cornflowerblue	2.97	7.06
cornsilk	1.07	19.71
crimson	4.99	4.21
cyan	1.25	16.75
darkblue	15.30	1.37
darkcyan	4.15	5.07
darkgoldenrod	3.25	6.45
darkgray	2.35	8.94
darkgreen	7.44	2.82
darkgrey	2.35	8.94
darkkhaki	2.07	10.15
darkmagenta	8.50	2.47
darkolivegreen	5.95	3.53
darkorange	2.33	9.00
darkorchid	5.70	3.68
darkred	10.01	2.10
darksalmon	2.31	9.11
darkseagreen	2.15	9.76
darkslateblue	9.07	2.32
darkslategray	8.93	2.35
darkslategrey	8.93	2.35
darkturquoise	1.95	10.75
darkviolet	6.56	3.20
deeppink	3.64	5.77
deepskyblue	2.12	9.90
dimgray	5.49	3.83
dimgrey	5.49	3.83
dodgerblue	3.24	6.49
firebrick	6.68	3.14
floralwhite	1.04	20.18
forestgreen	4.39	4.78
fuchsia	3.14	6.70
gainsboro	1.37	15.31
ghostwhite	1.06	19.86
gold	1.40	14.97
goldenrod	2.24	9.38
gray	3.95	5.32
green	5.14	4.09
greenyellow	1.23	17.12
grey	3.95	5.32
honeydew	1.04	20.27
hotpink	2.65	7.93
indianred	3.98	5.28
indigo	12.95	1.62
ivory	1.01	20.81
khaki	1.28	16.40
lavender	1.23	17.06
lavenderblush	1.10	19.03
lawngreen	1.33	15.78
lemonchiffon	1.06	19.81
lightblue	1.53	13.74
lightcoral	2.59	8.10
lightcyan	1.05	19.92
lightgoldenrodyellow	1.07	19.67
lightgray	1.50	14.03
lightgreen	1.42	14.82
lightgrey	1.50	14.03
lightpink	1.65	12.71
lightsalmon	1.99	10.56
lightseagreen	2.62	8.01
lightskyblue	1.72	12.24
lightslategray	3.64	5.77
lightslategrey	3.64	5.77
lightsteelblue	1.78	11.80
lightyellow	1.02	20.63
lime	1.37	15.30
limegreen	2.12	9.91
linen	1.12	18.67
magenta	3.14	6.70
maroon	10.95	1.92
mediumaquamarine	1.93	10.88
mediumblue	11.16	1.88
mediumorchid	3.94	5.33
mediumpurple	3.76	5.58
mediumseagreen	2.67	7.88
mediumslateblue	4.15	5.06
mediumspringgreen	1.39	15.14
mediumturquoise	1.86	11.27
mediumvioletred	5.42	3.87
midnightblue	14.85	1.41
mintcream	1.02	20.57
mistyrose	1.20	17.44
moccasin	1.23	17.02
navajowhite	1.29	16.30
navy	16.01	1.31
oldlace	1.08	19.38
olive	4.20	5.01
olivedrab	3.81	5.52
orange	1.97	10.63
orangered	3.44	6.10
orchid	2.89	7.27
palegoldenrod	1.25	16.76
palegreen	1.27	16.59
paleturquoise	1.29	16.29
palevioletred	3.11	6.75
papayawhip	1.13	18.56
peachpuff	1.31	15.98
peru	2.99	7.02
pink	1.54	13.65
plum	2.07	10.15
powderblue	1.43	14.65
purple	9.42	2.23
rebeccapurple	8.41	2.50
red	4.00	5.25
rosybrown	2.81	7.46
royalblue	4.85	4.33
saddlebrown	7.10	2.96
salmon	2.50	8.40
sandybrown	2.03	10.33
seagreen	4.25	4.95
seashell	1.07	19.55
sienna	5.62	3.74
silver	1.82	11.54
skyblue	1.74	12.06
slateblue	5.31	3.96
slategray	4.05	5.18
slategrey	4.05	5.18
snow	1.03	20.31
springgreen	1.35	15.61
steelblue	4.11	5.11
tan	1.97	10.65
teal	4.77	4.40
thistle	1.70	12.36
tomato	2.95	7.13
turquoise	1.64	12.79
violet	2.32	9.06
wheat	1.31	15.98
white	1.00	21.00
whitesmoke	1.09	19.26
yellow	1.07	19.56
yellowgreen	1.88	11.15

Comment fonctionne Trouver un code couleur ?

CSS compte 148 mots-clés de couleur. Ce n’est pas un système — ils se sont accumulés. Seize viennent de la palette HTML 4 d’origine, elle-même issue des seize de VGA. 130 autres sont arrivés du système de fenêtrage X11 et de son rgb.txt, un fichier assemblé au MIT au fil des années 1980 par des gens qui nommaient les couleurs au fur et à mesure de leurs besoins. Voilà pourquoi il existe à la fois gray et grey, pourquoi darkgray est plus clair que gray, et pourquoi rebeccapurple — ajouté en 2014 en mémoire de la fille d’Eric Meyer — est le seul à avoir une histoire.

Pourquoi darkgray est plus clair que gray

gray vaut #808080, le point milieu de la palette HTML 4. darkgray vaut #a9a9a9, qui est plus clair. Ils viennent de sources différentes et n’ont jamais été réconciliés, car quand quelqu’un s’en est aperçu, changer l’un ou l’autre aurait cassé chaque page qui l’utilisait. C’est le moyen le plus fiable de repérer un outil de couleurs qui a généré sa table au lieu de lire la spécification.

Trier par teinte plutôt que par nom

L’ordre alphabétique est inutile pour choisir une couleur et parfait pour retrouver une couleur que vous savez déjà nommer. Trier par teinte met la liste dans l’ordre que l’œil attend — les rouges ensemble, puis les oranges, et ainsi de suite autour de la roue — et c’est la vue qui répond à « Que trouve-t-on d’autre à côté ? ». La teinte utilisée est l’angle OKLCh, pas l’angle HSL, si bien que les regroupements correspondent à l’apparence des couleurs plutôt qu’à ce que dit l’arithmétique.

Les colonnes de contraste

Chaque ligne porte son ratio WCAG 2.x sur blanc et sur noir. C’est le nombre qui décide si la couleur peut porter du texte, et c’est le moyen le plus rapide d’écarter la plus grande partie de cette liste pour tout autre usage que la décoration : sur les 148, moins de la moitié atteignent 4.5:1 sur blanc.

Un nom, ou une valeur hex

navy

Tous ses codes

hex        #000080
rgb        rgb(0 0 128)
hsl        hsl(240 100% 25.1%)
on white   16.01 : 1
on black   1.31 : 1

Quelles options et quels cas limites Trouver un code couleur prend en charge ?

Référence technique et options
Paramètre	Type	Valeur par défaut	Comportement et cas limites
148	comptage	CSS Color 4	Le nombre de couleurs nommées, en comptant les gris orthographiés des deux côtés comme des mots-clés distincts. 147 est le chiffre généralement cité, avant l’ajout de rebeccapurple.
gray / grey	alias	tous deux valides	Chaque mot-clé gris existe dans les deux orthographes et ils sont des valeurs identiques. CSS accepte l’une ou l’autre, et l’a toujours fait.
darkgray	#a9a9a9	—	Plus clair que gray (#808080). Un artefact de la fusion des palettes HTML 4 et X11, préservé car le modifier casserait les pages existantes.
rebeccapurple	#663399	2014	Le seul mot-clé ajouté depuis l’importation X11, en mémoire de Rebecca Meyer. Un alias de la valeur que son père utilisait pour elle.
aqua / cyan	#00ffff	identiques	Même valeur, deux noms, comme fuchsia et magenta. Les deux paires proviennent des deux palettes sources.
transparent	mot-clé	rgba(0,0,0,0)	Valide partout où une couleur est acceptée, et non dans cette liste car il n’y a pas de valeur à y chercher.
Contraste	ratio	vs #fff / #000	Ratio WCAG 2.x. 4.5:1 est le minimum pour le texte normal ; moins de la moitié de ces mots-clés l’atteignent sur un fond blanc.
Tri par teinte	OKLCh	degrés	Trié par angle de teinte perceptive, et non par HSL — c’est pourquoi le rouge se trouve à 29° ici plutôt qu’à 0°.

Questions fréquentes

Quel est le code hex de la couleur rouge ?

#FF0000, qui vaut rgb(255 0 0) et hsl(0 100% 50%). C’est l’un des seize mots-clés HTML 4 d’origine. Bon à savoir : le #FF0000 pur est un rouge très saturé qui vibre sur blanc et se lit difficilement comme texte — il n’atteint que 4.0:1 sur blanc, ce qui échoue au WCAG AA pour du texte courant. La plupart des interfaces veulent quelque chose de plus proche de #C62828, ou plus sombre.

Quel est le code hex du bleu marine ?

#000080. C’est le mot-clé CSS navy : rgb(0 0 128), un bleu exactement à mi-intensité. Il est très sombre — 16.0:1 sur blanc — ce qui le rend excellent pour du texte sur fond clair et presque illisible sur fond sombre. Le bleu marine plus clair qu’utilisent la plupart des palettes de marque se situe d’ordinaire autour de #1B3A6B, plutôt que le mot-clé.

Pourquoi darkgray est-il plus clair que gray ?

Parce qu’ils viennent d’endroits différents. gray vaut #808080 et vient de la palette HTML 4 ; darkgray vaut #A9A9A9 et vient du rgb.txt de X11. Quand CSS a fusionné les deux listes à la fin des années 1990, le conflit était déjà livré dans les navigateurs, alors il a été préservé plutôt que corrigé. C’est le meilleur test qui soit pour savoir si une référence de couleurs a été copiée de la spécification ou générée à partir d’une supposition.

Combien de noms de couleurs CSS existe-t-il ?

148 mots-clés, soit 139 valeurs de couleur distinctes — la différence tient aux gris épelés de deux façons et aux paires aqua/cyan et fuchsia/magenta. Le chiffre de 147 qui circule est antérieur à rebeccapurple, ajouté à la spécification en 2014.

Peut-on utiliser un nom de couleur au lieu d’un code hex en CSS ?

Oui, partout où une couleur est valide, et chaque navigateur les prend tous en charge depuis deux décennies. L’argument pratique contre, c’est que les noms ne forment pas un système : entre darkblue et blue, il n’y a aucune relation sur laquelle compter, aucune échelle de luminosité cohérente, rien le long de quoi interpoler. Pour un design system, vous voulez des valeurs que vous avez générées ; pour un prototype rapide ou un contour de débogage, `outline: 2px solid hotpink` se tape plus vite que n’importe quel hex.

Comment savoir comment s’appelle une couleur hex ?

Collez-la dans le champ de recherche. Le filtre reconnaît les valeurs hex autant que les noms, donc saisir #4169e1 trouve royalblue. Si la valeur ne correspond exactement à aucun mot-clé, il ne revient rien — ce sont des valeurs exactes, pas des plus proches voisins, et un outil qui vous dirait que #4169e2 est 'royalblue' mentirait sur une valeur que vous vous apprêtez à coller dans du code.

Équipe ToolsByUs · Comment nous vérifions nos outils