(old version)

Outdated version! Check out our fresh new interface
Current version

Palettes Generator

Choose how much colors you want, choose a preset or use custom settings, and generate your palette. The palette is generated by clustering a color space and ordering the resulting colors.


Palette Size



These settings apply on the HCL color space, as described in the Chroma.js library. Note that the CIE L*a*b* color space is nevertheless used for the computations.

Hue (range: 0 to 360)

Chroma (range: 0 to 10, most of the values under 1)

Lightness (range: 0 to 10, most of the values under 1)

Quality (more is slower, minimum 1, default 50)



How it works

The color above are obtained by a regular sampling of the CIE L*a*b* color space. Not filtered, the 1782 colors represent the full range of colors that the human eye is able to see.

The settings allow you to restrain the color space. Each of these 1782 are tested to know if they fit to some criteria. This criteria is expressed in the HCL color space popularized by Chroma.js.
The HCL color space fits better the human vision than HSV or HSL, but is easy to understand, contrary to L*a*b* (since Hue is a separate parameter).

We use an algorithm (k-Means or Force Vector) to place colors, in this restrained color space, in a way that they are the most distant possible - "distant" in the sense of the distance in the L*a*b* color space.

More about this technique there.


Hex colors

Generation Code (javascript)

NB: requires Chroma.js and our chroma.palette-gen.js