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 |
Converta entre formatos de cor hex, RGB, HSL e CMYK instantaneamente.
O CSS suporta 148 cores com nome definidas na especificação CSS Color Level 4, mais a palavra-chave especial 'transparent'. Estas incluem as 16 cores HTML originais, cores X11/SVG e adições do CSS3/4. Todas são suportadas em navegadores modernos.
Não, os nomes de cores CSS não diferenciam maiúsculas de minúsculas. 'Red', 'red', 'RED' e 'rEd' produzem o mesmo resultado. No entanto, camelCase (como 'lightBlue') não é usado — a forma padrão é tudo em minúsculas (lightblue).
Use cores com nome para prototipagem rápida e legibilidade (ex. 'red' é mais claro que '#ff0000'). Use códigos hex ou RGB para trabalho de design preciso onde os valores exatos de cor importam, ou ao usar cores que não estão na paleta com nome. HSL costuma ser o melhor para manipulação programática de cores.
O HTML originalmente definiu 16 nomes de cores básicos. O CSS estendeu isso para 141 nomes no CSS3, e o CSS Color Level 4 adicionou 'rebeccapurple' e padronizou o conjunto completo de cores X11, totalizando 148. Todos os nomes de cores HTML são nomes de cores CSS válidos.