Getting Up To Speed

If you're not familiar with effective methods to name and organize your CSS colors with SASS, take a moment to read through Sacha Greif's SASS & Color Variables approach. The article outlines abstracting your CSS color values into SASS color variables for easier to manage and maintain style sheets. Building on this method, Landon Schropp outlined a color variable naming convention to help combat some problematic naming patterns in his Sass Color Variables That Don’t Suck using Name That Color.

The Problem

While Landon's approach has its merits I've found it more difficult to remember the actual color associated to variable names like $heliotrope and $jonquil [albeit a moot point for IDEs with color preview capabilities]. Conversely I've found the dark, darker, darkest taxonomy helpful but difficult to scale beyond 'est'. Maybe 'ester'?

I Have Seen The Lightness

A solution I've been using is to first bucket like colors into a simple name red, orange, yellow, green, cyan, blue, purple, and pink. So #f00 becomes $red. That way from a glance I know exactly what color I'm dealing with. Next I apply that colors HSL lightness value. Lightness is a great way to categorize colors as it represents a numeric value from 0 being darkest to 100 being the lightest. So our #f00 becomes $red50, #bada55 becomes $green59, and #99f0ef becomes $cyan77. From a quick glance we can now get a general sense of the color we're working with.

But That's A Lot Of Work

Never fear. I've created an easy way to bulk add all your hex values and grab their respective SASS variable.

Happy Variablizing


2,176 5 29