S
S
Sergey Eremin2015-12-11 01:12:38
JavaScript
Sergey Eremin, 2015-12-11 01:12:38

How to create an N-sequence of mutually contrasting colors?

You need to draw a graph (let's say a bar chart) of N-elements. For clarity, for each "column" you need to generate your own color. I thought the best way is:

// число цветов-столбиков (получаем с сервера)
var NumCоlor = 24
// число шагов внутри каждого тона цветовой RGB-составляющей
step = Math.round( Math.pow(NumCоlor , 1./3)-1);
// размер шагов внутри каждого тона цветовой RGB-составляющей
step_tone = Math.round(0xFF/step);
// массив из которого будем дергать цвета 
DimColor = [];
for (i1=0; i1<=step; i1++ )
  for (i2=step; i2>=0; i2-- )
    for (i3=0; i3<=step; i3++ ) {
      // для контроля и просмотра цветов
      document.write("<span style='color:rgb("+i1*step_tone+","+i2*step_tone+","+i3*step_tone+");'>█</span>: ");
      document.write("rgb("+i1*step_tone+","+i2*step_tone+","+i3*step_tone+")<br>");
      // помещаем цвет в массив
      DimColor.push("rgb("+i1*step_tone+","+i2*step_tone+","+i3*step_tone+")");
    }

As a result, we get a beautiful rainbow, but ... but a rainbow. It's hard to tell one bar from another in a diagram... Changing the rgb color scheme to hsl doesn't fundamentally change anything. What to do?
You can mix the colors inside DimColor, but not the fact that they will be located in a contrasting order. In addition, random mixing will confuse visitors, because. they will see "different" graphs each time. Are there any ready-made algorithms to distribute N-colors as mutually contrast as possible?

Answer the question

In order to leave comments, you need to log in

2 answer(s)
R
Rsa97, 2015-12-11
@Rsa97

The most reliable is to take from a pre-prepared set of colors. If you want to generate exactly, then try using the color wheel. On opposite sides of the circle are mutually contrasting colors. If we take an odd (for simplicity of the algorithm) number of colors N = 2n + 1, then shifting at each step by 360 * n / N degrees in a circle, we will get a color that is contrasting to the previous one.

N
Nicholas, 2015-12-11
@healqq

Read about color combinations . Alternatively, you can generate a circle of the desired size, then select the required number of colors from it according to the "contrasting triad" rule.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question