GradientLab

https://gradientlab.space

What Is This? • Screenshots • Usage • Motivation • Dependencies • License

What is this?

GradientLab is a gradient picker made with React, aiming to let you choose aesthetically pleasing gradients quickly and intuitively.

Please note this is currently work in progress, and far from a final version.

Screenshots

Usage

The UI should be quite intuitive and self explanatory. At the moment, there is no support for adjusting the location of the colours within the gradient.

You may define your own output function written in javascript, which will be evaluated and shown on the UI. The default output is a CSS linear gradient rule.

The application store and chroma.js objects are exposed in this function.

Motivation

This was made foremost as a learning experience, but I thought it turned out quite well so I decided to polish it up a bit and open source it.

At the moment, it focuses on LAB and LCH color spaces for interpolation, as they generally look the best to us aesthetically. See the following article for a bit more information:
https://www.vis4.net/blog/2011/12/avoid-equidistant-hsv-colors/

Dependencies

• mobx-state-tree for state management
• mst-react-router for routing
• pose for animations
• chroma.js for colour calculations
• react-toastify for notifications
• react-copy-to-clipboard
• react-color

License

MIT