The CSS named color system is notoriously bad: keywords are often difficult to remember (navajowhite), illogical (darkgrey actually displays lighter than dimgray) and/or visually questionable (lime and fuchsia verge on the bilious).

Until CSS custom named hues and variables are widely supported, preprocessors remain the best way to create your own custom color names. Defining site colors in Sass creates a cohesive color library that can be used to style content quickly and easily, with named colors that are significantly easier to remember and type than their hex equivalents. However, it can be burdensome to build a decent color library with a logical naming system.

Inspired by Ingrid Sundberg’s color thesaurus, as well as the work of Adam Morse and Joe Hanson, I’ve created a Sass visual color library for site prototyping, design and development. These new defaults – 204 keywords in all – use evocative and logical names, making for easy implementation. As much as possible, the keywords reference familiar hues from the natural world. In some cases, they replace the classic CSS keyword names with more visually appealing colors.

Using the color keyword library in Sass is easy. From the Github repo, include _color-map.scss and _color-generator.scss in your project:

@import 'maps/_color-map.scss';@import 'functions/_color-generator.scss';

This provides access to any of the named colors in your Sass:

body { background: color(sky); }

If you’re not yet using Sass, I’ve presented the equivalent hex colors here for your convenience; a copy of the colors and Sass code is also available at CodePen, and on the related GitHub Pages site.

Of course, outside the scientific realm, color is entirely subjective: you’re very welcome to create your own variations in the color map, or change them to suit your tastes, while the traditional color keywords remain entirely available to you. I look forward to any use and feedback!

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
Check out the CodePen demo for this article at https://codepen.io/dudleystorey/pen/BGrkw