Chromatic Sketch Plugin

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

New in version 2.0.0

• A proper UI that let’s you preview and customize the gradient or color scale
• You can now use the Lch, HSL and RGB color modes in addition to Lab
• Support for colors with alpha

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.

Chromatic Sketch -> Create Color Scale

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

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. Build plugin: npm run build

Created by

Petter Nilsson
Twitter
Website

License

ISC