i want hue

Colors for data scientists. Generate and refine palettes of optimally distinct colors.

How it works

  1. K-means or force vector repulsion algorithms ensure an even distribution of colors

  2. The CIE L*a*b* color space is used for computation, since it fits human perception

  3. The Hue/Chroma/Lightness* color space is used to set constraints, since it is user-friendly

Example from Mike Bostock's d3.js


RGB random - Distracting colors, some colors are too similar, perceived lightness issues

Custom palette - Coherent colors, optimally distinct, in the same range of perceived lightness


Examples

Fancy colors

Most of the time, we just want to achieve these simple goals:

  • Distinct colors: always done by iWantHue
  • Sober, discreet colors: a low chroma
  • Coherent colors: a narrow Lightness range (depends on the background)
The Fancy preset aims at providing these qualities. It produces generic palettes up to 10 colors. Since chroma and lightness have a narrow range, it does not handle much colors (up to 10).


Color space
Sample palette
Example

Fancy, dark background

On a dark background, we have to set a different range for the Lightness. However, we keep the principle of narrow ranges for Chroma and Lightness.

In order to achieve consistency in the colors, you have to select a lightness range that is lightly contrasted with the background. It has to be contrasted, since you want the content to be read. But you want keep this contrast quite close to the background to avoid agressive colors.


Color space
Sample palette
Example

Tarnish

This preset produces colored greys. You can achieve this with a very low maximum chroma. It is useful when you want to avoid the distracting effect of saturated colors.

The more you restrain color space, the fewer the number of distinct colors you can obtain. Since the chroma range is very narrow, we need a wider lightness range. All the colors are close to grey, so we need to differentiate them with the lightness.


Color space
Sample palette
Example

Pimp

In this example we maximized the impact of the colors by increasing the chroma. The resulting colors are particularly intense. Since we allowed a large range of chroma and lightness, we can produce more distinct colors.

You may have observed that we have several blue-purple colors while we have few greens and no yellow. This is due to the way we perceived colors. The yellow for example is not allowed by our maximum lightness.


Color space
Sample palette
Example

Pimp, but lighter

This example uses the same range of chroma, but a much lighter range of lightness. Now we have more yellow and green, less purple and no red. It is still a side effect of using the CIE Lab color space.


Color space
Sample palette
Example

Variations on a given color

A narrow hue range produces variations of a color. If we select only green hues, the generated palette will be composed of distinct greens. In order to have enough variations, we need a wider range for lightness and chroma. However, we want to avoid low chromas because they produce greys. We also want to avoid dark and light colors in order to get more homogeneity.


Color space
Sample palette
Example

Large palettes

We can build quite large palettes as long as we have enough 'room' in the color space. Here we just avoided dark colors since we have a white background and black text, and we avoided high chromas in order to keep homogeneity. High chromas do not contain much color space, so we did not restrain too much the palette.


Color space
Sample palette
Example
Another example

Scandalously large palettes

If the number of colors is too high for the size of the color space, there will be similar colors in the palette. However, the colors are always sorted so that the first are the most distinct possible.

If you produce too many colors, you will still be able to use the first colors, since they will be distinct.

In such extreme cases, it is necessary to choose the "hard (Force vector)" setting. This algorithm is able to generate colors even if there is very few color space, when the "soft (k-Means)" will fail.


Color space
Sample palette
Example
Another example