Skip to content

Instantly share code, notes, and snippets.

@ibolmo
Created February 28, 2009 19:13
Show Gist options
  • Save ibolmo/72059 to your computer and use it in GitHub Desktop.
Save ibolmo/72059 to your computer and use it in GitHub Desktop.
/*
Script: Color.js
Class for creating and manipulating colors in JavaScript. Includes basic color manipulations and HSB <-> RGB <-> HEX Conversions.
License:
MIT-style license.
*/
function Color(type, color, alpha){
this.type = type.toUpperCase();
this.alpha = alpha;
type = type.toLowerCase();
var types = ['rgb', 'hsb', 'hex'].erase(type);
var uctypes = types.map(String.toUpperCase);
var CT = Color.Types[type];
color = this[type] = (string) ? color.match(CT.regexp).slice(CT.slice) : color;
if (color.length == 4) this.alpha = color.pop();
this[types[0]] = Color[this.type + 'To' + uctypes[0]](color);
this[types[1]] = Color[this.type + 'To' + uctypes[1]](color);
};
Color.Types = {
'hex': {
regexp: /^#?(\w{1,2})(\w{1,2})(\w{1,2})$/,
slice: 1
}
};
Color.Types.rgb = Color.Types.hsb = {
regexp: /([\d]{1,3})/g,
slice: 0
};
new Native({name: 'Color', initialize: Color});
Color.HEXToRGB = function(hex){
var rgb = hex.map(function(value){
if (value.length == 1) value += value;
return parseInt(value, 16);
});
return rgb;
};
Color.HEXToHSB = function(hex){
return Color.RGBToHSB(Color.HEXToRGB(hex));
};
Color.RGBToHSB = function(rgb){
var red = rgb[0], green = rgb[1], blue = rgb[2];
var max = rgb.max(), min = rgb.min();
var delta = max - min;
var hue, saturation = 0, brightness = max / 255;
if (max) saturation = delta / max;
if (saturation == 0){
hue = 0;
} else {
var rr = max - red;
var gr = max - green;
var br = max - blue;
if (!rr) hue = (br - gr) / delta;
else if (!gr) hue = 2 + (rr - br) / delta;
else hue = 4 + (gr - rr) / delta;
hue /= 6;
if (hue < 0) hue++;
}
return [Math.round(hue * 360), Math.round(saturation * 100), Math.round(brightness * 100)];
};
Color.RGBToHEX = function(rgb){
return rgb.map(function(bit){
bit = (bit - 0).toString(16);
return (bit.length == 1) ? '0' + bit : bit;
});
};
Color.HSBToRGB = function(hsb){
var br = Math.round(hsb[2] * 2.55);
if (hsb[1] == 0){
return [br, br, br];
} else {
var hue = hsb[0] % 360;
var f = hue % 60;
var p = Math.round((hsb[2] * (100 - hsb[1])) * .0255);
var q = Math.round((hsb[2] * (6000 - hsb[1] * f)) * .000425);
var t = Math.round((hsb[2] * (6000 - hsb[1] * (60 - f))) * .000425);
switch (Math.floor(hue / 60)){
case 0: return [br, t, p];
case 1: return [q, br, p];
case 2: return [p, br, t];
case 3: return [p, q, br];
case 4: return [t, p, br];
case 5: return [br, p, q];
}
}
return false;
};
Color.HSBToHEX = function(hsb){
return Color.RGBToHEX(Color.HSBToRGB(hsb));
};
Color.implement({
setHue: function(value){
return new Color('hsb', [value, this.hsb[1], this.hsb[2]], this.alpha);
},
setSaturation: function(percent){
return new Color('hsb', [this.hsb[0], percent, this.hsb[2]], this.alpha);
},
setBrightness: function(percent){
return new Color('hsb', [this.hsb[0], this.hsb[1], percent], this.alpha);
},
toRGB: function(){
var rgbs = this.rgb.join(', ');
return (this.alpha > -1) ? 'rgba(' + rgbs + ', ' + this.alpha + ')' : 'rgb(' + rgbs + ')';
},
toHSB: function(){
var hsbs = this.hsb.join(', ');
return (this.alpha > -1) ? 'hsba(' + hsbs + ', ' + this.alpha + ')' : 'hsb(' + hsbs + ')';
},
toHEX: function(){
return '#' + this.hex.join('');
}
});
Color.alias('toRGB', 'toString').alias('toRGB', 'valueOf');
function hex(hex, a){
return new Color('hex', hex, a);
};
function hsb(h, s, b, a){
return new Color('hsb', [h, s, b], a);
};
function rgb(r, g, b, a){
return new Color('rgb', [r, g, b], a);
};
Array.implement({
max: function(){
return Math.max.run(this);
},
min: function(){
return Math.min.run(this);
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment