Skip to main content
HashnodeArticles by Austin GilArticles by Austin Gil

Command Palette

Search for a command to run...

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

Published
•4 min read
CSS Named Colors: Groups, Palettes, Facts, & Fun
A
Austin Gil

I’m a web developer creating award-winning digital products for international nonprofits, growing startups, and government agencies. In my free time I write articles, contribute to open-source projects like Vuetensils and Particles CSS, live stream on YouTube and Twitch, host The Function Call podcast, and speak at events.

Note: Due to publishing limitations, the groups of colors in this post are inserted as images. For the original version with embedded HTML and clickable names, see the original post https://austingil.com/css-named-colors/

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

Oranges

Yellows

Greens

Blues

Purples

Browns

Greys (or Grays)

My Favorite CSS Named Colors

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

Pastel

Neon

Purps

Synthwave

Pointless Facts About CSS Named Colors

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

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

“dimgray” is darker than “gray” which is darker than “darkgray” (which makes no sense at all) which is darker than “lightgray” (ok, back on track).

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, please share it. It’s one of the best ways to support me. You can also sign up for my newsletter or follow me on Twitter if you want to know when new articles are published.

Originally published on austingil.com.

#css#web-development#programming-blogs#software-development#frontend-development
81 views

Comments (1)

Join the discussion
M
Maciek Fitzner3y ago

The CSS color names is one of those things I haven't really explored until very recently. My default mode is to just grab the hex/hsl values. But white working on something last month I finally caved and used the names. Lime came up most frequently. Which got me thinking: if it's #0f0 why is it called lime, not just green? And why, in that case, is green #080? This undermines the whole RGB naming convention. It should be RLB, then Also, whoever decided to call rgb(221, 160, 221) - or, should I say, rlb(221, 160, 221) "plum" has probably never seen the real thing. Same with indigo. Which looks like the color of an actual plum. Don't even get me started on the magenta/fuchsia thing. I'm team magenta, all the way. And team cyan. And team gray. Also, why is octarine not a thing? This was a fun read!. Had some good laughs, and learned something, too!

1
A
Austin Gil3y ago

Wow. I'd say your comment is even more entertaining than the article. You really DID fall down the named colors rabbit hole. Lol.

In most real projects, I'll reach for hex or rgba, but I really like named colors on personal projects because they're fun/quirky and they offer a simple, built-in design token system (sort of). So I have less to think about.

  1. I did not realize that about the "lime" vs. "green" thing. I may need to add it to the article.
  2. Yeah, you really are just touching the tip of the iceberg regarding some names not aligning with their namesakes. There are so many color names that are out of touch with reality. What the heck is a papayawhip? peru? That's a country.
  3. I'm teams magenta, cyan, grey. But lately I've been liking fuchsia because I finally started spelling it right without looking.
  4. I've never even heard of octarine. Led me to some more interesting reads.

Thanks so much for the comment. It was lovely!

M
Maciek Fitzner3y ago

Austin Gil I've noticed the green isn't #0f0 when I did the reainbow gradient with names, and then with hsl via cycling the hue angle. It's also weird that the hue-rotate filter seems a misnomer. You'd expect it to cycle through colors of the rainbow - but what it is, in fact, is hue-chroma: colors go crazy in ways that I can't quite fathom. Here's an example from an old codepen of mine: https://codepen.io/MackFitz/pen/oNZMXeZ - these aren't all rainbow colors. Oh, and speaking of octarine, I thought about it when you mentioned Rebecca Purple. Having a CSS octarine - wildly inaccurate as it might've been - would've been a nice way to commemorate Sir Terry.

A
Austin Gil3y ago

Maciek Fitzner Whoa, that Codepen is awesome. I could hardly believe it was no-js

M
Maciek Fitzner3y ago

Austin Gil I made it my life's mission to use CSS over anything more convenient, at all cost ;) I know how much easier it'd be to use JS, SVG or, say, Three,js - but it somehow feels more noble to suffer for art, and try things no sensible person would bother doing (at least not with just CSS). This I consider my craziest: https://codepen.io/MackFitz/pen/jOxzKmL

1
A
Austin Gil3y ago

Maciek Fitzner Yeah, I can relate. I try to make the right call in practice, but I definitely have enjoyed the challenge of purely CSS only solutions.

More from this blog

Articles by Austin Gil

55 posts