DEV Community

Cover image for What If Every Color Is Given Its Own Name? Here It Is!

What If Every Color Is Given Its Own Name? Here It Is!

What is the most comprehensive way of expressing colors in CSS? For a majority of developers, it should be color names.

a {
  color: blue; /* <- color name for #0000ff */
  text-decoration: none;
Enter fullscreen mode Exit fullscreen mode

However, color names have one critical downside; not all colors are given names. While the sRGB color space can express 16,777,216 colors, only less than 0.002% of them are given names by the CSS standard.

That's why the author has created Everycolor. With this package, all colors are given systematic names. It comes with a PostCSS plugin that converts the Everycolor names to the #123456 notation, so you can use the Everycolor names in your CSS now!

Let's see what the Everycolor names look like.

p {
  background-color: redhalfwhite; /* #ff8080 */
Enter fullscreen mode Exit fullscreen mode

Everycolor gives the name redhalfwhite to #ff8080, as this color is halfway towards white (#ffffff) from red (#ff0000). Wow, how easy it is!

Then, can you guess what name #ff4040 is? Yes, it's redquarterwhite. Now you know how to express colors you want to use!

With Everycolor, you can express every single color with names rather than hard-to-recognize numbers.

We also provide a website where you can convert color codes to Everycolor names. This is very useful for learning Everycolor quickly.

At the end, let's see a little more complicated examples.

body {
  /* #14211a */
  background-color: quarterimperceptiblegreensomewhatlittleslighttealsomewhatbitgray;
  /* #c7eaf9 */
  color: navyhalfquartersomewhatlittleimperceptiblebluetealhalfquarterlittleslightaquahalfquarterslightimperceptibleinfinitesimalwhite;
a {
  /* #e4d923 */
  color: maroonhalfquarterbitredolivehalfsomewhatlittleimperceptibleyellowsomewhatimperceptibleinfinitesimalwhite;
Enter fullscreen mode Exit fullscreen mode

Wow, so understandable! 😍

Top comments (6)

grahamthedev profile image
color: greenhalfquartersomewhatbitslightimperceptiblelimetealhalfsomewhatlittleslightimperceptibleaquaquarterlittleimperceptibleinfinitesimalwhite
Enter fullscreen mode Exit fullscreen mode

I spent way too long trying to find one that long (and lost the hex colour in the process!), guess I will have to install it just to find out what it was 🀣🀣

I have realised this actually could serve a purpose.

Write colours down in a pad as hex values, use the output as your password, it would take eons to crack! Damn, now I can't use that as someone will add all 16 million colours to a dictionary πŸ˜‹

nikolab profile image
Nikola Betica

This is hilarious πŸ˜‚

lifelongthinker profile image

This is beyondincrediblysuperawesomelytotallyhilarious. But it's just a joke, right? Please tell me it's just for fun, not a serious proposal πŸ€£πŸ˜… (There is nothing wrong with fun!!)

alvaromontoro profile image
Alvaro Montoro • Edited

Isn't this how Tailwind works? πŸ˜‹

zynth17 profile image
Christopher Reeve

This! 🀣🀣

filix profile image
Filip Ilić

The last sentence gives me hope that it is a joke. πŸ‘