1

I have an array with values from n to n + 1

var numbrs=[1,2,3,4,5,6,7,8,9,10];

I would like to create distinct colors based off those values. I figured the easiest way would be to create it using RGB, by changing R G & B in a loop.

Something like (just an example): 

for(var i=0;i < 10;i++){

var r = i * 10;
var g = i * 5;
var b = i * i
var color = "rgb(" + r + "," + g + "," + b + ")";

}

However the colors I get are to close to each other. I need them to be distinct.

I have tried adding, subtracting, multiplying and so on... but no good results so far.

I don't want shades of the same color. I need a good mix.

Any ideas?

  • 1
    possible duplicate of [How to automatically generate N "distinct" colors?](http://stackoverflow.com/questions/470690/how-to-automatically-generate-n-distinct-colors) and also [Finding N Distinct RGB Colors](http://stackoverflow.com/questions/2142046/finding-n-distinct-rgb-colors) – Ted Hopp Sep 15 '13 at 02:33
  • What do you mean by _"based off those values"_? Have you seen this http://www.paulirish.com/2009/random-hex-color-code-snippets/? – elclanrs Sep 15 '13 at 02:33
  • Thanks for posting the other links. I will make this as the correct answer as it points to the correct answer. –  Sep 15 '13 at 02:38

2 Answers2

2

Try this

DEMO

color = "#" + ((1 << 24) * Math.random() | 0).toString(16);
Tushar Gupta - curioustushar
  • 58,085
  • 24
  • 103
  • 107
0

The best way is to use the HSV color space and distribute the colors evenly across hue (H). Use mid to full saturation (S) for distinct colors (lower saturation will be gray). You can probably also use two distinct values (V). Ref: http://en.wikipedia.org/wiki/HSL_and_HSV (includes conversion algorithms back and forth to RGB) In short, HSV colors work much more closely to how we perceive color, so it's much easier to make proper adjustments to suit your visual needs (in this case making colors distinct).

So say you start by picking 0.75 for the Saturation. Low saturation washes out to gray. High saturation makes deep or vibrant colors. Saturation should be maintained across the chosen colors or else some colors will look distinctly different and higher saturation values will appear to mean something different.

Then you decide how many Values you can have (1, 2, or maybe even 3) and still provide good clarity. Low values are dark approaching black, while high values are bright and vibrant. So maybe a Value of 0.5 and a Value of 0.8. If you go much below 0.4, you'll start to get colors so dark that they lose distinctiveness. If you use more than 2 or 4 Values the distinctiveness of colors that only differ in Value will be lost.

Then you assign as many Hues as necessary. Hue controls what we generally refer to as "color". Hues start at 0° (red) and advance through a circle back to the beginning with green at 120°, and blue at 240°. If you are using two separate Values, you will need half as many Hues as you have colors. So if you have 10 colors, half of them will be the low Value (0.4), and half of them will be the high Value (0.8). Then assign 5 equidistant Hues to go with each Value. Since Hue is a degree from 0 to 360, this means you'll use hues 0 and every 72 degrees from that (360/5 = 72). So hues 0, 72, 144, 216, and 288.

Then just convert to RGB and you're all set.

Example HSV set based on 10 needed colors and two selected Values

  • 0°, 0.75, 0.4 (dark red)
  • 0°, 0.75, 0.8 (bright red)
  • 72°, 0.75, 0.4 (dark lime-yellow)
  • 72°, 0.75, 0.8 (bright lime-yellow)
  • 144°, 0.75, 0.4 (dark green w/ blue tint)
  • 144°, 0.75, 0.8 (bright green w/ blue tint)
  • 216°, 0.75, 0.4 (dark aqua)
  • 216°, 0.75, 0.8 (bright aqua)
  • 288°, 0.75, 0.4 (dark violet)
  • 288°, 0.75, 0.8 (bright violet)

Once you've got the basic algorithm going with an HSVtoRGB function, you should be able to tweak it pretty easily to suit your needs.

rich remer
  • 3,407
  • 2
  • 34
  • 47