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 |
Converti tra i formati di colore hex, RGB, HSL e CMYK istantaneamente.
CSS supporta 148 colori con nome definiti nella specifica CSS Color Level 4, più la parola chiave speciale 'transparent'. Questi includono i 16 colori HTML originali, i colori X11/SVG e le aggiunte da CSS3/4. Tutti sono supportati nei browser moderni.
No, i nomi dei colori CSS non sono sensibili alle maiuscole. 'Red', 'red', 'RED' e 'rEd' producono tutti lo stesso risultato. Tuttavia, il camelCase (come 'lightBlue') non viene utilizzato — la forma standard è tutto in minuscolo (lightblue).
Usa colori con nome per prototipazione rapida e leggibilità (es. 'red' è più chiaro di '#ff0000'). Usa codici hex o RGB per lavori di design precisi dove contano i valori esatti dei colori, o quando si usano colori non presenti nella palette con nome. HSL è spesso il meglio per la manipolazione programmatica dei colori.
HTML ha definito originalmente 16 nomi di colori di base. CSS ha esteso questo a 141 nomi in CSS3, e CSS Color Level 4 ha aggiunto 'rebeccapurple' e standardizzato l'intero set di colori X11 portando il totale a 148. Tutti i nomi di colori HTML sono nomi di colori CSS validi.