Colour picker for Sass

If you’re designing in your browser it’s handy to have a visual colour picker. Before CSS preprocessors arrived, ColorZilla was my tool of choice. This is a simple way to copy the Sass code for a colour instead of a hex, rgb or hsl value.

Update 15 August 2014

Colours and tones are now in separate Sass maps. Tones are calculated using the tint and shade functions. There is also a new layout inspired by 0to255.com.

View demo

Here’s a palette that I created on paletton.com

I read a blog post written by Tom Davies about Friendlier colour names with Sass maps and decided this approach would be handy for looping through all the colours in this palette.

This palette expressed as a Sass map:

$palette: (
  green: (
    lightest: #6CCD93,
    lighter:  #43B571,
    base:     #26A65A,
    darker:   #0F8D42,
    darkest:  #02702F,
  ),
  lime: (
    lightest: #B1EC7D,
    lighter:  #96E153,
    base:     #7ACE2F,
    darker:   #5CB012,
    darkest:  #438C03,
  ),
  fuschia: (
    lightest: #EB7CA0,
    lighter:  #E0527F,
    base:     #CD2F61,
    darker:   #AF1244,
    darkest:  #8B032E,
  ),
  orange: (
    lightest: #FF9E87,
    lighter:  #FC7B5D,
    base:     #E75735,
    darker:   #C53614,
    darkest:  #9C2103,
  )
);

Note, as Tom mentioned, tones may be… derived programatically from the base colour with Sass’s colour functions. e.g. lighter: mix(white, #E75735, 20%)

The following colour function allows you to write colour($colour, $tone) in your SCSS and if you like to use both functional and descriptive variable names, you can write something like:

// _base.scss

@function colour($colour, $tone: 'base') {
    @return map-get(map-get($palette, $colour), $tone);
}

$link-color: colour(fuschia,darker);
$link-hover-color: colour(fuschia,base);

// style.scss

a {
  color: $link-color;
  &:focus, &:hover {
    color: $link-hover-color;
  }
}

I made a web page for choosing a colour and copying its code, which you can pop into your projects. It uses a little PHP and JavaScript and is easily customised per project by editing a couple of PHP arrays and the Sass map for your palette.

View the demo.

Grab the code on GitHub.