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

This page provides resources for working with CSS Name Colors. It contains Named Color groups, palettes, favorites, and even fun facts.

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.

Leave a Reply

Your email address will not be published. Required fields are marked *