Chromatic Sketch
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
- Download .zip
- Extract contents
- Navigate into the extracted folder and open chromatic-sketch.sketchplugin
- Follow the on-screen prompts
Building from source
- Install dependencies:
npm install - Build plugin:
npm run build
Created by
Petter Nilsson
Twitter
Website
License
ISC