Generate color palette using JavaScript

Question

I want to generate a color palette of every 5th, 15th,17th or 51th RGB-value.

Something like this:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Color Palette</title>
<style type="text/css">
div{margin:0;width:20px;height:20px;float:left}
.clear{clear:both}
</style>
</head>
<body>
<script>
var r = 0,
    g = 0,
    b = 0;

function createBr() {
    var b = document.createElement('br');
    b.style.clear = 'both';
    document.body.appendChild(b);
}

function createDiv(r,g,b) {
var a = document.createElement('div');
a.style.background = 'rgb(' + r + ',' + g + ',' + b + ')';
document.body.appendChild(a);
}


function createColorPalette(value) {
var v = 255/value;
    for(i = 0; i < v; i++) {
        r = r + value;
        g = g + value;
        b = b + value;
        createDiv(r,g,b);
    }
createBr();
}

// put in 5,15,17 or 51 as value below
window.onload = createColorPalette(17);
</script>
</body>
</html>

I'm not smart enough to figure out how to generate all the 3375 colors with a small script. Any ideas how to do that?

Never start with "Not smart enough". I'm not quite sure I understand what you mean by 5th, 15th,17th or 51th RGB-value. Can you list an example? — K-man
– K-man, Commented Jun 22, 2012 at 19:15
Check out this amazing article: krazydad.com/tutorials/makecolors.php — Joseph Silber
– Joseph Silber, Commented Jun 22, 2012 at 19:16
Thansk for asking K-man! I forgot there are 256 colors not 255 (I forgot to count the "0". 5,15,17 and 51 where good numbers for deviding 255). — user1087110
– user1087110, Commented Jun 22, 2012 at 19:39

matt3141 · Accepted Answer · 2012-06-22 19:53:15Z

5

Cycle through the fractions for each color like so:

function createColorPalette(value) {
    var v = 255/value;
    for( var rStep = 0, r = 0; rStep < v; rStep++) {    
        for( var gStep = 0, g = 0; gStep < v; gStep++ ) {       
            for( var bStep = 0, b = 0; bStep < v; bStep++ ) {                                                  
                createDiv(r,g,b);
                b += value;
            }
            g += value;
        }
        r += value;
    }
    createBr();
}

edited Jun 22, 2012 at 19:53

answered Jun 22, 2012 at 19:33

matt3141

4,4411 gold badge22 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user1087110 Over a year ago

You forgot an end tag. But not working any way. It only generates lots of white div tags.

matt3141 Over a year ago

sorry, I think I've fixed it all. Not sure if this is what you intended for it to look like but I think it hits all of the colors.

user1087110 Over a year ago

It was the answer on my question any way... Thanks :)

Xeoncross Over a year ago

Here is a demo codepen. This simple solution fails to both prevent similar colors from showing as well as keep them in spectrum order.

Collectives™ on Stack Overflow

Generate color palette using JavaScript

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related