├── index.html ├── README.md ├── tests.js ├── color.min.js ├── colour.min.js └── colour.js /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | colour.js 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # colour.js # 2 | 3 | colour.js is a small colour manipulation library built in JavaScript. 4 | 5 | 6 | Use color.min.js if you're American, or use colour.min.js if you're normal. Minifed 7 | files are both generated using the YUI compressor, with maximum settings 8 | enabled; code is obfuscated, excess semi-colons are removed, and micro- 9 | optimisations are made. 10 | -------------------------------------------------------------------------------- /tests.js: -------------------------------------------------------------------------------- 1 | var errors = document.getElementById('errors'); 2 | 3 | /** 4 | * Test that two values are the same. If they're not, details are outputted to the 5 | * page. Only strings, numbers, arrays and booleans should be passed to this; 6 | * objects will all equal every other object as it's just being converted to a string 7 | * using .toString(). 8 | * 9 | * @param mixed one The first value. 10 | * @param mixed two The second value. 11 | * @param string name The name of the test - optional. 12 | */ 13 | function assertEquals(one, two, name) { 14 | if (one.toString() !== two.toString()) { 15 | errors.innerHTML += (name || 'unnamed') + ' fails: ' + JSON.stringify(one) + ' should equal ' + JSON.stringify(two); 16 | } 17 | } 18 | 19 | 20 | // colour.parse 21 | assertEquals(colour.parse('#FF00aa'), '255,0,170'); 22 | assertEquals(colour.parse('#F0a'), '255,0,170'); 23 | assertEquals(colour.parse('rgb(100, 20, 45)'), '100,20,45'); 24 | assertEquals(colour.parse('RGB(100, 20, 45)'), '100,20,45'); 25 | assertEquals(colour.parse('rgb(100,20, 45)'), '100,20,45'); 26 | assertEquals(colour.parse('blue'), '0,0,255'); 27 | assertEquals(colour.parse('BLUE'), '0,0,255'); 28 | assertEquals(colour.parse('bLue'), '0,0,255'); 29 | 30 | // colour.aryToString 31 | assertEquals(colour.aryToString([255,0,10]), 'rgb(255,0,10)'); 32 | 33 | // colour.add 34 | assertEquals(colour.add('red', 'blue'), 'rgb(255,0,255)'); 35 | assertEquals(colour.add('red', 'blue', 'lime'), 'rgb(255,255,255)'); 36 | assertEquals(colour.add('red', 'red', 'red'), 'rgb(255,0,0)'); 37 | 38 | // colour.multiply 39 | assertEquals(colour.multiply('#110022', 2), 'rgb(34,0,68)'); 40 | assertEquals(colour.multiply('red', 17), 'rgb(255,0,0)'); 41 | 42 | // colour.divide 43 | assertEquals(colour.divide('red', 2), 'rgb(128,0,0)'); 44 | assertEquals(colour.divide('#333', 3), 'rgb(17,17,17)'); 45 | 46 | // colour.average 47 | assertEquals(colour.average('red', 'blue'), 'rgb(128,0,128)'); 48 | assertEquals(colour.average('#030000', '#000300', '#000003'), 'rgb(1,1,1)'); 49 | assertEquals(colour.average('red', 'red'), 'rgb(255,0,0)'); 50 | -------------------------------------------------------------------------------- /color.min.js: -------------------------------------------------------------------------------- 1 | var color={};color.parse=function(b){var a;if(typeof b!=="string"){throw Error("Color must be a string.")}a=/rgb\(([0-9]{1,3}), ?([0-9]{1,3}), ?([0-9]{1,3})\)/i.exec(b);if(a){return[parseInt(a[1],10),parseInt(a[2],10),parseInt(a[3],10)]}else{if(b.slice(0,1)==="#"){if(b.length===4){return[parseInt(b.slice(1,2),16)*17,parseInt(b.slice(2,3),16)*17,parseInt(b.slice(3,4),16)*17]}return[parseInt(b.slice(1,3),16),parseInt(b.slice(3,5),16),parseInt(b.slice(5,7),16)]}else{if(this._colors[b.toLowerCase()]){return this._colors[b.toLowerCase()].slice()}else{throw Error("Color not recognised.")}}}};color.aryToString=function(b){if(!Array.isArray(b)){throw Error("Color must be an array.")}b="rgb("+b.join(",")+")";try{color.parse(b)}catch(a){throw Error("Invalid array.")}return b};color.add=function(){var a=[0,0,0],b,c;for(b=0;b255){a[d]=255}});return color.aryToString(a)};color.multiply=function(b,a){b=color.parse(b);if(typeof a!=="number"){throw Error("Must be a number")}b.forEach(function(e,c){b[c]=Math.round((e*a>255)?255:e*a)});return color.aryToString(b)};color.divide=function(b,a){return color.multiply(b,1/a)};color.average=function(){for(var a=0;a255){a[d]=255}});return colour.aryToString(a)};colour.multiply=function(b,a){b=colour.parse(b);if(typeof a!=="number"){throw Error("Must be a number")}b.forEach(function(e,c){b[c]=Math.round((e*a>255)?255:e*a)});return colour.aryToString(b)};colour.divide=function(b,a){return colour.multiply(b,1/a)};colour.average=function(){for(var a=0;a 255) { 103 | endColour[i] = 255; 104 | } 105 | }); 106 | 107 | return colour.aryToString(endColour); 108 | }; 109 | 110 | /** 111 | * Multiplies a colour by a constant. 112 | * 113 | * @param string c The colour. 114 | * @param int i The constant. 115 | * @returns string The new colour. 116 | */ 117 | colour.multiply = function (c, i) { 118 | "use strict"; 119 | 120 | c = colour.parse(c); 121 | 122 | if (typeof i !== 'number') { 123 | throw Error('Must be a number'); 124 | } 125 | 126 | c.forEach(function (d, j) { 127 | c[j] = Math.round((d * i > 255) ? 255 : d * i); 128 | }); 129 | 130 | return colour.aryToString(c); 131 | }; 132 | 133 | /** 134 | * Divides a colour by a constant. 135 | * 136 | * @param string c The colour. 137 | * @param int i The constant. 138 | * @returns string The new colour. 139 | */ 140 | colour.divide = function (c, i) { 141 | "use strict"; 142 | 143 | return colour.multiply(c, 1 / i); 144 | }; 145 | 146 | /** 147 | * Returns the average of two or more numbers. 148 | * 149 | * @param string c1 The first colour. 150 | * @param string c2 The second colour. 151 | * ...etc 152 | * @returns string The new colour. 153 | */ 154 | colour.average = function () { 155 | "use strict"; 156 | 157 | for (var i = 0; i < arguments.length; i++) { 158 | arguments[i] = colour.divide(arguments[i], arguments.length); 159 | } 160 | 161 | return colour.add.apply(null, arguments); 162 | }; 163 | 164 | colour._colours = { 165 | aliceblue: [240, 248, 255], 166 | antiquewhite: [250, 235, 215], 167 | aqua: [0, 255, 255], 168 | aquamarine: [127, 255, 212], 169 | azure: [240, 255, 255], 170 | beige: [245, 245, 220], 171 | bisque: [255, 228, 196], 172 | black: [0, 0, 0], 173 | blanchedalmond: [255, 235, 205], 174 | blue: [0, 0, 255], 175 | blueviolet: [138, 43, 226], 176 | brown: [165, 42, 42], 177 | burlywood: [222, 184, 135], 178 | cadetblue: [95, 158, 160], 179 | chartreuse: [127, 255, 0], 180 | chocolate: [210, 105, 30], 181 | coral: [255, 127, 80], 182 | cornflowerblue: [100, 149, 237], 183 | cornsilk: [255, 248, 220], 184 | crimson: [220, 20, 60], 185 | cyan: [0, 255, 255], 186 | darkblue: [0, 0, 139], 187 | darkcyan: [0, 139, 139], 188 | darkgoldenrod: [184, 134, 11], 189 | darkgray: [169, 169, 169], 190 | darkgreen: [0, 100, 0], 191 | darkkhaki: [189, 183, 107], 192 | darkmagenta: [139, 0, 139], 193 | darkolivegreen: [85, 107, 47], 194 | darkorange: [255, 140, 0], 195 | darkorchid: [153, 50, 204], 196 | darkred: [139, 0, 0], 197 | darksalmon: [233, 150, 122], 198 | darkseagreen: [143, 188, 143], 199 | darkslateblue: [72, 61, 139], 200 | darkslategray: [47, 79, 79], 201 | darkturquoise: [0, 206, 209], 202 | darkviolet: [148, 0, 211], 203 | deeppink: [255, 20, 147], 204 | deepskyblue: [0, 191, 255], 205 | dimgray: [105, 105, 105], 206 | dodgerblue: [30, 144, 255], 207 | firebrick: [178, 34, 34], 208 | floralwhite: [255, 250, 240], 209 | forestgreen: [34, 139, 34], 210 | fuchsia: [255, 0, 255], 211 | gainsboro: [220, 220, 220], 212 | ghostwhite: [248, 248, 255], 213 | gold: [255, 215, 0], 214 | goldenrod: [218, 165, 32], 215 | gray: [128, 128, 128], 216 | green: [0, 128, 0], 217 | greenyellow: [173, 255, 47], 218 | honeydew: [240, 255, 240], 219 | hotpink: [255, 105, 180], 220 | indianred: [205, 92, 92], 221 | indigo: [75, 0, 130], 222 | ivory: [255, 255, 240], 223 | khaki: [240, 230, 140], 224 | lavender: [230, 230, 250], 225 | lavenderblush: [255, 240, 245], 226 | lawngreen: [124, 252, 0], 227 | lemonchiffon: [255, 250, 205], 228 | lightblue: [173, 216, 230], 229 | lightcoral: [240, 128, 128], 230 | lightcyan: [224, 255, 255], 231 | lightgoldenrodyellow: [250, 250, 210], 232 | lightgrey: [211, 211, 211], 233 | lightgreen: [144, 238, 144], 234 | lightpink: [255, 182, 193], 235 | lightsalmon: [255, 160, 122], 236 | lightseagreen: [32, 178, 170], 237 | lightskyblue: [135, 206, 250], 238 | lightslategray: [119, 136, 153], 239 | lightsteelblue: [176, 196, 222], 240 | lightyellow: [255, 255, 224], 241 | lime: [0, 255, 0], 242 | limegreen: [50, 205, 50], 243 | linen: [250, 240, 230], 244 | magenta: [255, 0, 255], 245 | maroon: [128, 0, 0], 246 | mediumaquamarine: [102, 205, 170], 247 | mediumblue: [0, 0, 205], 248 | mediumorchid: [186, 85, 211], 249 | mediumpurple: [147, 112, 216], 250 | mediumseagreen: [60, 179, 113], 251 | mediumslateblue: [123, 104, 238], 252 | mediumspringgreen: [0, 250, 154], 253 | mediumturquoise: [72, 209, 204], 254 | mediumvioletred: [199, 21, 133], 255 | midnightblue: [25, 25, 112], 256 | mintcream: [245, 255, 250], 257 | mistyrose: [255, 228, 225], 258 | moccasin: [255, 228, 181], 259 | navajowhite: [255, 222, 173], 260 | navy: [0, 0, 128], 261 | oldlace: [253, 245, 230], 262 | olive: [128, 128, 0], 263 | olivedrab: [107, 142, 35], 264 | orange: [255, 165, 0], 265 | orangered: [255, 69, 0], 266 | orchid: [218, 112, 214], 267 | palegoldenrod: [238, 232, 170], 268 | palegreen: [152, 251, 152], 269 | paleturquoise: [175, 238, 238], 270 | palevioletred: [216, 112, 147], 271 | papayawhip: [255, 239, 213], 272 | peachpuff: [255, 218, 185], 273 | peru: [205, 133, 63], 274 | pink: [255, 192, 203], 275 | plum: [221, 160, 221], 276 | powderblue: [176, 224, 230], 277 | purple: [128, 0, 128], 278 | red: [255, 0, 0], 279 | rosybrown: [188, 143, 143], 280 | royalblue: [65, 105, 225], 281 | saddlebrown: [139, 69, 19], 282 | salmon: [250, 128, 114], 283 | sandybrown: [244, 164, 96], 284 | seagreen: [46, 139, 87], 285 | seashell: [255, 245, 238], 286 | sienna: [160, 82, 45], 287 | silver: [192, 192, 192], 288 | skyblue: [135, 206, 235], 289 | slateblue: [106, 90, 205], 290 | slategray: [112, 128, 144], 291 | snow: [255, 250, 250], 292 | springgreen: [0, 255, 127], 293 | steelblue: [70, 130, 180], 294 | tan: [210, 180, 140], 295 | teal: [0, 128, 128], 296 | thistle: [216, 191, 216], 297 | tomato: [255, 99, 71], 298 | turquoise: [64, 224, 208], 299 | violet: [238, 130, 238], 300 | wheat: [245, 222, 179], 301 | white: [255, 255, 255], 302 | whitesmoke: [245, 245, 245], 303 | yellow: [255, 255, 0], 304 | yellowgreen: [154, 205, 50] 305 | }; 306 | 307 | // baconjs support 308 | if (typeof bacon === 'function') { 309 | bacon.colour = colour; 310 | } 311 | 312 | // jQuery support 313 | if (typeof jQuery === 'function') { 314 | jQuery.colour = colour; 315 | } 316 | --------------------------------------------------------------------------------