Generate Random Color distinguishable to Humans

by

The easiest way to pick maximally different colors would be to to use HSL values instead of RGB and then manipulate Hue, as it has a value from 0 to 360 value and wraps around (0 is red, and so is 360);

if you need 10 distinguishable colors you can divide 360 by 10 and then pick the individual color by multiplying the value by index (zero based).
Here’s an example function that allows you to pick a color from :

function selectColor(colorNum, colors){
    if (colors < 1) colors = 1; // defaults to one color - avoid divide by zero
    return "hsl(" + (colorNum * (360 / colors) % 360) + ",100%,50%)";
}

This way you can randomize the color selection by randomizing index, but colors will always be in the same palette.

This will select a random color from a palette of 10:

var color = selectColor(Math.floor(Math.random() * 10), 10);

and so will this:

var color = selectColor(Math.floor(Math.random() * 999), 10);

or you can select a specific color from the palette, like 9th color (index 8) out of palette of 13:

var color = selectColor(8, 13);

Here’s a fiddle to play with: http://jsfiddle.net/2UE2B/

Update on 2020-02-23:

So, today I needed a solution to this same problem. Googling for this answer here (I know, a very weird way to look for stuff on SO) I ran into the Golden Angle concept. It would make the above example even more trivial, and would not require a predetermined number of colors to be provided:

function selectColor(number) {
  const hue = number * 137.508; // use golden angle approximation
  return `hsl(${hue},50%,75%)`;
}

This answers the @netoperator-wibby’s question

More Related Contents:

  1. How to check first 200 chekboxes , then next 200 and so on?
  2. How can I access the contents of an iframe with JavaScript/jQuery?
  3. How to delete a localStorage item when the browser window/tab is closed?
  4. Difference between “change” and “input” event for an `input` element
  5. How to check if iframe is loaded or it has a content?
  6. Get list of data-* attributes using javascript / jQuery
  7. Jquery Mobile – $.mobile.changepage not loading external .JS files
  8. Benefits vs. Pitfalls of hosting jQuery locally [closed]
  9. How to handle floats and decimal separators with html5 input type number
  10. How to check/uncheck radio button on click?
  11. jQuery select element by XPath
  12. How can I make window.showmodaldialog work in chrome 37?
  13. How do i disable a submit button when checkbox is uncheck?
  14. Preview images before upload
  15. Jquery in React is not defined
  16. Getting the value of the input field using jquery
  17. Reload parent window from child window
  18. .append VS .html VS .innerHTML performance
  19. removeEventListener without knowing the function
  20. Can jQuery change css style definition? (not individual css of each element)
  21. Load .txt file using JQuery or Ajax
  22. How to make superfish dropdown menu responsive?
  23. ToolTip is not closing with Select2
  24. how to select all class except the clicked element in JQuery?
  25. How to select all textareas and textboxes using jQuery?
  26. Hot to get incomplete datetime-local input values
  27. Prevent a link to reload page
  28. Do duplicate ID values screw up jQuery selectors?
  29. How to determine if the client is a touch device [duplicate]
  30. Can you have multiple lines in an element?

Leave a Comment