vnsavitri/chromatic-sketch

Sketch plugin for creating good-looking and perceptually uniform gradients and color scales.

Chromatic Sketch

Create good-looking and perceptually uniform gradients and color scales (using Chroma.js and the Lab color space)

Background

I came across this blog post recently. It opened my eyes to the Lab color space, and how you can use it to create perceptually uniform gradients and color scales with SASS. Chroma.js is the underlying library powering it. Check it out if you want a deeper understanding of the Lab color space and why it's good for creating color scales. Basically, it's a color space that, unlike RGB, was built to mirror the visual response of the human eye. That makes it very well suited for interpolating colors.

I thought this technique would be useful in design tools as well, and was kind of surprised that I couldn't find any Sketch plugins that implemented it. So I created this :)

Usage

Chromatic Sketch -> Fix Gradient

This command will take the gradient of the selected shape and add new color stops to create a more aesthetically pleasing one.

Before:

After:

Chromatic Sketch -> Create Color Scale

This command will create a scale between the fill colors of two selected shapes.

Before:

After:

Install instructions

1. Download .zip
2. Extract contents
3. Navigate into the extracted folder and open chromatic-sketch.sketchplugin
4. Follow the on-screen prompts

Building from source

1. Install dependencies: npm install
2. Install skpm: npm install -g skpm
3. Build plugin: skpm build