Random Colors: Experiment

How it works

Choose a generator and look at how the random colors are distributed.

The purpose here is to observe the properties of different generators of colors.

Settings

Colors

Scatterplot style

Use case A

Set a small number of colors (10 to 50), generate several times to look if it fits your expectations.

Use case B

Set a large number of colors (1000 or more), check "scatterplot style", generate and you will observe how the probabilities are distributed (takes more time).

RGB Naïve

A random value in each red/green/blue channel.

HSL Naïve

A random value in each hue/saturation/lightness channel.

HSV Naïve

A random value in each hue/saturation/value channel.

Naïve generators:

Random numbers do not necessary make nice swatches. You may read sometimes that HSV random colors are better than RGB. I think that it is clearly not the case.

These basic generators allow to see that the "randomness" strongly depends on the color space that is randomized.

Lab Naïve

A random value in each L*/a*/b* color coordinates (fits to how we perceive colors).

Lab Pastel

A random value in each L*/a*/b* color coordinates, filtered to keep only pastel colors.

Lab Pimp

A random value in each L*/a*/b* color coordinates, filtered to keep only flashy colors.

Lab generators:

The L*a*b* color space is the more natural to the eye. Randomizing in this space gives more natural results.

Adding constraints helps to set some properties of the produced palette ('Pimp', 'Pastel'), and keeps the natural distribution of the colors.

RGB Force Vector

A Force Vector algorithm optimizes the distribution of colors inthe RGB color space.

Lab Force Vector

A Force Vector algorithm optimizes the distribution of colors inthe L*a*b* color space.

Lab Fancy Force Vector

A Force Vector algorithm optimizes the distribution of colors inthe L*a*b* color space. Additional conditions apply to restrain the color space to flashy colors.

Force Vector generators:

The Force Vector strategy allows an even distribution of the colors in the space. It still allows some coontrol on the produced palette ('Fancy').

Note that contrary to the "naïve" generators, the colors are generated all at the same time (they depend on each other).

RGB kMeans

The k-Means algorithm clusterises the RGB color space. The resulting palette is constituted of these k-Means (the "centers" of color clusters).

Lab kMeans

The k-Means algorithm clusterises the L*a*b* color space. The resulting palette is constituted of these k-Means (the "centers" of color clusters).

Lab Fancy kMeans

Idem, but with an additional constraint (high chroma and lightness*).

K-Means generators:

This strategy also allows an even distribution of the colors, but with less "extreme" colors (the borders of the color space are not occupied). It allows more coordinated colors on small palettes.

NB: The palette strongly depends on the number of colors asked.

Green x Blue

a* x b*

h* x L*

Hue x Value

Red x Green

L* x a*

Hue x Lightness

Hue x Saturation

Red x Blue

L* x b*

Saturation x Lightness

Saturation x Value

Random colors

Sorted by Hue

Sorted by Saturation

Sorted by Chroma (similar to saturation, but normalized to fit our perception)

Sorted by Lightness

Sorted by Lightness* (normalized to fit our perception)

Sorted by Value

Properties of color spaces

RGB or "Red Green Blue": the most easy to compute since it fits to how computer screens and TV work. Actually it fits quite well to our perception.

HSV or "Hue Saturation Value": used in softwares like Photoshop, since it allows to separate the hue (the color itself) for other parameters. It allows strong perceptual biases since the hues are not perceived with the same lightness (yellow is light, blue is dark...).

HSL or "Hue Saturation Lightness" is a variant of this space, and is biased as well.

L*a*b* or "Lightness* a* b*" is a space designed to fit to our perception. Lightness* is the unbiased version of lightness (a scale from black to color to white) and the a* and b* dimensions describe the colors (and grays). It is not easy to deal with it, since every color does not exist, but it gives the most appropriate results.

HCL or "Hue Chroma Lightness*" is a transformation of L*a*b* where the Hue has been separated. It can be considered as the unbiased version of HSL, where saturation is named Chroma and the unbiased version of Lightness is Lightness* (the star indicates the difference). Like with L*a*b*, every color does not exist. What's more, it is not a convex space, and this is an issue for computing colors. That's why I prefer L*a*b* to compute, but HCL is the best space to monitor results.

Reading the color spaces

The squares above are projections of different color spaces. Example: the RGB space is represented with R x G, G x B and R x B. They allow you to determine where the colors accumulate and where they are sparse. For instance you will observe that an even distribution in a given space (say, HSV) can be uneven in another space (RGB).

We assume that our goal is to generate varied colors. So we want to avoid accumulation, since it means that some colors are too similar, thus the palette is confusing.

The most suitable palettes are probably the ones that are evenly distributed in the L*a*b* color space.

Reading sorted palettes

The sorted palette contain the exact same colors (the ones that were generated) but sorted different ways.

The goal is just to check if there are similar colors. Sorting the colors allows to put similar colors together. For instance if two shades of blue are very similar, they will be put together in the "Hue" palette.

The "best" palette

Sorted by differenciation first

Here are the colors sorted so that the most different colors are put first. This is very useful in many cases, since we often know what we want to differentiate in priority.