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;
}

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 */
}

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.

• https://everycolor.vercel.app/

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

body {
  /* #14211a */
  background-color: quarterimperceptiblegreensomewhatlittleslighttealsomewhatbitgray;
  /* #c7eaf9 */
  color: navyhalfquartersomewhatlittleimperceptiblebluetealhalfquarterlittleslightaquahalfquarterslightimperceptibleinfinitesimalwhite;
}
a {
  /* #e4d923 */
  color: maroonhalfquarterbitredolivehalfsomewhatlittleimperceptibleyellowsomewhatimperceptibleinfinitesimalwhite;
}

Wow, so understandable! 😍