David Johnstone

Cubehelix gradient picker

Page background colour:
Hue (start):
Hue (end):
Lightness (start):
Lightness (end):
Show luminance gradient:
Number of swatches:
Show smooth gradient:

This is a gradient creation tool that uses the cubehelix method. This is built around chroma.js's implementation of cubehelix.

Conceptually, cubehelix takes a colour cube, with a red, green and blue dimension, and picks colours from it along the path of a helix spiralling through it. The parameters that describe this are:

  • Start — the hue to start from.
  • Rotations — how many rotations the helix makes.
  • Hue — how saturated the colours are (no, I don't know why it's not called "saturation").
  • Gamma — can be used to emphasis low or high intensity values.
  • Lightness — the lightness of the colours at the start and end.

The sliders can adjust the values in a "reasonable" range, but most of the values don't have minimum and maximum limits, so any value can be specified in the input boxes.

The background colour of the page can be chosen, as the colours around another colour affect the appearance of the colour.

By default, the gradient is shown in addition to a number of swatches. The gradient is made of rectangles four pixels wide, so banding is often visible. Selecting "show smooth gradient" shows a higher quality gradient, but it is more computationally expensive so it isn't displayed by default. The hex values (sRGB) for the swatches are shown too, and are red if the intended colour is not displayable, which can happen when using high hue values. Clicking "show luminance gradient" shows a gradient of just the luminance (it's essentially a high quality greyscale conversion), but it too is computationally expensive to create and can make the page slow.

For a slightly more traditional colour and gradient picker, take a look here. It allows colours to be specified in a number of different ways, and supports interpolating in multiple colour spaces, including Lab and Lch.