Name your CSS Swatches after Crayola Colors

August 15, 2014 Nina Mehta

“Is this dark blue, dark dark blue or black grey blue2?”

When building and growing a product fluidly, we don’t always know the entire color palate or library at the beginning of the project. And that’s how we end up having style sheets with naming conventions like “dark-black-blue-grey.” That naming convention breaks down quickly.

My quick fix is to give everyone on the team a shared way to think and talk about the colors without ever having to rattle off hex codes or type them up in a spec doc.

The Name That Color tool will translate any hex code into a Crayola Color. Every time I create a new swatch in my library (the .ase file), I visit this hex tool site to give that swatch a name. Then I ask the devs to update their style guide with a new color.

It goes something like this: “We have a new color! Tall Poppy. Ready? It’s #b92228.”

From that moment forward, we refer to red as Tall Poppy instead of the hexidecimal code.

This strategy also works because sometimes the devs are not sure what color to use from the mockup. If I’m away from my desk, they use an eye-dropper and look up the eye-dropped hex code in the Name That Color tool and validate it’s a color we’re formally using.

“This looks like a new color!”
“Oh, that’s just rum swizzle!”

I love this approach because it gives everyone a shared language and rule-set and helps me keep my designs consistent. And all the color names are a little funny which offers us a good chuckle almost every time. Of course, you could come up with your own color names. But then you’d give up the chance to laugh at Crayola and make work a little more silly.

About the Author

Biography

More Content by Nina Mehta
Previous
Gartner Panel Reveals Stark Differences in Container Based PaaS Options
Gartner Panel Reveals Stark Differences in Container Based PaaS Options

This week’s Gartner panel on PaaS marked an important milestone in market education on fundamentally differ...

Next
Pivotal People—Simon Elisha, CTO & Senior Manager of Field Engineering, Australia and New Zealand
Pivotal People—Simon Elisha, CTO & Senior Manager of Field Engineering, Australia and New Zealand

In this post, CTO and Senior Manager of Field Engineering, Simon Elisha, shares his perspective on how he a...

Enter curious. Exit smarter.

Learn More