├── defaults ├── dunes.jpg ├── noise.png ├── monalisa.jpg ├── baratfolies.jpg ├── starrynight.jpg └── supperatemmaus.jpg ├── README.md ├── LICENSE.md ├── index.html └── thirdparty └── conversions.js /defaults/dunes.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Overv/ColorScatterPlot/HEAD/defaults/dunes.jpg -------------------------------------------------------------------------------- /defaults/noise.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Overv/ColorScatterPlot/HEAD/defaults/noise.png -------------------------------------------------------------------------------- /defaults/monalisa.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Overv/ColorScatterPlot/HEAD/defaults/monalisa.jpg -------------------------------------------------------------------------------- /defaults/baratfolies.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Overv/ColorScatterPlot/HEAD/defaults/baratfolies.jpg -------------------------------------------------------------------------------- /defaults/starrynight.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Overv/ColorScatterPlot/HEAD/defaults/starrynight.jpg -------------------------------------------------------------------------------- /defaults/supperatemmaus.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Overv/ColorScatterPlot/HEAD/defaults/supperatemmaus.jpg -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | This visualization represents the colors of pixels of in an image as a 3D 2 | scatterplot with JavaScript and WebGL. 3 | 4 | It uses the following third-party libraries: 5 | 6 | * [color-convert](https://github.com/Qix-/color-convert) 7 | * [Plotly](https://plot.ly/) 8 | 9 | The license for the code is MIT and the images in the `defaults` directory are 10 | licensed as public domain. -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | Copyright 2017 Alexander Overvoorde 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 4 | 5 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 6 | 7 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Image Scatterplot 7 | 8 | 9 | 10 | 48 | 49 | 50 | 51 | 58 | 59 | 60 | 61 |
62 |
63 |

3D scatterplot of an image

64 | 65 |

66 | This is a tool to display all the colors in an image in a 3D scatterplot based on the pixel values. You can select your own image or click one of the existing images to view the scatterplot. Images you select are only processed in your browser. 67 |

68 |
69 | 70 |
71 |
72 |
73 |
74 |

75 | 76 | 77 |

78 | 79 |
80 |
81 |
82 | 83 |
84 |
85 | 86 |
87 |
88 | 89 |
90 |
91 | 92 |
93 |
94 | 95 |
96 |
97 | 98 |
99 |
100 | 101 |
102 |
103 | 104 |
105 |
106 | 107 |
108 |
109 | 110 |
111 |
112 |
113 |
114 |
115 |
116 |
117 | 118 |
119 |
120 |
121 |

122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 |

131 | 132 |
133 |
134 |
135 |
136 |
137 | 138 |

139 | Developed by Alexander Overvoorde at Serious Company (GitHub repository) 140 |

141 |
142 | 143 | 144 |
145 | 146 |
148 | 149 | 150 | 151 | 325 | 326 | 327 | -------------------------------------------------------------------------------- /thirdparty/conversions.js: -------------------------------------------------------------------------------- 1 | /* MIT license */ 2 | 3 | // NOTE: conversions should only return primitive values (i.e. arrays, or 4 | // values that give correct `typeof` results). 5 | // do not use box values types (i.e. Number(), String(), etc.) 6 | 7 | var reverseKeywords = {}; 8 | 9 | var convert = { 10 | rgb: {channels: 3, labels: 'rgb'}, 11 | hsl: {channels: 3, labels: 'hsl'}, 12 | hsv: {channels: 3, labels: 'hsv'}, 13 | hwb: {channels: 3, labels: 'hwb'}, 14 | cmyk: {channels: 4, labels: 'cmyk'}, 15 | xyz: {channels: 3, labels: 'xyz'}, 16 | lab: {channels: 3, labels: 'lab'}, 17 | lch: {channels: 3, labels: 'lch'}, 18 | hex: {channels: 1, labels: ['hex']}, 19 | keyword: {channels: 1, labels: ['keyword']}, 20 | ansi16: {channels: 1, labels: ['ansi16']}, 21 | ansi256: {channels: 1, labels: ['ansi256']}, 22 | hcg: {channels: 3, labels: ['h', 'c', 'g']}, 23 | apple: {channels: 3, labels: ['r16', 'g16', 'b16']}, 24 | gray: {channels: 1, labels: ['gray']} 25 | }; 26 | 27 | // hide .channels and .labels properties 28 | for (var model in convert) { 29 | if (convert.hasOwnProperty(model)) { 30 | if (!('channels' in convert[model])) { 31 | throw new Error('missing channels property: ' + model); 32 | } 33 | 34 | if (!('labels' in convert[model])) { 35 | throw new Error('missing channel labels property: ' + model); 36 | } 37 | 38 | if (convert[model].labels.length !== convert[model].channels) { 39 | throw new Error('channel and label counts mismatch: ' + model); 40 | } 41 | 42 | var channels = convert[model].channels; 43 | var labels = convert[model].labels; 44 | delete convert[model].channels; 45 | delete convert[model].labels; 46 | Object.defineProperty(convert[model], 'channels', {value: channels}); 47 | Object.defineProperty(convert[model], 'labels', {value: labels}); 48 | } 49 | } 50 | 51 | convert.rgb.hsl = function (rgb) { 52 | var r = rgb[0] / 255; 53 | var g = rgb[1] / 255; 54 | var b = rgb[2] / 255; 55 | var min = Math.min(r, g, b); 56 | var max = Math.max(r, g, b); 57 | var delta = max - min; 58 | var h; 59 | var s; 60 | var l; 61 | 62 | if (max === min) { 63 | h = 0; 64 | } else if (r === max) { 65 | h = (g - b) / delta; 66 | } else if (g === max) { 67 | h = 2 + (b - r) / delta; 68 | } else if (b === max) { 69 | h = 4 + (r - g) / delta; 70 | } 71 | 72 | h = Math.min(h * 60, 360); 73 | 74 | if (h < 0) { 75 | h += 360; 76 | } 77 | 78 | l = (min + max) / 2; 79 | 80 | if (max === min) { 81 | s = 0; 82 | } else if (l <= 0.5) { 83 | s = delta / (max + min); 84 | } else { 85 | s = delta / (2 - max - min); 86 | } 87 | 88 | return [h, s * 100, l * 100]; 89 | }; 90 | 91 | convert.rgb.hsv = function (rgb) { 92 | var r = rgb[0]; 93 | var g = rgb[1]; 94 | var b = rgb[2]; 95 | var min = Math.min(r, g, b); 96 | var max = Math.max(r, g, b); 97 | var delta = max - min; 98 | var h; 99 | var s; 100 | var v; 101 | 102 | if (max === 0) { 103 | s = 0; 104 | } else { 105 | s = (delta / max * 1000) / 10; 106 | } 107 | 108 | if (max === min) { 109 | h = 0; 110 | } else if (r === max) { 111 | h = (g - b) / delta; 112 | } else if (g === max) { 113 | h = 2 + (b - r) / delta; 114 | } else if (b === max) { 115 | h = 4 + (r - g) / delta; 116 | } 117 | 118 | h = Math.min(h * 60, 360); 119 | 120 | if (h < 0) { 121 | h += 360; 122 | } 123 | 124 | v = ((max / 255) * 1000) / 10; 125 | 126 | return [h, s, v]; 127 | }; 128 | 129 | convert.rgb.hwb = function (rgb) { 130 | var r = rgb[0]; 131 | var g = rgb[1]; 132 | var b = rgb[2]; 133 | var h = convert.rgb.hsl(rgb)[0]; 134 | var w = 1 / 255 * Math.min(r, Math.min(g, b)); 135 | 136 | b = 1 - 1 / 255 * Math.max(r, Math.max(g, b)); 137 | 138 | return [h, w * 100, b * 100]; 139 | }; 140 | 141 | convert.rgb.cmyk = function (rgb) { 142 | var r = rgb[0] / 255; 143 | var g = rgb[1] / 255; 144 | var b = rgb[2] / 255; 145 | var c; 146 | var m; 147 | var y; 148 | var k; 149 | 150 | k = Math.min(1 - r, 1 - g, 1 - b); 151 | c = (1 - r - k) / (1 - k) || 0; 152 | m = (1 - g - k) / (1 - k) || 0; 153 | y = (1 - b - k) / (1 - k) || 0; 154 | 155 | return [c * 100, m * 100, y * 100, k * 100]; 156 | }; 157 | 158 | /** 159 | * See https://en.m.wikipedia.org/wiki/Euclidean_distance#Squared_Euclidean_distance 160 | * */ 161 | function comparativeDistance(x, y) { 162 | return ( 163 | Math.pow(x[0] - y[0], 2) + 164 | Math.pow(x[1] - y[1], 2) + 165 | Math.pow(x[2] - y[2], 2) 166 | ); 167 | } 168 | 169 | convert.rgb.keyword = function (rgb) { 170 | var reversed = reverseKeywords[rgb]; 171 | if (reversed) { 172 | return reversed; 173 | } 174 | 175 | var currentClosestDistance = Infinity; 176 | var currentClosestKeyword; 177 | 178 | for (var keyword in cssKeywords) { 179 | if (cssKeywords.hasOwnProperty(keyword)) { 180 | var value = cssKeywords[keyword]; 181 | 182 | // Compute comparative distance 183 | var distance = comparativeDistance(rgb, value); 184 | 185 | // Check if its less, if so set as closest 186 | if (distance < currentClosestDistance) { 187 | currentClosestDistance = distance; 188 | currentClosestKeyword = keyword; 189 | } 190 | } 191 | } 192 | 193 | return currentClosestKeyword; 194 | }; 195 | 196 | convert.keyword.rgb = function (keyword) { 197 | return cssKeywords[keyword]; 198 | }; 199 | 200 | convert.rgb.xyz = function (rgb) { 201 | var r = rgb[0] / 255; 202 | var g = rgb[1] / 255; 203 | var b = rgb[2] / 255; 204 | 205 | // assume sRGB 206 | r = r > 0.04045 ? Math.pow(((r + 0.055) / 1.055), 2.4) : (r / 12.92); 207 | g = g > 0.04045 ? Math.pow(((g + 0.055) / 1.055), 2.4) : (g / 12.92); 208 | b = b > 0.04045 ? Math.pow(((b + 0.055) / 1.055), 2.4) : (b / 12.92); 209 | 210 | var x = (r * 0.4124) + (g * 0.3576) + (b * 0.1805); 211 | var y = (r * 0.2126) + (g * 0.7152) + (b * 0.0722); 212 | var z = (r * 0.0193) + (g * 0.1192) + (b * 0.9505); 213 | 214 | return [x * 100, y * 100, z * 100]; 215 | }; 216 | 217 | convert.rgb.lab = function (rgb) { 218 | var xyz = convert.rgb.xyz(rgb); 219 | var x = xyz[0]; 220 | var y = xyz[1]; 221 | var z = xyz[2]; 222 | var l; 223 | var a; 224 | var b; 225 | 226 | x /= 95.047; 227 | y /= 100; 228 | z /= 108.883; 229 | 230 | x = x > 0.008856 ? Math.pow(x, 1 / 3) : (7.787 * x) + (16 / 116); 231 | y = y > 0.008856 ? Math.pow(y, 1 / 3) : (7.787 * y) + (16 / 116); 232 | z = z > 0.008856 ? Math.pow(z, 1 / 3) : (7.787 * z) + (16 / 116); 233 | 234 | l = (116 * y) - 16; 235 | a = 500 * (x - y); 236 | b = 200 * (y - z); 237 | 238 | return [l, a, b]; 239 | }; 240 | 241 | convert.hsl.rgb = function (hsl) { 242 | var h = hsl[0] / 360; 243 | var s = hsl[1] / 100; 244 | var l = hsl[2] / 100; 245 | var t1; 246 | var t2; 247 | var t3; 248 | var rgb; 249 | var val; 250 | 251 | if (s === 0) { 252 | val = l * 255; 253 | return [val, val, val]; 254 | } 255 | 256 | if (l < 0.5) { 257 | t2 = l * (1 + s); 258 | } else { 259 | t2 = l + s - l * s; 260 | } 261 | 262 | t1 = 2 * l - t2; 263 | 264 | rgb = [0, 0, 0]; 265 | for (var i = 0; i < 3; i++) { 266 | t3 = h + 1 / 3 * -(i - 1); 267 | if (t3 < 0) { 268 | t3++; 269 | } 270 | if (t3 > 1) { 271 | t3--; 272 | } 273 | 274 | if (6 * t3 < 1) { 275 | val = t1 + (t2 - t1) * 6 * t3; 276 | } else if (2 * t3 < 1) { 277 | val = t2; 278 | } else if (3 * t3 < 2) { 279 | val = t1 + (t2 - t1) * (2 / 3 - t3) * 6; 280 | } else { 281 | val = t1; 282 | } 283 | 284 | rgb[i] = val * 255; 285 | } 286 | 287 | return rgb; 288 | }; 289 | 290 | convert.hsl.hsv = function (hsl) { 291 | var h = hsl[0]; 292 | var s = hsl[1] / 100; 293 | var l = hsl[2] / 100; 294 | var smin = s; 295 | var lmin = Math.max(l, 0.01); 296 | var sv; 297 | var v; 298 | 299 | l *= 2; 300 | s *= (l <= 1) ? l : 2 - l; 301 | smin *= lmin <= 1 ? lmin : 2 - lmin; 302 | v = (l + s) / 2; 303 | sv = l === 0 ? (2 * smin) / (lmin + smin) : (2 * s) / (l + s); 304 | 305 | return [h, sv * 100, v * 100]; 306 | }; 307 | 308 | convert.hsv.rgb = function (hsv) { 309 | var h = hsv[0] / 60; 310 | var s = hsv[1] / 100; 311 | var v = hsv[2] / 100; 312 | var hi = Math.floor(h) % 6; 313 | 314 | var f = h - Math.floor(h); 315 | var p = 255 * v * (1 - s); 316 | var q = 255 * v * (1 - (s * f)); 317 | var t = 255 * v * (1 - (s * (1 - f))); 318 | v *= 255; 319 | 320 | switch (hi) { 321 | case 0: 322 | return [v, t, p]; 323 | case 1: 324 | return [q, v, p]; 325 | case 2: 326 | return [p, v, t]; 327 | case 3: 328 | return [p, q, v]; 329 | case 4: 330 | return [t, p, v]; 331 | case 5: 332 | return [v, p, q]; 333 | } 334 | }; 335 | 336 | convert.hsv.hsl = function (hsv) { 337 | var h = hsv[0]; 338 | var s = hsv[1] / 100; 339 | var v = hsv[2] / 100; 340 | var vmin = Math.max(v, 0.01); 341 | var lmin; 342 | var sl; 343 | var l; 344 | 345 | l = (2 - s) * v; 346 | lmin = (2 - s) * vmin; 347 | sl = s * vmin; 348 | sl /= (lmin <= 1) ? lmin : 2 - lmin; 349 | sl = sl || 0; 350 | l /= 2; 351 | 352 | return [h, sl * 100, l * 100]; 353 | }; 354 | 355 | // http://dev.w3.org/csswg/css-color/#hwb-to-rgb 356 | convert.hwb.rgb = function (hwb) { 357 | var h = hwb[0] / 360; 358 | var wh = hwb[1] / 100; 359 | var bl = hwb[2] / 100; 360 | var ratio = wh + bl; 361 | var i; 362 | var v; 363 | var f; 364 | var n; 365 | 366 | // wh + bl cant be > 1 367 | if (ratio > 1) { 368 | wh /= ratio; 369 | bl /= ratio; 370 | } 371 | 372 | i = Math.floor(6 * h); 373 | v = 1 - bl; 374 | f = 6 * h - i; 375 | 376 | if ((i & 0x01) !== 0) { 377 | f = 1 - f; 378 | } 379 | 380 | n = wh + f * (v - wh); // linear interpolation 381 | 382 | var r; 383 | var g; 384 | var b; 385 | switch (i) { 386 | default: 387 | case 6: 388 | case 0: r = v; g = n; b = wh; break; 389 | case 1: r = n; g = v; b = wh; break; 390 | case 2: r = wh; g = v; b = n; break; 391 | case 3: r = wh; g = n; b = v; break; 392 | case 4: r = n; g = wh; b = v; break; 393 | case 5: r = v; g = wh; b = n; break; 394 | } 395 | 396 | return [r * 255, g * 255, b * 255]; 397 | }; 398 | 399 | convert.cmyk.rgb = function (cmyk) { 400 | var c = cmyk[0] / 100; 401 | var m = cmyk[1] / 100; 402 | var y = cmyk[2] / 100; 403 | var k = cmyk[3] / 100; 404 | var r; 405 | var g; 406 | var b; 407 | 408 | r = 1 - Math.min(1, c * (1 - k) + k); 409 | g = 1 - Math.min(1, m * (1 - k) + k); 410 | b = 1 - Math.min(1, y * (1 - k) + k); 411 | 412 | return [r * 255, g * 255, b * 255]; 413 | }; 414 | 415 | convert.xyz.rgb = function (xyz) { 416 | var x = xyz[0] / 100; 417 | var y = xyz[1] / 100; 418 | var z = xyz[2] / 100; 419 | var r; 420 | var g; 421 | var b; 422 | 423 | r = (x * 3.2406) + (y * -1.5372) + (z * -0.4986); 424 | g = (x * -0.9689) + (y * 1.8758) + (z * 0.0415); 425 | b = (x * 0.0557) + (y * -0.2040) + (z * 1.0570); 426 | 427 | // assume sRGB 428 | r = r > 0.0031308 429 | ? ((1.055 * Math.pow(r, 1.0 / 2.4)) - 0.055) 430 | : r * 12.92; 431 | 432 | g = g > 0.0031308 433 | ? ((1.055 * Math.pow(g, 1.0 / 2.4)) - 0.055) 434 | : g * 12.92; 435 | 436 | b = b > 0.0031308 437 | ? ((1.055 * Math.pow(b, 1.0 / 2.4)) - 0.055) 438 | : b * 12.92; 439 | 440 | r = Math.min(Math.max(0, r), 1); 441 | g = Math.min(Math.max(0, g), 1); 442 | b = Math.min(Math.max(0, b), 1); 443 | 444 | return [r * 255, g * 255, b * 255]; 445 | }; 446 | 447 | convert.xyz.lab = function (xyz) { 448 | var x = xyz[0]; 449 | var y = xyz[1]; 450 | var z = xyz[2]; 451 | var l; 452 | var a; 453 | var b; 454 | 455 | x /= 95.047; 456 | y /= 100; 457 | z /= 108.883; 458 | 459 | x = x > 0.008856 ? Math.pow(x, 1 / 3) : (7.787 * x) + (16 / 116); 460 | y = y > 0.008856 ? Math.pow(y, 1 / 3) : (7.787 * y) + (16 / 116); 461 | z = z > 0.008856 ? Math.pow(z, 1 / 3) : (7.787 * z) + (16 / 116); 462 | 463 | l = (116 * y) - 16; 464 | a = 500 * (x - y); 465 | b = 200 * (y - z); 466 | 467 | return [l, a, b]; 468 | }; 469 | 470 | convert.lab.xyz = function (lab) { 471 | var l = lab[0]; 472 | var a = lab[1]; 473 | var b = lab[2]; 474 | var x; 475 | var y; 476 | var z; 477 | 478 | y = (l + 16) / 116; 479 | x = a / 500 + y; 480 | z = y - b / 200; 481 | 482 | var y2 = Math.pow(y, 3); 483 | var x2 = Math.pow(x, 3); 484 | var z2 = Math.pow(z, 3); 485 | y = y2 > 0.008856 ? y2 : (y - 16 / 116) / 7.787; 486 | x = x2 > 0.008856 ? x2 : (x - 16 / 116) / 7.787; 487 | z = z2 > 0.008856 ? z2 : (z - 16 / 116) / 7.787; 488 | 489 | x *= 95.047; 490 | y *= 100; 491 | z *= 108.883; 492 | 493 | return [x, y, z]; 494 | }; 495 | 496 | convert.lab.lch = function (lab) { 497 | var l = lab[0]; 498 | var a = lab[1]; 499 | var b = lab[2]; 500 | var hr; 501 | var h; 502 | var c; 503 | 504 | hr = Math.atan2(b, a); 505 | h = hr * 360 / 2 / Math.PI; 506 | 507 | if (h < 0) { 508 | h += 360; 509 | } 510 | 511 | c = Math.sqrt(a * a + b * b); 512 | 513 | return [l, c, h]; 514 | }; 515 | 516 | convert.lch.lab = function (lch) { 517 | var l = lch[0]; 518 | var c = lch[1]; 519 | var h = lch[2]; 520 | var a; 521 | var b; 522 | var hr; 523 | 524 | hr = h / 360 * 2 * Math.PI; 525 | a = c * Math.cos(hr); 526 | b = c * Math.sin(hr); 527 | 528 | return [l, a, b]; 529 | }; 530 | 531 | convert.rgb.ansi16 = function (args) { 532 | var r = args[0]; 533 | var g = args[1]; 534 | var b = args[2]; 535 | var value = 1 in arguments ? arguments[1] : convert.rgb.hsv(args)[2]; // hsv -> ansi16 optimization 536 | 537 | value = Math.round(value / 50); 538 | 539 | if (value === 0) { 540 | return 30; 541 | } 542 | 543 | var ansi = 30 544 | + ((Math.round(b / 255) << 2) 545 | | (Math.round(g / 255) << 1) 546 | | Math.round(r / 255)); 547 | 548 | if (value === 2) { 549 | ansi += 60; 550 | } 551 | 552 | return ansi; 553 | }; 554 | 555 | convert.hsv.ansi16 = function (args) { 556 | // optimization here; we already know the value and don't need to get 557 | // it converted for us. 558 | return convert.rgb.ansi16(convert.hsv.rgb(args), args[2]); 559 | }; 560 | 561 | convert.rgb.ansi256 = function (args) { 562 | var r = args[0]; 563 | var g = args[1]; 564 | var b = args[2]; 565 | 566 | // we use the extended greyscale palette here, with the exception of 567 | // black and white. normal palette only has 4 greyscale shades. 568 | if (r === g && g === b) { 569 | if (r < 8) { 570 | return 16; 571 | } 572 | 573 | if (r > 248) { 574 | return 231; 575 | } 576 | 577 | return Math.round(((r - 8) / 247) * 24) + 232; 578 | } 579 | 580 | var ansi = 16 581 | + (36 * Math.round(r / 255 * 5)) 582 | + (6 * Math.round(g / 255 * 5)) 583 | + Math.round(b / 255 * 5); 584 | 585 | return ansi; 586 | }; 587 | 588 | convert.ansi16.rgb = function (args) { 589 | var color = args % 10; 590 | 591 | // handle greyscale 592 | if (color === 0 || color === 7) { 593 | if (args > 50) { 594 | color += 3.5; 595 | } 596 | 597 | color = color / 10.5 * 255; 598 | 599 | return [color, color, color]; 600 | } 601 | 602 | var mult = (~~(args > 50) + 1) * 0.5; 603 | var r = ((color & 1) * mult) * 255; 604 | var g = (((color >> 1) & 1) * mult) * 255; 605 | var b = (((color >> 2) & 1) * mult) * 255; 606 | 607 | return [r, g, b]; 608 | }; 609 | 610 | convert.ansi256.rgb = function (args) { 611 | // handle greyscale 612 | if (args >= 232) { 613 | var c = (args - 232) * 10 + 8; 614 | return [c, c, c]; 615 | } 616 | 617 | args -= 16; 618 | 619 | var rem; 620 | var r = Math.floor(args / 36) / 5 * 255; 621 | var g = Math.floor((rem = args % 36) / 6) / 5 * 255; 622 | var b = (rem % 6) / 5 * 255; 623 | 624 | return [r, g, b]; 625 | }; 626 | 627 | convert.rgb.hex = function (args) { 628 | var integer = ((Math.round(args[0]) & 0xFF) << 16) 629 | + ((Math.round(args[1]) & 0xFF) << 8) 630 | + (Math.round(args[2]) & 0xFF); 631 | 632 | var string = integer.toString(16).toUpperCase(); 633 | return '000000'.substring(string.length) + string; 634 | }; 635 | 636 | convert.hex.rgb = function (args) { 637 | var match = args.toString(16).match(/[a-f0-9]{6}|[a-f0-9]{3}/i); 638 | if (!match) { 639 | return [0, 0, 0]; 640 | } 641 | 642 | var colorString = match[0]; 643 | 644 | if (match[0].length === 3) { 645 | colorString = colorString.split('').map(function (char) { 646 | return char + char; 647 | }).join(''); 648 | } 649 | 650 | var integer = parseInt(colorString, 16); 651 | var r = (integer >> 16) & 0xFF; 652 | var g = (integer >> 8) & 0xFF; 653 | var b = integer & 0xFF; 654 | 655 | return [r, g, b]; 656 | }; 657 | 658 | convert.rgb.hcg = function (rgb) { 659 | var r = rgb[0] / 255; 660 | var g = rgb[1] / 255; 661 | var b = rgb[2] / 255; 662 | var max = Math.max(Math.max(r, g), b); 663 | var min = Math.min(Math.min(r, g), b); 664 | var chroma = (max - min); 665 | var grayscale; 666 | var hue; 667 | 668 | if (chroma < 1) { 669 | grayscale = min / (1 - chroma); 670 | } else { 671 | grayscale = 0; 672 | } 673 | 674 | if (chroma <= 0) { 675 | hue = 0; 676 | } else 677 | if (max === r) { 678 | hue = ((g - b) / chroma) % 6; 679 | } else 680 | if (max === g) { 681 | hue = 2 + (b - r) / chroma; 682 | } else { 683 | hue = 4 + (r - g) / chroma + 4; 684 | } 685 | 686 | hue /= 6; 687 | hue %= 1; 688 | 689 | return [hue * 360, chroma * 100, grayscale * 100]; 690 | }; 691 | 692 | convert.hsl.hcg = function (hsl) { 693 | var s = hsl[1] / 100; 694 | var l = hsl[2] / 100; 695 | var c = 1; 696 | var f = 0; 697 | 698 | if (l < 0.5) { 699 | c = 2.0 * s * l; 700 | } else { 701 | c = 2.0 * s * (1.0 - l); 702 | } 703 | 704 | if (c < 1.0) { 705 | f = (l - 0.5 * c) / (1.0 - c); 706 | } 707 | 708 | return [hsl[0], c * 100, f * 100]; 709 | }; 710 | 711 | convert.hsv.hcg = function (hsv) { 712 | var s = hsv[1] / 100; 713 | var v = hsv[2] / 100; 714 | 715 | var c = s * v; 716 | var f = 0; 717 | 718 | if (c < 1.0) { 719 | f = (v - c) / (1 - c); 720 | } 721 | 722 | return [hsv[0], c * 100, f * 100]; 723 | }; 724 | 725 | convert.hcg.rgb = function (hcg) { 726 | var h = hcg[0] / 360; 727 | var c = hcg[1] / 100; 728 | var g = hcg[2] / 100; 729 | 730 | if (c === 0.0) { 731 | return [g * 255, g * 255, g * 255]; 732 | } 733 | 734 | var pure = [0, 0, 0]; 735 | var hi = (h % 1) * 6; 736 | var v = hi % 1; 737 | var w = 1 - v; 738 | var mg = 0; 739 | 740 | switch (Math.floor(hi)) { 741 | case 0: 742 | pure[0] = 1; pure[1] = v; pure[2] = 0; break; 743 | case 1: 744 | pure[0] = w; pure[1] = 1; pure[2] = 0; break; 745 | case 2: 746 | pure[0] = 0; pure[1] = 1; pure[2] = v; break; 747 | case 3: 748 | pure[0] = 0; pure[1] = w; pure[2] = 1; break; 749 | case 4: 750 | pure[0] = v; pure[1] = 0; pure[2] = 1; break; 751 | default: 752 | pure[0] = 1; pure[1] = 0; pure[2] = w; 753 | } 754 | 755 | mg = (1.0 - c) * g; 756 | 757 | return [ 758 | (c * pure[0] + mg) * 255, 759 | (c * pure[1] + mg) * 255, 760 | (c * pure[2] + mg) * 255 761 | ]; 762 | }; 763 | 764 | convert.hcg.hsv = function (hcg) { 765 | var c = hcg[1] / 100; 766 | var g = hcg[2] / 100; 767 | 768 | var v = c + g * (1.0 - c); 769 | var f = 0; 770 | 771 | if (v > 0.0) { 772 | f = c / v; 773 | } 774 | 775 | return [hcg[0], f * 100, v * 100]; 776 | }; 777 | 778 | convert.hcg.hsl = function (hcg) { 779 | var c = hcg[1] / 100; 780 | var g = hcg[2] / 100; 781 | 782 | var l = g * (1.0 - c) + 0.5 * c; 783 | var s = 0; 784 | 785 | if (l > 0.0 && l < 0.5) { 786 | s = c / (2 * l); 787 | } else 788 | if (l >= 0.5 && l < 1.0) { 789 | s = c / (2 * (1 - l)); 790 | } 791 | 792 | return [hcg[0], s * 100, l * 100]; 793 | }; 794 | 795 | convert.hcg.hwb = function (hcg) { 796 | var c = hcg[1] / 100; 797 | var g = hcg[2] / 100; 798 | var v = c + g * (1.0 - c); 799 | return [hcg[0], (v - c) * 100, (1 - v) * 100]; 800 | }; 801 | 802 | convert.hwb.hcg = function (hwb) { 803 | var w = hwb[1] / 100; 804 | var b = hwb[2] / 100; 805 | var v = 1 - b; 806 | var c = v - w; 807 | var g = 0; 808 | 809 | if (c < 1) { 810 | g = (v - c) / (1 - c); 811 | } 812 | 813 | return [hwb[0], c * 100, g * 100]; 814 | }; 815 | 816 | convert.apple.rgb = function (apple) { 817 | return [(apple[0] / 65535) * 255, (apple[1] / 65535) * 255, (apple[2] / 65535) * 255]; 818 | }; 819 | 820 | convert.rgb.apple = function (rgb) { 821 | return [(rgb[0] / 255) * 65535, (rgb[1] / 255) * 65535, (rgb[2] / 255) * 65535]; 822 | }; 823 | 824 | convert.gray.rgb = function (args) { 825 | return [args[0] / 100 * 255, args[0] / 100 * 255, args[0] / 100 * 255]; 826 | }; 827 | 828 | convert.gray.hsl = convert.gray.hsv = function (args) { 829 | return [0, 0, args[0]]; 830 | }; 831 | 832 | convert.gray.hwb = function (gray) { 833 | return [0, 100, gray[0]]; 834 | }; 835 | 836 | convert.gray.cmyk = function (gray) { 837 | return [0, 0, 0, gray[0]]; 838 | }; 839 | 840 | convert.gray.lab = function (gray) { 841 | return [gray[0], 0, 0]; 842 | }; 843 | 844 | convert.gray.hex = function (gray) { 845 | var val = Math.round(gray[0] / 100 * 255) & 0xFF; 846 | var integer = (val << 16) + (val << 8) + val; 847 | 848 | var string = integer.toString(16).toUpperCase(); 849 | return '000000'.substring(string.length) + string; 850 | }; 851 | 852 | convert.rgb.gray = function (rgb) { 853 | var val = (rgb[0] + rgb[1] + rgb[2]) / 3; 854 | return [val / 255 * 100]; 855 | }; 856 | --------------------------------------------------------------------------------