Chromatic

Advanced color manipulation for postcss. Read the API docs ›

Quick start

Chromatic is a postcss wrapper around chroma.js with a few postcss-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

Install chromatic via NPM.

npm install chromatic-postcss

Usage

To use Chromatic, provide it in your postcss configuration.

Gulp

 
var postcss    = require('gulp-postcss');
var sourcemaps = require('gulp-sourcemaps');
 
gulp.task('css', function () {
  return gulp.src('src/**/*.css')
      .pipe( sourcemaps.init() )
      .pipe( postcss([ require('chromatic-postcss') ]) )
      .pipe( sourcemaps.write('.') )
      .pipe( gulp.dest('build/') );
});

Webpack

module.exports = {
    module: {
        loaders: [
            {
                test:   /\.css$/,
                loader: "style-loader!css-loader!postcss-loader"
            }
        ]
    },
    postcss: function () {
        return [require('chromatic-postcss')];
    }
}

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);
}

Build

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

npm run build

Author

Chromatic is written by Max Luster and ported to postcss by Christian Schlensker

License

Released under MIT license.