Palette Creator

I was trying to think of a way to define a palette - a way to smoothly transition from one colour to another. It can be a grey scale or a custom rainbow.

A user should be able to quickly and intuitively place anchors (colour control points). Each has HSL (hue, saturation, lightness) parameters. Smooth transitions between those anchors are generated automatically.

Below is a sample palette.

The next example is a mockup of the SMPTE colour bars. Note that abrupt changes in hue is accomplished by placing anchors adjacent to one another. This nullifies a smooth transition. The regions that are visible are between anchors of equal colours.

Here is the program to play with.

This is a proof-of-concept. It may be incorporated in future projects.


Colour gradients can be generated using JavaScript's createLinearGradient method. However only linear transitions are available (or radial gradients). These terms refer to the physical layout only. There is no provision for specifying the transformation function (power-law) between hues (Gamma colour correction).

This makes a poorly calibrated scale not only for monochrome gradations but also for colour luminosity.

It is important to observe a monitor's gamma and to apply an appropriate power function to colour component values.

A default value of 2.2 is used here. This seems to be standard for LCD monitors. For iPhones 1.5 seems to work. You can select a gamma value between 1 and 4 where 1 is 'no gamma' correction.

For reference the Palette Creator tool can show what the non-Gamma corrected palette as generated using the JavaScript gradient looks like.

Gamma issues are usually discussed in the context of grey scale tonalities. The top palette shows the non-Gamma corrected palette. The bottom palette is the corrected one which appears to be more linearly gradient.


Gamma correction also affects colours. Some hues will show a darker region during blending especially when they are at maximum saturation and at 50% lightness. Other areas will show unintended colour instead of expected blended ones.

Below is an example of the worst blending problems if the proper gamma correction is not applied. The non-Gamma corrected palette is at the top. Note the six (6) dark regions in the blends where the luminosity is far below that of the so-called pure hues. There are also three (3) regions where false colours appear; the primary colours red, green, and blue are seen in the mixes.

Revised 19 Nov 2018