Something has always attracted me to the CSS Named Colors. Probably it’s the fact that, in a world where more colors pop up every day (biology, technology, hardware, business, frameworks), CSS named colors remain constant.
They are dependable. They are consistent. They have quirky names, and I like that.
Most important, they are limited. They present a narrow scope of options to choose from, which means less to think about. For a simple guy like me, the less to think about, the better.
A while back, I wrote a post putting everything I could ever want to know (and more) about CSS named colors in a single place. If I need to look something up that relates to named colors, I know where to go.
Today’s post is something of a follow-up.
I found that, even with the existing limit of options, there are still too many named colors to remember. So I’ve simplified my life again by reducing the options to nine: black, white, grey, red, orange, yellow, green, blue, and purple. That’s it. Those are my options.
This was not possible at the time CSS module 4 was released, but it is today, thanks to CSS custom properties.
Now, to be fair, using Custom Properties to assign easy-to-remember and easy-to-maintain color palettes is hardly a novel idea. But what if we squish them together with every named color that fits the description?
It’ll be easier if I show you what I’m talking about…
@layer colors {
:root {
--black: black; /* black */
--white: whitesmoke; /* white snow ivory mintcream ghostwhite floralwhite whitesmoke ghostwhite */
--grey: darkgray; /* darkgray darkgrey grey gray */
--red: orangered; /* orangered tomato indianred */
--orange: darkorange; /* orange darkorange */
--yellow: gold;
--green: limegreen; /* green forestgreen limegreen */
--blue: dodgerblue; /* dodgerblue blue */
--purple: mediumorchid; /* darkviolet purple rebeccapurple mediumorchid darkmagenta */
}
}In this snippet, I create each of my variables and assign them to my preferred named color for that category. After the variable assignment, in a comment block, I include every CSS named color that could also be assigned to its respective variable.
Why does this matter?
For a number of reasons:
- I can copy/paste the same CSS snippet across projects
- I can use the same naming conventions across projects
- I can easily change colors for the project I’m working on
- I can find every available option without leaving my editor
- And last but not least, this…
Because my editor shows a visual representation of any color, it’s easy to visually scan the available color options, even the ones in the commented-out blocks. Additionally, the editor shows me which colors work better with white vs. black text.
Ok, I also lied when I said I only use nine color options. As you can see, there are five different palettes with seven colors each, plus black and white, for a total of 37 🤷
Here’s a copy of the full list if you like:
@layer palettes {
:root {
/*
* PALETTES
*/
--black: black; /* black */
--white: whitesmoke; /* white snow ivory mintcream ghostwhite floralwhite whitesmoke ghostwhite */
--grey: darkgray; /* darkgray darkgrey grey gray */
--red: orangered; /* orangered tomato indianred */
--orange: darkorange; /* orange darkorange */
--yellow: gold;
--green: limegreen; /* green forestgreen limegreen */
--blue: dodgerblue; /* dodgerblue blue */
--purple: mediumorchid; /* darkviolet purple rebeccapurple mediumorchid darkmagenta */
--greyLight: lightgrey; /* gainsboro lightgray lightgrey */
--redLight: pink; /* lightpink plum pink lavenderblush mistyrose */
--orangeLight: peachpuff; /* bisque peachpuff papayawhip seashell */
--yellowLight: lemonchiffon ; /* lightyellow beige cornsilk lemonchiffon navajowhite lightgoldenrodyellow */
--greenLight: palegreen; /* honeydew palegreen aquamarine mediumspringgreen */
--blueLight: lightblue; /* lightblue lightcyan lightskyblue skyblue aliceblue azure paleturquoise powderblue */
--purpleLight: thistle; /* lavender thistle plum */
--greyDark: dimgray; /* dimgrey dimgray darkslategray darkslategrey slategray slategrey */
--redDark: firebrick; /* darkred firebrick brown maroon */
--orangeDark: chocolate; /* orangered coral chocolate */
--yellowDark: darkgoldenrod ; /* goldenrod darkgoldenrod darkkhaki */
--greenDark: darkgreen; /* green darkgreen darkolivegreen olivedrab olive seagreen cadetblue */
--blueDark: darkblue; /* darkblue mediumblue midnightblue navy */
--purpleDark: darkslateblue; /* indigo darkslateblue */
--greyNeon: lightgray; /* silver lightgray lightgrey */
--redNeon: red; /* crimson red deeppink mediumvioletred */
--orangeNeon: orange; /* orange darkorange*/
--yellowNeon: yellow; /* yellow */
--greenNeon: chartreuse; /* chartreuse lime limegreen lightgreen greenyellow yellowgreen springgreen lawngreen springgreen */
--blueNeon: cyan; /* aqua cyan darkturquoise deepskyblue turquoise */
--purpleNeon: fuchsia; /* blueviolet darkorchid fuchsia magenta */
--greyPastel: lightslategray; /* lightslategray lightslategrey */
--redPastel: hotpink; /* crimson hotpink violet orchid salmon lightcoral palevioletred plum */
--orangePastel: coral; /* coral tomato lightsalmon darksalmon lightsalmon sandybrown */
--yellowPastel: khaki; /* khaki palegoldenrod */
--greenPastel: mediumaquamarine; /* darkseagreen lightgreen lightseagreen mediumaquamarine mediumseagreen */
--bluePastel: cornflowerblue; /* royalblue lightseagreen teal darkcyan cornflowerblue steelblue mediumturquoise */
--purplePastel: mediumpurple; /* slateblue mediumpurple mediumslateblue */
}
}Something else I’ve also been playing with is the idea of creating alternative variables that simply work as convenience improvements by offering multiple, intuitive names for the other variables. For example, both --grey and --gray mean the same thing, as well as “neon”, “loud”, and “vibrant”, and “pastel”, “muted”, and “dull”.
@layer palettes {
:root {
/* ... */
/*
* ALTERNATIVES
*/
--gray: var(--grey);
--grayLight: var(--greyLight);
--grayDark: var(--greyDark);
--grayBright: var(--greyBright);
--grayPastel: var(--greyPastel);
--greyLoud: var(--greyNeon);
--grayLoud: var(--greyNeon);
--redLoud: var(--redNeon);
--orangeLoud: var(--orangeNeon);
--yellowLoud: var(--yellowNeon);
--greenLoud: var(--greenNeon);
--blueLoud: var(--blueNeon);
--purpleLoud: var(--purpleNeon);
--greyVibrant: var(--greyNeon);
--redVibrant: var(--redNeon);
--orangeVibrant: var(--orangeNeon);
--yellowVibrant: var(--yellowNeon);
--greenVibrant: var(--greenNeon);
--blueVibrant: var(--blueNeon);
--purpleVibrant: var(--purpleNeon);
--greyMuted: var(--greyPastel);
--redMuted: var(--redPastel);
--orangeMuted: var(--orangePastel);
--yellowMuted: var(--yellowPastel);
--greenMuted: var(--greenPastel);
--blueMuted: var(--bluePastel);
--purpleMuted: var(--purplePastel);
--greyDull: var(--greyPastel);
--redDull: var(--redPastel);
--orangeDull: var(--orangePastel);
--yellowDull: var(--yellowPastel);
--greenDull: var(--greenPastel);
--blueDull: var(--bluePastel);
--purpleDull: var(--purplePastel);
}
}I’m still workshopping much of this, so consider it a loose concept. Still, it’s been fun to mess around with, and I’d love to hear your thoughts.
Before closing, I should also mention that a lot of my work these days leans towards small, solo-dev projects. Also worth repeating is my strange fascination with CSS named colors. This introduces a unique parameter I imagine most folks don’t care about. What works for me may not work for everyone, but this is easy enough to play around with and see how it feels for you.
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 :)
