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 |
Convierte entre formatos de color hex, RGB, HSL y CMYK al instante.
CSS admite 148 colores con nombre definidos en la especificación CSS Color Level 4, más la palabra clave especial 'transparent'. Estos incluyen los 16 colores HTML originales, colores X11/SVG y adiciones de CSS3/4. Todos son compatibles con navegadores modernos.
No, los nombres de colores CSS no distinguen entre mayúsculas y minúsculas. 'Red', 'red', 'RED' y 'rEd' producen el mismo resultado. Sin embargo, camelCase (como 'lightBlue') no se utiliza — la forma estándar es todo en minúsculas (lightblue).
Usa colores con nombre para prototipos rápidos y legibilidad (p.ej. 'red' es más claro que '#ff0000'). Usa códigos hex o RGB para trabajo de diseño preciso donde importan los valores exactos de color, o cuando uses colores que no están en la paleta con nombre. HSL suele ser mejor para la manipulación programática de colores.
HTML definió originalmente 16 nombres de colores básicos. CSS extendió esto a 141 nombres en CSS3, y CSS Color Level 4 añadió 'rebeccapurple' y estandarizó el conjunto completo de colores X11 llegando a un total de 148. Todos los nombres de colores HTML son nombres de colores CSS válidos.