CSS Named Colors: Groups, Palettes, Facts, & Fun

Did you know that CSS has Named Colors? Yeah, you’re probably familiar with “white” or “black”. But did you know there are 148 named color keywords?

Some of them are silly, some are common, and some are down right useless. Who’s going to think, “You know what color we need here? Freakin’ blanchedalmond!”

I don’t know why, but I absolutely love named colors, so I put together this collection of things I thought were helpful, cool, interesting, or funny.

CSS Named Colors Organized By Group

Most of the time, when I’m looking for something to do with named colors, I’m looking for a complete list of all the choices. I couldn’t find one I liked, so I made this one.

Reds

brown
crimson
darkred
deeppink
firebrick
hotpink
indianred
lavenderblush
lightcoral
lightpink
maroon
mistyrose
palevioletred
pink
red

Oranges

bisque
coral
darkorange
darksalmon
lightsalmon
orange
orangered
papayawhip
peachpuff
salmon
tomato

Yellows

beige
cornsilk
darkgoldenrod
darkkhaki
gold
goldenrod
khaki
lemonchiffon
lightgoldenrodyellow
lightyellow
palegoldenrod
yellow

Greens

aquamarine
chartreuse
darkgreen
darkolivegreen
darkseagreen
darkslategray
darkslategrey
forestgreen
green
greenyellow
honeydew
lawngreen
lightgreen
lightseagreen
lime
limegreen
mediumaquamarine
mediumseagreen
mediumspringgreen
olive
olivedrab
palegreen
seagreen
springgreen
teal
yellowgreen

Blues

aliceblue
aqua
azure
blue
cadetblue
cornflowerblue
cyan
darkblue
darkcyan
darkturquoise
deepskyblue
dodgerblue
lightblue
lightcyan
lightskyblue
lightsteelblue
mediumblue
mediumturquoise
midnightblue
navy
paleturquoise
powderblue
royalblue
skyblue
steelblue
turquoise

Purples

blueviolet
darkmagenta
darkorchid
darkslateblue
darkviolet
fuchsia
indigo
lavender
magenta
mediumorchid
mediumpurple
mediumslateblue
mediumvioletred
orchid
plum
purple
rebeccapurple
slateblue
thistle
violet

Browns

antiquewhite
blanchedalmond
burlywood
chocolate
linen
moccasin
navajowhite
oldlace
peru
rosybrown
saddlebrown
sandybrown
sienna
tan
wheat

Greys (or Grays)

black
darkgray
darkgrey
dimgray
dimgrey
floralwhite
gainsboro
ghostwhite
gray
grey
ivory
lightgray
lightgrey
lightslategray
lightslategrey
mintcream
seashell
silver
slategray
slategrey
snow
white
whitesmoke

My Favorite CSS Named Colors

aqua
aquamarine
black
blue
blueviolet
chartreuse
coral
cornflowerblue
crimson
darkmagenta
darkorchid
darkturquoise
darkviolet
deeppink
deepskyblue
dodgerblue
fuchsia
gold
greenyellow
hotpink
indigo
lavender
lawngreen
lightblue
lightcoral
lightgreen
lightpink
lightsalmon
lightseagreen
lightskyblue
lime
limegreen
magenta
mediumaquamarine
mediumblue
mediumorchid
mediumpurple
mediumseagreen
mediumslateblue
mediumspringgreen
mediumturquoise
mediumvioletred
orangered
orchid
palegreen
palevioletred
plum
powderblue
rebeccapurple
royalblue
seagreen
skyblue
slateblue
springgreen
steelblue
teal
tomato
turquoise
violet
whitesmoke
yellowgreen

Cool Palettes made with CSS Named Colors

Just having a bunch of colors to choose from isn’t always helpful. I like having go-to palettes to make my life easier. I’m a big fan of neons, pastels, and purples, but I’m hardly a talented designer, so here we are. Please let me know if you have any more to add. :)

Bold

tomato
darkviolet
deeppink
deepskyblue
gold
yellowgreen

Pastel

violet
lightskyblue
gold
lightsalmon
mediumpurple
palegreen

Neon

blueviolet
fuchsia
red
aqua
chartreuse
yellow

Purps

darkslateblue
indigo
fuchsia
violet
lavender

Synthwave

darkslateblue
indigo
deepskyblue
fuchsia
deeppink
darkorange

Pointless Facts About CSS Named Colors

The colors “cyan” and “aqua” have the same hex value (#00ffff). As do “fuchsia” and “magenta” (#ff00ff).

“red” corresponds to #ff0000. Cool!
“blue” corresponds to #0000ff. Makes sense!
“green” corresponds to #008800. WTF!?
For #00ff00, you’ll want to use “lime”.
(Should we change RGB to RLB?)

It seems they couldn’t decide whether it should be spelled “gray” or “grey” so they went with both:

gray/grey
darkgray/darkgrey
slategray/slategrey
darkslategray/darkslategrey
dimgray/dimgrey
lightslategray/lightslategrey
lightgray/lightgrey

“gray” is darker than “darkgray” (which makes no sense at all):
“dimgray” > “gray” > “darkgray” > “lightgray”

There are four different “goldenrod” options but only “lightgoldenrodyellow” explicitly includes “yellow”.

Greens have the most representation (26) and oranges have the least representation (11). This is, however, subjective due to how I narrowed the categories down to 7 different colors. Many of the colors are between two options and could go either way. And colors will appear different across browsers, devices, brightness, hell, even the tilt of your screen.

And one last, not-so-pointless fact, the color “rebeccapurple” was added to the CSS spec in 2014 as a tribute to the life of Rebecca Alison Meyer, daughter of Eric Meyer.

CSS Named Colors That Make Me Hungry

bisque
blanchedalmond
chocolate
darkolivegreen
darkorange
darksalmon
honeydew
lightsalmon
lime
limegreen
mintcream
olive
olivedrab
orange
orangered
papayawhip
peachpuff
plum
salmon
tomato
wheat

CSS Named Colors With an Identity Crisis

“brown” is definitely a red.

“darkslategray”/“darkslategrey” are more like a dark green.

“darkslateblue” should have been darkslatepurple.

“blueviolet” is just purple.

CSS Named Colors For Exotic Dancers

burlywood
goldenrod
palegoldenrod
darkgoldenrod
hotpink
lavenderblush

CSS Named Colors For Ninjas

There’s really only one and it’s so good: “whitesmoke”

Thank you so much for reading. If you liked this article, and want to support me, the best ways to do so are to share it, sign up for my newsletter, and follow me on Twitter.

Originally published on austingil.com.

2 Comments

dimos
August 16, 2024 / 3:53 pm Reply
You have a website about css colors etc. but the css you used to build this is like a 6 years’ old kid.
- Austin
  August 19, 2024 / 6:04 pm Reply
  Yeah, because if it ain’t broke, don’t fix it. I use this website for writing, not for flexing my tech skills. That’s what my resume is for. Lol