indianred
hsl(0,53%,58%)
lightcoral
hsl(0,79%,72%)
salmon
hsl(6,93%,71%)
darksalmon
hsl(15,72%,70%)
crimson
hsl(348,83%,47%)
red
hsl(0,100%,50%)
firebrick
hsl(0,68%,42%)
darkred
hsl(0,100%,27%)
pink
hsl(350,100%,88%)
lightpink
hsl(351,100%,86%)
hotpink
hsl(330,100%,71%)
deeppink
hsl(328,100%,54%)
mediumvioletred
hsl(322,81%,43%)
palevioletred
hsl(340,60%,65%)
lightsalmon
hsl(17,100%,74%)
coral
hsl(16,100%,66%)
tomato
hsl(9,100%,64%)
orangered
hsl(16,100%,50%)
darkorange
hsl(33,100%,50%)
orange
hsl(39,100%,50%)
gold
hsl(51,100%,50%)
yellow
hsl(60,100%,50%)
lightyellow
hsl(60,100%,94%)
lemonchiffon
hsl(54,100%,90%)
lightgoldenrodyellow
hsl(60,80%,90%)
papayawhip
hsl(37,100%,92%)
moccasin
hsl(38,100%,85%)
peachpuff
hsl(28,100%,86%)
palegoldenrod
hsl(55,67%,80%)
khaki
hsl(54,77%,75%)
darkkhaki
hsl(56,38%,58%)
greenyellow
hsl(84,100%,59%)
chartreuse
hsl(90,100%,50%)
lawngreen
hsl(90,100%,49%)
lime
hsl(120,100%,50%)
limegreen
hsl(120,61%,50%)
palegreen
hsl(120,93%,79%)
lightgreen
hsl(120,73%,75%)
mediumspringgreen
hsl(157,100%,49%)
springgreen
hsl(150,100%,50%)
mediumseagreen
hsl(147,50%,47%)
seagreen
hsl(146,50%,36%)
forestgreen
hsl(120,61%,34%)
green
hsl(120,100%,25%)
darkgreen
hsl(120,100%,20%)
yellowgreen
hsl(80,61%,50%)
olivedrab
hsl(80,60%,35%)
olive
hsl(60,100%,25%)
darkolivegreen
hsl(82,39%,30%)
mediumaquamarine
hsl(160,51%,60%)
darkseagreen
hsl(120,25%,65%)
lightseagreen
hsl(177,70%,41%)
darkcyan
hsl(180,100%,27%)
teal
hsl(180,100%,25%)
aqua
hsl(180,100%,50%)
cyan
hsl(180,100%,50%)
lightcyan
hsl(180,100%,94%)
paleturquoise
hsl(180,65%,81%)
aquamarine
hsl(160,100%,75%)
turquoise
hsl(174,72%,56%)
mediumturquoise
hsl(178,60%,55%)
darkturquoise
hsl(181,100%,41%)
cadetblue
hsl(182,25%,50%)
steelblue
hsl(207,44%,49%)
lightsteelblue
hsl(214,41%,78%)
powderblue
hsl(187,52%,80%)
lightblue
hsl(195,53%,79%)
skyblue
hsl(197,71%,73%)
lightskyblue
hsl(203,92%,75%)
deepskyblue
hsl(195,100%,50%)
dodgerblue
hsl(210,100%,56%)
cornflowerblue
hsl(219,79%,66%)
mediumslateblue
hsl(249,80%,67%)
royalblue
hsl(225,73%,57%)
blue
hsl(240,100%,50%)
mediumblue
hsl(240,100%,40%)
darkblue
hsl(240,100%,27%)
navy
hsl(240,100%,25%)
midnightblue
hsl(240,64%,27%)
lavender
hsl(240,67%,94%)
thistle
hsl(300,24%,80%)
plum
hsl(300,47%,75%)
violet
hsl(300,76%,72%)
orchid
hsl(302,59%,65%)
fuchsia
hsl(300,100%,50%)
magenta
hsl(300,100%,50%)
mediumorchid
hsl(288,59%,58%)
mediumpurple
hsl(260,60%,65%)
rebeccapurple
hsl(270,50%,40%)
blueviolet
hsl(271,76%,53%)
darkviolet
hsl(282,100%,41%)
darkorchid
hsl(280,61%,50%)
darkmagenta
hsl(300,100%,27%)
purple
hsl(300,100%,25%)
indigo
hsl(275,100%,25%)
slateblue
hsl(248,53%,58%)
darkslateblue
hsl(248,39%,39%)
cornsilk
hsl(48,100%,93%)
blanchedalmond
hsl(36,100%,90%)
bisque
hsl(33,100%,88%)
navajowhite
hsl(36,100%,84%)
wheat
hsl(39,77%,83%)
burlywood
hsl(34,57%,70%)
tan
hsl(34,44%,69%)
rosybrown
hsl(0,25%,65%)
sandybrown
hsl(28,87%,67%)
goldenrod
hsl(43,74%,49%)
darkgoldenrod
hsl(43,89%,38%)
peru
hsl(30,59%,53%)
chocolate
hsl(25,75%,47%)
saddlebrown
hsl(25,76%,31%)
sienna
hsl(19,56%,40%)
brown
hsl(0,59%,41%)
maroon
hsl(0,100%,25%)
white
hsl(0,0%,100%)
snow
hsl(0,100%,99%)
honeydew
hsl(120,100%,97%)
mintcream
hsl(150,100%,98%)
azure
hsl(180,100%,97%)
aliceblue
hsl(208,100%,97%)
ghostwhite
hsl(240,100%,99%)
whitesmoke
hsl(0,0%,96%)
seashell
hsl(25,100%,97%)
beige
hsl(60,56%,91%)
oldlace
hsl(39,85%,95%)
floralwhite
hsl(40,100%,97%)
ivory
hsl(60,100%,97%)
antiquewhite
hsl(34,78%,91%)
linen
hsl(30,67%,94%)
lavenderblush
hsl(340,100%,97%)
mistyrose
hsl(6,100%,94%)
gainsboro
hsl(0,0%,86%)
lightgray
hsl(0,0%,83%)
silver
hsl(0,0%,75%)
darkgray
hsl(0,0%,66%)
gray
hsl(0,0%,50%)
dimgray
hsl(0,0%,41%)
lightslategray
hsl(210,14%,53%)
slategray
hsl(210,13%,50%)
darkslategray
hsl(180,25%,25%)
black
hsl(0,0%,0%)
/* CSS */
.button {
background-color: dodgerblue;
color: white;
border: 2px solid midnightblue;
}
/* Tailwind custom config */
colors: {
brand: 'rebeccapurple',
}
/* JavaScript: canvas */
ctx.fillStyle = 'tomato';
ctx.strokeStyle = 'darkolivegreen';
/* SVG */
<circle fill="cornflowerblue" stroke="navy" />
/* CSS variables with named colors */
:root {
--accent: mediumspringgreen;
--danger: crimson;
}| Format | Example | Best for |
|---|---|---|
| Named | rebeccapurple | Readability, quick prototyping |
| Hex | #663399 | Design tools, copy/paste from Figma |
| RGB | rgb(102, 51, 153) | Programmatic manipulation |
| HSL | hsl(272, 50%, 40%) | Theming, lightness/saturation control |
| OKLCH | oklch(40% 0.15 305) | Perceptual uniformity, CSS Color 4 |
Convertissez entre les formats de couleurs hex, RGB, HSL et CMYK instantanément.
CSS prend en charge 148 couleurs nommées définies dans la spécification CSS Color Level 4, plus le mot-clé spécial 'transparent'. Celles-ci incluent les 16 couleurs HTML originales, les couleurs X11/SVG et les ajouts de CSS3/4. Toutes sont prises en charge dans les navigateurs modernes.
Non, les noms de couleurs CSS ne sont pas sensibles à la casse. 'Red', 'red', 'RED' et 'rEd' produisent tous le même résultat. Cependant, le camelCase (comme 'lightBlue') n'est pas utilisé — la forme standard est tout en minuscules (lightblue).
Utilisez les couleurs nommées pour le prototypage rapide et la lisibilité (ex. 'red' est plus clair que '#ff0000'). Utilisez les codes hex ou RGB pour le travail de conception précis où les valeurs de couleur exactes sont importantes, ou lorsque vous utilisez des couleurs qui ne sont pas dans la palette nommée. HSL est souvent le meilleur choix pour la manipulation programmatique des couleurs.
HTML a initialement défini 16 noms de couleurs de base. CSS a étendu cela à 141 noms dans CSS3, et CSS Color Level 4 a ajouté 'rebeccapurple' et standardisé l'ensemble complet des couleurs X11 pour un total de 148. Tous les noms de couleurs HTML sont des noms de couleurs CSS valides.