Created
May 6, 2013 17:04
-
-
Save keisans/5526435 to your computer and use it in GitHub Desktop.
Color system draft 1
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Color = function(color) { | |
this.hex = this.parseHex(color); | |
this.rgb = this.hex2rgb(); | |
this.hsl = this.rgb2hsl(); | |
} | |
Color.prototype = (function(){ | |
var _public = {}; | |
_public.parseHex = function(hex){ | |
hex = hex.replace('#', '') | |
if(hex.length !== 6 && hex.length !== 3){throw hex + ' is not a valid hex code'} | |
if(hex.length === 3){ | |
var colorSplit = hex.split(''); | |
for(var comp in colorSplit){ | |
if (colorSplit.hasOwnProperty(comp)){ | |
colorSplit[comp] = colorSplit[comp] + colorSplit[comp]; | |
} | |
} | |
return colorSplit.join(''); | |
} else { | |
return hex; | |
} | |
} | |
_public.lighten = function(lightness) { | |
return this.ld(lightness); | |
}; | |
_public.darken = function(darkness) { | |
return this.ld(darkness * -1); | |
}; | |
_public.ld = function(change) { | |
var amount = Math.floor((change / 100) * 255), | |
rgb = _.map(this.rgb, function(n) { | |
var newColor = n + amount; | |
return _public.toHex.call(this, newColor); | |
}); | |
return rgb.join(''); | |
}; | |
_public.spin = function(change) { | |
var hsl = this.hsl.slice(0, this.hsl.length); | |
hsl[0] += change/360; | |
hsl[0] = hsl[0] % 1; | |
var rgb = this.hsl2rgb(hsl[0], hsl[1], hsl[2]); | |
var newColor = _.map(rgb, function(n) { | |
return _public.toHex.call(this, n); | |
}); | |
return newColor.join(''); | |
}; | |
_public.toHex = function(n) { | |
n = parseInt(n, 10); | |
if (isNaN(n)) { | |
return '00'; | |
} | |
n = Math.max(0, Math.min(n, 255)); | |
return "0123456789ABCDEF".charAt((n - n % 16) / 16) + "0123456789ABCDEF".charAt(n % 16); | |
}; | |
_public.rgb2hsl = function() { | |
var r = this.rgb[0], | |
g = this.rgb[1], | |
b = this.rgb[2]; | |
r /= 255; | |
g /= 255; | |
b /= 255; | |
var max = Math.max(r, g, b), | |
min = Math.min(r, g, b); | |
var h, s, l = (max + min) / 2; | |
if (max === min) { | |
h = s = 0; // achromatic | |
} else { | |
var d = max - min; | |
s = l > 0.5 ? d / (2 - max - min) : d / (max + min); | |
switch (max) { | |
case r: | |
h = (g - b) / d + (g < b ? 6 : 0); | |
break; | |
case g: | |
h = (b - r) / d + 2; | |
break; | |
case b: | |
h = (r - g) / d + 4; | |
break; | |
} | |
h /= 6; | |
} | |
return [h, s, l]; | |
}; | |
_public.hsl2rgb = function(h, s, l) { | |
h = typeof h !== 'undefined' ? h : this.hsl[0]; | |
s = typeof s !== 'undefined' ? s : this.hsl[1]; | |
l = typeof l !== 'undefined' ? l : this.hsl[2]; | |
var r, g, b; | |
if (s === 0) { | |
r = g = b = l; // achromatic | |
} else { | |
var q = l < 0.5 ? l * (1 + s) : l + s - l * s; | |
var p = 2 * l - q; | |
r = this.hue2rgb(p, q, h + 1 / 3); | |
g = this.hue2rgb(p, q, h); | |
b = this.hue2rgb(p, q, h - 1 / 3); | |
} | |
return [r * 255, g * 255, b * 255]; | |
}; | |
_public.hue2rgb = function(p, q, t) { | |
if (t < 0) {t += 1;} | |
if (t > 1) {t -= 1;} | |
if (t < 1 / 6) {return p + (q - p) * 6 * t;} | |
if (t < 1 / 2) {return q;} | |
if (t < 2 / 3) {return p + (q - p) * (2 / 3 - t) * 6;} | |
return p; | |
}; | |
_public.rgb2hex = function() { | |
var values = _.map(this.rgb, function(n) { | |
return _public.toHex.call(this, n); | |
}); | |
return values.join(''); | |
}; | |
_public.hex2rgb = function() { | |
var subs = this.hex.match(/.{1,2}/g), | |
r = parseInt(subs[0], 16), | |
g = parseInt(subs[1], 16), | |
b = parseInt(subs[2], 16); | |
return [r, g, b]; | |
}; | |
return _public; | |
}()) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment