Awesome Open Source
Awesome Open Source


Advanced color manipulation for node-sass. Read the API docs ›

Quick start

Chromatic is a node-sass wrapper around chroma.js with a few Sass-specific additions.

Here are a few things Chromatic can do for you:

  • Create perceptually uniform gradients using the conventional CSS3 linear-gradient syntax
  • Procedurally generate aesthetically pleasing color scales
  • Define colors in a wide range of color spaces
  • Analyze and manipulate colors

Because of it's ability to support the LAB color space, Chromatic's color manipulation abilities can act as drop-in improvements for Sass's native color manipulation functions such as darken, saturate, and mix.


Install chromatic via NPM.

npm install chromatic-sass


To use Chromatic, provide it in your node-sass configuration.

var sass = require "node-sass"
var chromatic = require "chromatic-sass"

  file: scss_filename,
  functions: chromatic
}, function(err, result) { /*...*/ });

Chromatic returns an object defining custom functions that can be used with any node-sass build system. To provide your own custom javascript Sass functions alongside chromatic, merge chromatic with your custom functions object before providing it in your node-sass configuration.

var _ = require "lodash";
var myFunction = {
    'echoString($str)': function(str) {
      return new sass.types.String(str);
var sassFunctions = _.merge(chromatic, myFunction);


Utilize Chromatic functions in your stylesheets as you would any other Sass function:

.element {
  background-image: chromatic-gradient(to right, blue, red);


To compile the coffee-script source, npm install, then:

npm run build


Chromatic is written by Max Luster


Released under MIT license.

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
coffeescript (1,463
sass (456
lab (44
gradients (20

Find Open Source By Browsing 7,000 Topics Across 59 Categories