Auto-magically generate Sass color variables using palettes from COLOURLovers.
JavaScript CoffeeScript
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


Build Status Dependency Status NPM version

Auto-magically generate Sass color variables using palettes from COLOURLovers.



For day-to-day use, I recommend using npm to install sass-colour-lover globally.

npm install -g sass-colour-lover


If you plan on contributing to this project, you can install sass-colour-lover locally using git.

Clone the project:

git clone

Navigate into the project directory and the build dependencies:

npm install



Install the module globally (may require administrative access)

npm install . -g

Or, if you prefer, link it (may require administrative access)

npm link

At this point, the sass-colour-lover command will be available from your command prompt.


At a minimum, the ID of the palette needs to be passed to sass-colour-lover. There are two ways to do this.

The easiest way is go to COLOURLovers and copy the address of a palette you like. After that, simply paste the url in as a parameter.


# These will also work:

This generates a Sass file called _palette.scss in the current working directory. The contents of this file appear like this:

// Palette: Jujubee
// Author: jaymepollock

$pomegranate-posey:   rgb(201,11,78);
$down-by-the-sea:     rgb(8,20,52);
$oj:                  rgb(201,132,11);
$royale:              rgb(61,16,96);
$purple-day:          rgb(136,12,114);

If you would like to generate Sass variables from multiple palettes, you can use the --ids= parameter. Pass the IDs as a comma seperated list.

sass-colour-lover --ids=649208,32049,12345

The contents of the generated file appear like so:

// Palette: Spavian
// Author: Spammy

$ex8at:     rgb(104,119,128);
$phi0phi:   rgb(80,87,91);
$yum:       rgb(88,98,103);
$won7phi:   rgb(104,113,117);
$ine8ey:    rgb(152,164,169);

// Palette: my front porch
// Author: realitybites

$codex:                rgb(177,62,31);
$red-light-district:   rgb(140,35,50);
$satisfying-auburn:    rgb(171,72,0);
$spyglass:             rgb(189,124,32);
$doormat:              rgb(113,56,13);

// Palette: thrill worth seeking
// Author: lesaint

$cetiedil:             rgb(115,75,6);
$love-pink:            rgb(186,48,87);
$disposition:          rgb(160,173,62);
$cotyl:                rgb(236,255,92);
$green-clay:           rgb(140,125,28);



Specifies where you would like to save your file.

# This produces a file called '_colors.scss'

sass-colour-lover --ids=3143 --file=_colors.scss

# Same file, one directory up

sass-colour-lover --ids=3143 --file=../_colors.scss


Generate colors in either hexadecimal or RGB formats.

sass-colour-lover --ids=72313 --color=hex


// Palette: cutty sark.
// Author: bijouloveshues

$earl-grey:              #DBDADD;
$call-bradly:            #51524C;
$landmark-restoration:   #2D3336;
$full-english:           #DDBA47;
$maritime-relic:         #285E7E;

Variable Names

sass-colour-lover tries its very best to generate variable names based on the names selected by the palette's authors. That being said COLOURLovers allows for some pretty gnarly naming conventions that sometimes do not mesh well with Sass. There are likely to be edge cases that haven't been caught. Here are some things that get sanitized by sass-colour-lover

Names with Leading Numbers

Numbers cannot be used as the first character of a variable name. If detected, the string 'color-' is prepended to the start of the variable name.

// Palette: 2
// Author: heheherrr

$spirit:      rgb(253,216,189);
$flagwhite:   rgb(233,214,212);
$fd5541:      rgb(253,85,65);
$color-1:     rgb(41,44,65);
$once-was:    rgb(242,176,160);

Duplicate Names

If a duplicate name is detected, a simple counter is appended to the end of all variables that share the name.

// Palette: That's Not Butter!?!
// Author: retsof

$buffered-toast:     rgb(223,162,70);
$buttered-toast:     rgb(253,205,10);
$buttered-toast-1:   rgb(240,240,83);
$buttered-toast-2:   rgb(209,158,102);
$buttered-toast-3:   rgb(216,173,63);

Names with No Value

Sometimes names are entirely comprised of invalid characters. In which case, the color name is changed to color.

Names that are crazy

They exist... and we love them anyway.

// Palette: ๓๏ภ๏t๏ภ๏ยร * l๏שє
// Author: -Yonder-

$turkwer:   rgb(200,214,186);
$anew:      rgb(169,166,157);
$l----l:    rgb(121,73,116);
$l:         rgb(168,203,166);
$l-1:       rgb(159,116,132);

In the Works

  • Appending output to an existing stylesheet
  • Add option to use a different type of divider (i.e. variable_name as opposed to variable-name)