A Sass micro-library for working with named colours

This week I published another one of my small projects, a Sass micro-library by the name of sass-named-colors. The purpose of this is simple: provide an easy interface to a standardized list of 1,500+ named colours originally compiled by Chirag Mehta and converted to Sass by James Pearson. No need to puzzle out hex values; just use k-colour(emerald), k-colour(monsoon), k-colour(cloud), and so on. The library also features aliased functions and variable names for those who prefer to work with colours (the non-American spelling), admittedly a bit of a pedantic flourish. Plain old “colors” is the default, though personally I stick with the spelling I am used to in my own work (and in this post).

Installation is a breeze via Bower: bower install sass-named-colors -D. This library has no dependencies but requires Sass 3.3+ due to reliance on the map-get() function and an approach outlined by Erskine Design.

This library ships with one function: k-colour($colour, $fallback, $library). Only $colour is required; the remaining arguments are mainly for internal use. Example:

@import "sass-named-colors/named_colours";

.element {
  color: k-colour(red);
  &:hover {
    color: rgba(k-colour(orange), .9);
  }
}

To extend the built-in colours on a per-project basis:

$k-colours: map-merge($k-colours, (
  norse-blue:     #5cb6cc,
  suomi-blue:     #559dd1,
  steel-sky:      #444547,
  jove:           #24221E
));

Need a tool to browse the options? Try the colour picker on the original Name That Color project page.

Related posts

Respond

Markdown and HTML enabled in comments.
Your email address will not be published. Required fields are marked *