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 |
Convert between hex, RGB, HSL, and CMYK color formats instantly.
Type a CSS color name into the search field and inspect its swatch and numeric values. Start with red in the example below, then copy the name or hexadecimal value that your destination expects. Use the displayed RGB channels when working in an application that needs separate numeric inputs. Matching the copied value to the preview helps catch similarly named colors before they enter your stylesheet.
Named colors are fixed values rather than descriptions that adapt to a brand or theme. Two names can represent the same RGB color, and a familiar everyday name may not be a supported CSS keyword. This reference does not evaluate text contrast for a complete interface. Compare your selected color with the actual background and check the result in the browser where the design will be used.
Search: red
CSS name: red
HEX: #ff0000
RGB: rgb(255, 0, 0)
CSS supports 148 named colors defined in the CSS Color Level 4 specification, plus the special keyword 'transparent'. These include the 16 original HTML colors, X11/SVG colors, and additions from CSS3/4. All are supported in modern browsers.
No, CSS color names are case-insensitive. 'Red', 'red', 'RED', and 'rEd' all produce the same result. However, camelCase (like 'lightBlue') is not used โ the standard form is all lowercase (lightblue).
Use named colors for quick prototyping and readability (e.g. 'red' is clearer than '#ff0000'). Use hex codes or RGB for precise design work where exact color values matter, or when using colors not in the named palette. HSL is often best for programmatic color manipulation.
HTML originally defined 16 basic color names. CSS extended this to 141 names in CSS3, and CSS Color Level 4 added 'rebeccapurple' and standardized the full X11 color set bringing the total to 148. All HTML color names are valid CSS color names.