Skip to content

Instantly share code, notes, and snippets.

@sillero
Created May 29, 2013 19:36
Show Gist options
  • Save sillero/5673161 to your computer and use it in GitHub Desktop.
Save sillero/5673161 to your computer and use it in GitHub Desktop.
Monochromatic pallete generator (hsl to rgb)
function pallete(base, total){
total = total || 10;
base = base.split(',');
base = {
h: base[0].replace(/\D/g,''),
s: base[1].replace(/\D/g,''),
l: base[2].replace(/\D/g,'')
};
var hsl2rgb = function(h, s, l) {
var HueToRgb = function(m1, m2, hue) {
var v;
if (hue < 0)
hue += 1;
else if (hue > 1)
hue -= 1;
if (6 * hue < 1)
v = m1 + (m2 - m1) * hue * 6;
else if (2 * hue < 1)
v = m2;
else if (3 * hue < 2)
v = m1 + (m2 - m1) * (2/3 - hue) * 6;
else
v = m1;
return 255 * v;
},
dec2hexstr = function(n){
n = parseInt(n).toString(16);
return (n.length === 1 ? '0':'')+n
},
m1, m2, hue, r, g, b;
s /= 100;
l /= 100;
if (s === 0)
r = g = b = (l * 255);
else {
if (l <= 0.5)
m2 = l * (s + 1);
else
m2 = l + s - l * s;
m1 = l * 2 - m2;
hue = h / 360;
r = HueToRgb(m1, m2, hue + 1/3);
g = HueToRgb(m1, m2, hue);
b = HueToRgb(m1, m2, hue - 1/3);
}
return '#'+dec2hexstr(r)+dec2hexstr(g)+dec2hexstr(b);
}
$pallete = [],
$step = base.l / total;
for (var k=0;k<total;k++) {
$pallete.push(hsl2rgb(base.h,base.s,(base.l-(k*$step))));
}
return $pallete;
}
$(function(){
var $pallete = pallete('hsl(101,95%,41%)', $('li').length);
console.log($pallete);
$('li').each(function(i){
$(this).css({
background: $pallete[i]
});
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment