3

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

Improve this question
1
  • As John points out, to cover the range of RGB you need to use RG&B. You're only using R&G.
    – DA01
    Jul 4, 2013 at 15:14

3 Answers 3

Reset to default
7

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)

Improve this answer
8
  • Hm, hsb and hsl are rgb derivatives. You can't see the gray values well at the table for the 216 web safe colors I linked but they are there. 51,51,51 = dark gray. 204, 204, 51 = hsl 60, 60, 50. In the cube the gray values hide along the diagonal from white to black.
    – John
    Jul 4, 2013 at 15:47
  • Flattening the cube does not correspond to my answer. Because of this you argue that grays are missing, which is not true. I don't see how this suggestion of putting the focus of different kind of values (in trade of others) is useful in the context of this question.
    – John
    Jul 4, 2013 at 16:18
  • 1
    Flattening the cube isn't supposed to correspond to your answer, and I never said that greys would be missing in your approach. This is an answer intended to help people understand what it means to navigate the whole of a colour space, and that there is more than one way to do so. It's not a comment on your answer.
    – user56reinstatemonica8
    Jul 4, 2013 at 16:32
  • But flattening the cube is not how you are supposed to navigate a three dimensional (relative) color space in the first place. You source is not good even if it's from an .edu site. If user Vlad asks for "the most significant colors from whole color spectrum", how can you assume he wants to leave out orange for example?
    – John
    Jul 4, 2013 at 16:36
  • 1
    I don't assume he wants to leave out orange... but he did say he only has 40 colours, so depending on what exactly he wants to focus on, compromises may need to be made somewhere, e.g. less different hues allows more variation in brightness or saturation, vica versa, etc etc. I'm not saying any one approach is right or wrong, I'm just showing a few ways of thinking about colour space so he can find the approach that best suits the specific needs of his application.
    – user56reinstatemonica8
    Jul 4, 2013 at 17:19
3

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

Improve this answer
3
1

Here's how I'd do it - this may be similar to what the other John was suggesting, but less equation-ey.

So each color of RGB goes from 0 to 255. Figure out how many samples you want of each color, for this very simple example, I'll say 3, which are 0, 128, 255 (128 is the half way point rounded).

Now work all the possible combinations:

0, 0, 0 | 0, 0, 128 | 0, 0, 255 | 0, 128, 0 | 0, 255, 0 | 0, 128, 128 | 0, 128, 255 | 0, 255, 128 | 0, 255, 255 | 128, 0, 0 | 255, 0, 0 | 128, 128, 0 | 128, 255, 0 | 128, 128, 128 | 128, 128, 255 | 128, 255, 128 | 128, 255, 255 | 255, 255, 255

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.