Close
Glad You're Ready. Let's Get Started!

Let us know how we can contact you.

Thank you!

We'll respond shortly.

LABS
Name your CSS Swatches after Crayola Colors

“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.

Comments
  1. Keigo says:

    Fun idea! Please do share the swatch file!

  2. Mibs says:

    Thanks for this! I now wonder what will be the equivalent of crayola’s yellow green. lols. I often used online css generators— like: http://www.generatecss.com/css3/rgba/

Post a Comment

Your Information (Name required. Email address will not be displayed with comment.)

* Copy This Password *

* Type Or Paste Password Here *