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