Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
January 25, 2023 05:37 pm GMT

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

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, youre 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. Whos going to think, You know what color we need here? Freakin blanchedalmond!

I dont 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 Im looking for something to do with named colors, Im looking for a complete list of all the choices. I couldnt 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 isnt always helpful. I like having go-to palettes to make my life easier. Im a big fan of neons, pastels, and purples, but Im 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 couldnt 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

Theres really only one and its so good: whitesmoke

Thank you so much for reading. If you liked this article, please . Its 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.


Original Link: https://dev.to/austingil/css-named-colors-groups-palettes-facts-fun-4h2a

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To