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!

uhyo_ profile image πŸˆšοΈγ†γ²γ‚‡πŸ€ͺ ・1 min read

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! 😍

Discussion (6)

Editor guide
inhuofficial 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. πŸ‘