A selection of colors that spans the range of the RGB color spectrum?


Below is a screenshot of a small application I am building. I would like to cover the most significant colors from whole color spectrum, but I am missing lots of colors. I don't get the intended result; I don't see some colors like yellow or orange.

I have 40 tiles arranged 8x5. I divided the RGB color spectrum of about 16 million colors by 40 and converted that value to a hex value so that it will be applied on the tiles.

Fading/blending from cyan to red clearly isn't an approach that reaches all parts of the RGB spectrum. What did I miss, or how can I do that?

enter image description here

7/4/2013 1:41:00 PM

Accepted Answer

RGB is three dimensional, so to understand the problem it helps to visualise the RGB colour space as a three dimensional shape. A classic way is as a cube based on amounts of the three dimensions, red, green and blue:

enter image description here

(images taken from Digital Color Design with the RGB Color Cube: Visualization and Color Coordination Activities, a journal article I stumbled upon while writing this that's worth a read for anyone interested)

A cube with black and white at opposite corners, red green and blue at the corners next to black, and the mixes - yellow, cyan, magenta - at the corners connected to white. In the second example, 'up' adds green, 'down-left' adds red, 'down-right' adds blue.

How do you turn a cube into a flat plane? It's like turning a flat sheet of paper into a cube, but in reverse...

enter image description here

...you can do it by flattening the cube into a folding plan (like the top-right image) or by cutting slices out of the cube (like the top middle image). Then, you've got your colours, and how you arrange then is up to you.

But there's one thing missing - greys. All these colours are highly saturated. If you want to represent the whole of the RGB colour space, including greys and partially desaturated colours, you need to use a different set of three dimensions to generate your RGB cube: HSL (Hue, Saturation and Lightness) or HSB (Hue, Saturation and Brightness AKA HSV, Value).

This comparison (from wikimedia) shows cubes based on RGB, then HSL, then HSB:

enter image description here

(note that they're all RGB colours - HSL and HSB are just different ways of conceiving a colour space)

I'd suggest using something that loops through the RGB every possible HSB combination, spaced so that the number of results is just 40, then find a suitable way to arrange them, probably based on slices.

Be aware though that with 3 dimensions and just 40 figures, you won't have many steps. For example, you could have 2 levels of saturation (saturated, greyish), 3 levels of brightness (pale, medium, dark) and 6 levels of hue (blue, cyan, green, yellow, red, magenta), and that would give you 36 colours, leaving just 4 for the extremes (white, black, light grey, dark grey)

7/4/2013 4:11:00 PM

In the RGB color model you have three channels reg, green and blue with values ranging from 0 - 255 (you knew that!).

To cover the whole spectrum you combine the three channels with a certain amount of value options.

So if you have x amount value options for each channel, you'll get x * x * x = x^3 color values.

For two options e.g. 0 and 255 you get 2^3 = 8 colors.

For six options, which constitute five (= 6 - 1) segments, you have the values
0 * (255 / 5), 1 * (255 / 5), 2 * (255 / 5), 3 * (255 / 5), 4 * (255 / 5), 5 * (255 / 5)
which makes 6^3 = 216 colors, which you can see as an example here.

The range above showed you how to build your one dimensional array for one channel. Since the three channels are the same, you can use it for all three channels.

With this you build your two-dimensional array:

0, 0, 0
51, 0, 0
102, 0, 0

I think you get it. If not, you'll have to ask this question at Stack Overflow (and point me to it).