(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.

Presets

Palette Size

Colors

Settings

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)
Minimum
Maximum

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

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

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

Algorithm

Sub-space

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.

Palette

Hex colors

Generation Code (javascript)


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