Web-safe colour generator or algorithm

1.6k views Asked by At

Has anyone come across a web-safe colour algorithm? Perhaps to explain why I need one; the palete is going to be used in a JavaScript charting solution. It is why the colours generated need to be distinct enough from one another. I know there are only 216 web-safe colours and I could sort them manually but I just want to cater the possibility of expanding the range if needed. Thus a need for a algorithm.

Definitions can be found on http://en.wikipedia.org/wiki/Web_colors

Even though rarely anyone still uses 8 bit monitors, the web safe colours are also the ones most consistently reproduced across different devices and are easiest on the eyes.

I would appreciate any links to a project or library that deals with that.

UPDATE:

Just in case I wasn't clear enough. Currently my code has a defined array of colours. This is the simplest solution. A more complicated but more flexible solution would be:

Step 1: calculate number of distinct colours needed Step 2: calculate colours so that the most distinct ones for current range are picked: - Example with four colours: result: [blue, grey, red, green] - Example with 50 colours: [blue, grey, red, green, yellow, purple, orange, cyan, blue2, grey2, red2, green2, ...]

So the idea is to: create stacks of each colour shades. So stack one would contain shades of blue, stack 2 would contain shades of grey, stack 3 shades of red and so on. Where each shade is a "web safe" colour. The shades are also calculated based on how many colours we need in total divided by number of stacks. Then I can collect colours from stacks so that: - take one colour from top of each stack - take one colour from bottom of each stack - take one colour from top of each stack - and so on

This way we can achieve the following: - The colours picked are most possible distinct from one another - By arranging the stacks the colours "sit nicely" one next to other - The distinction between 2 neighbouring colours is the best possible while at the same time not visually disturbing. - There is a limit to how many distinct colours this can produce because they are no longer distinct enough. At which point we just start over.

I hope this sheds some light on the matter and why I want to calculate these.

Also: I am not a web designer.

2

There are 2 answers

1
Andreas Eriksson On BEST ANSWER
for (r = 0; r < 16; r += 3) {
            for (g = 0; g < 16; g += 3) {
                for (b = 0; b < 16; b += 3) {
                    alert(r.toString(16) + g.toString(16) + b.toString(16));
                }
            }
        }

Edit: Here's a nice way to display them: http://jsfiddle.net/MML6P/4/

1
Richard Ev On

Why don't you just define them in a configuration file for your app? Easy to expand in the future.