Defining Tint & Shade Colors
This morning I read another short article on color variable names. In “Stop Defining Useless Color Variables”, Jono Harrington writes:
One thing that I have been guilty of over the years, and that I have seen many other developers guilty of, is defining white and black as variables inside Sass. It’s time to call an end to this practice.
I totally agree here (with one exception, which I’ll get to in a bit).
Rather than defaulting back to static #000 and #fff, however, I recommend naming them something more semantic instead. I like $tint and $shade. After all, tinting a color means mixing it with white, while shading means mixing it with black. Now you can use those color constants straight as most people normally would, or you can mix them on the fly, which, of course, I’m a big fan of. By semantically naming your tint and shade colors, you open up the flexibility to use more interesting colors, which, in turn, can have a huge effect on your palette.
There’s Always An Exception To Every Rule
I think the one exception to the rule is if black is one of your official brand colors. I’m of the mind that you should give your brand colors human names, rather than semantic names like $brand-primary and $brand-secondary (unless you’re building customizable templates). Having a palette of $hot-rod-red, $amethyst, and #000 seems at least as silly as defining black as a constant.