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.
- Organized By Group
- My favorite colors
- Color palettes
- System Colors
- Pointless facts
- Colors that make me hungry
- Colors experiencing identity crisis
- Names for exotic dancers
- Names that sound like ninjas
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
CSS Has Dynamic System Colors Too
CSS Color Module Level 4 also includes 19 special keywords that correspond to parts of the browser that the system colors by default. Many are not defined in user agent stylesheets, but some are really cool. For example, Field, FieldText, Canvas, CanvasText, ButtonFace, and ButtonText all change color with light vs. dark mode.
- AccentColor – Background of accented user interface controls.
- AccentColorText – Text of accented user interface controls.
- ActiveText – Text in active links. For light backgrounds, traditionally red.
- ButtonBorder – The base border color for push buttons.
- ButtonFace – The face background color for push buttons.
- ButtonText – Text on push buttons.
- Canvas – Background of application content or documents.
- CanvasText – Text in application content or documents.
- Field – Background of input fields.
- FieldText – Text in input fields.
- GrayText – Disabled text. (Often, but not necessarily, gray.)
- Highlight – Background of selected text, for example from ::selection.
- HighlightText – Text of selected text.
- LinkText – Text in non-active, non-visited links. For light backgrounds, traditionally blue.
- Mark – Background of text that has been specially marked (such as by the HTML mark element).
- MarkText – Text that has been specially marked (such as by the HTML mark element).
- SelectedItem – Background of selected items, for example a selected checkbox.
- SelectedItemText – Text of selected items.
- VisitedText – Text in visited links. For light backgrounds, traditionally purple.
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 Names That Sound Like Ninjas
- whitesmoke
Thanks for stopping by my corner of the internet. Here, there are no ads, trackers, paywalls, accounts, etc. It's hard, but worth the better experience. If you'd like to keep this site up, consider hiring me, making a donation, buying something (soon), leaving a comment, or sharing. It helps more than you know. I'm glad you're :)
You have a website about css colors etc. but the css you used to build this is like a 6 years’ old kid.
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
And thanks for that! Too many seem to have forgotten the adage that sometimes, Less is More. Just because you can, doesn’t always mean you should.
Haha. Thanks, Sen. I won’t judge someone else keeping their personal sites up using the latest tech. It’s a great way to sharpen your skills. But that’s just not the place for this site. I like to build new things for that :)
[…] Imagine a space where vintage charm mingles effortlessly with sleek modern lines, where bold hues dance alongside soft pastels, and where each piece of furniture tells its own story while contributing to a larger […]
[…] swapped out the hex color code for a CSS named color, and the bug went away. I don’t know enough about WordPress to understand why it was […]