0

Im trying to come up with a way to add a new unused color to an array on click.

Constraints:

  • I can't have a predefined array of colors as I dont know how many times the user will click.

  • Every new color generated should be different from any other one in the array.

  • Each new color should be a relatively different color from the previous one in the array. Meaning if the previous color is reddish-orange, the current one shouldn't be a reddish-pink or yellowish-orange.

I'm wondering if there is an intuitive or mathematical way to go through RGB values where I can get a new color and not have to iterate through the entire array each time to see if that color exists. I already thought of using a hash, but wanted to see if there was any other method.

Rahul Nair
  • 44
  • 4
  • 2
    Please visit [help], take [tour] to see what and [ask]. Do some research, search for related topics on SO; if you get stuck, post a [mcve] of your attempt, noting input and expected output. – mplungjan Dec 02 '19 at 10:49
  • does it have to be RGB? Or can it be HSL colours? – Nick Parsons Dec 02 '19 at 10:50
  • HSL would be fine too! Just trying to find a way to iterate through color values with the constraints above. – Rahul Nair Dec 02 '19 at 10:52
  • 1
    @RahulNair have you seen [this answer](https://stackoverflow.com/a/20129594/5648954) or [this answer](https://stackoverflow.com/a/31817723/5648954) ? They may help – Nick Parsons Dec 02 '19 at 10:55
  • 1
    @NickParsons Hmm, this looks like it might solve it. Thanks!!! – Rahul Nair Dec 02 '19 at 10:59

1 Answers1

2

try set the color / style {color: hsl(value,100%,50%);} where value=(previous_value+interval)%360

interval is up to you, it may me for example 34

dismedia
  • 129
  • 7
  • if you're doing `%255` won't you eventually come back to the same `value` seen before (giving you same colors as previously generated)? – Nick Parsons Dec 02 '19 at 11:05
  • you should not because its gonna be: 33,66,99,132,165,198,231, ! 9, 42 and so on... thanks to a modulo operator. of course ultimately you wil come back to the initial value, so if we want to have more possibilities than 255 we will need do the same with other parameter. – dismedia Dec 02 '19 at 11:09
  • 1
    that's right, but hue is an angle, so the divisor should be 360, not 255. – georg Dec 02 '19 at 11:40
  • you're absolutelly right! I will correct this – dismedia Dec 02 '19 at 11:42