colors.html

   1 <!DOCTYPE html>
   2
   3 <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
   4 <head>
   5     <meta charset="utf-8" />
   6     <title></title>
   7         <style>
   8                 html {
   9                         background-color: #262626;
  10                         color: #999;
  11                 }
  12
  13                 .sample {
  14                         display: inline-block;
  15                         width: 1ex;
  16                         height: 2ex;
  17                         border: 5px solid transparent;
  18                         border-width: 5px 0;
  19                 }
  20
  21                 .out-of-gamut {
  22                         border: 5px solid #262626;
  23                         border-width: 5px 0;
  24                 }
  25
  26         </style>
  27 </head>
  28 <body>
  29
  30         <script type="text/javascript">
  31
  32                 var rgbData = [
  33                         [0, 0, 0], [0, 0, 36], [0, 0, 51], [0, 0, 66], [0, 0, 81], [2, 0, 90], [4, 0, 99], [7, 0, 106], [11, 0, 115], [14, 0, 119], [20, 0, 123], [27, 0, 128], [33, 0, 133],
  34                         [41, 0, 137], [48, 0, 140], [55, 0, 143], [61, 0, 146], [66, 0, 149], [72, 0, 150], [78, 0, 151], [84, 0, 152], [91, 0, 153], [97, 0, 155],
  35                         [104, 0, 155], [110, 0, 156], [115, 0, 157], [122, 0, 157], [128, 0, 157], [134, 0, 157], [139, 0, 157], [146, 0, 156], [152, 0, 155], [157, 0, 155],
  36                         [162, 0, 155], [167, 0, 154], [171, 0, 153], [175, 1, 152], [178, 1, 151], [182, 2, 149], [185, 4, 149], [188, 5, 147], [191, 6, 146], [193, 8, 144],
  37                         [195, 11, 142], [198, 13, 139], [201, 17, 135], [203, 20, 132], [206, 23, 127], [208, 26, 121], [210, 29, 116], [212, 33, 111], [214, 37, 103],
  38                         [217, 41, 97], [219, 46, 89], [221, 49, 78], [223, 53, 66], [224, 56, 54], [226, 60, 42], [228, 64, 30], [229, 68, 25], [231, 72, 20], [232, 76, 16],
  39                         [234, 78, 12], [235, 82, 10], [236, 86, 8], [237, 90, 7], [238, 93, 5], [239, 96, 4], [240, 100, 3], [241, 103, 3], [241, 106, 2], [242, 109, 1],
  40                         [243, 113, 1], [244, 116, 0], [244, 120, 0], [245, 125, 0], [246, 129, 0], [247, 133, 0], [248, 136, 0], [248, 139, 0], [249, 142, 0], [249, 145, 0],
  41                         [250, 149, 0], [251, 154, 0], [252, 159, 0], [253, 163, 0], [253, 168, 0], [253, 172, 0], [254, 176, 0], [254, 179, 0], [254, 184, 0], [254, 187, 0],
  42                         [254, 191, 0], [254, 195, 0], [254, 199, 0], [254, 202, 1], [254, 205, 2], [254, 208, 5], [254, 212, 9], [254, 216, 12], [255, 219, 15],
  43                         [255, 221, 23], [255, 224, 32], [255, 227, 39], [255, 229, 50], [255, 232, 63], [255, 235, 75], [255, 238, 88], [255, 239, 102], [255, 241, 116],
  44                         [255, 242, 134], [255, 244, 149], [255, 245, 164], [255, 247, 179], [255, 248, 192], [255, 249, 203], [255, 251, 216], [255, 253, 228], [255, 254, 239],
  45                         [255, 255, 249]
  46                 ];
  47
  48                 function rgb2hsl(r, g, b) {
  49                         var max = Math.max(r, g, b);
  50                         var min = Math.min(r, g, b);
  51                         var d = max - min;
  52
  53                         var h = 60 * (d == 0 ? 0 : max == r ? (((g - b) / d) % 6) : max == g ? ((b - r) / d + 2) : ((r - g) / d + 4));
  54                         var l = (max + min) / 2 / 255;
  55                         var s = d == 0 ? 0 : (d / 255 / (1 - Math.abs(2 * l - 1)));
  56
  57                         return [h, s * 100, l * 100];
  58                 }
  59
  60                 function rgb2hcy(r, g, b) {
  61                 }
  62
  63                 var oog1 = 0;
  64
  65                 // 601
  66                 var r = .3;
  67                 var g = .59;
  68                 var b = .11;
  69                 // 709
  70                 //r = .21;
  71                 //g = .72;
  72                 //b = .07;
  73
  74                 var use709 = false;
  75                 function toggleStandard() {
  76
  77                         if (use709 = !use709) {
  78
  79                                 r = .21;
  80                                 g = .72;
  81                                 b = .07;
  82
  83                         }
  84
  85                         else {
  86
  87                                 r = .3;
  88                                 g = .59;
  89                                 b = .11;
  90                         }
  91
  92                 }
  93
  94                 // hue Chroma luma
  95                 function hcy2rgb(h, c, y) {
  96                         h0 = h;
  97                         h /= 60;
  98
  99                         var k = (1 - Math.abs((h % 2) - 1));
 100
 101                         var K = h < 1 ? r + k * g
 102                                         : h < 2 ? g + k * r
 103                                                 : h < 3 ? g + k * b
 104                                                         : h < 4 ? b + k * g
 105                                                                 : h < 5 ? b + k * r
 106                                                                         : r + k * b;
 107
 108                         var cmax = 1;
 109
 110                         if (y <= 0 || y >= 1) cmax = 0;
 111                         else cmax *= K < y ? (y - 1) / (K - 1) : K > y ? y / K : 1;
 112                         //c *= cmax;
 113                         c = Math.min(c, cmax);
 114
 115                         var x = c * k;
 116                         var rgb = h < 1 ? [c, x, 0]
 117                     : h < 2 ? [x, c, 0]
 118                         : h < 3 ? [0, c, x]
 119                             : h < 4 ? [0, x, c]
 120                                 : h < 5 ? [x, 0, c]
 121                                     : [c, 0, x];
 122
 123                         var m = y - (r * rgb[0] + g * rgb[1] + b * rgb[2]);
 124
 125                         return [rgb[0] + m, rgb[1] + m, rgb[2] + m];
 126                 }
 127
 128
 129                 function div(color, className, title) {
 130
 131                         var el = document.createElement('div');
 132
 133                         if (color) el.style.backgroundColor = color;
 134                         if (className) el.className = className;
 135                         if (title) el.title = title;
 136
 137                         document.body.appendChild(el);
 138                 }
 139
 140                 function header(text) {
 141                         div();
 142                         document.body.appendChild(document.createTextNode(text));
 143                         div();
 144                 }
 145
 146
 147                 var init = 0;
 148
 149
 150                 function renderAll() {
 151                         document.body.innerHTML = ''
 152                         header('RGB');
 153
 154                         for (var i = 0; i < rgbData.length; ++i) {
 155                                 var color = 'rgb(' + rgbData[i][0] + ',' + rgbData[i][1] + ',' + rgbData[i][2] + ')'
 156                                 div(color, 'sample');
 157                         }
 158
 159                         div();
 160
 161                         var min = 238;
 162                         var max = 360 + 50;
 163
 164                         function ease(v) {
 165
 166                                 v = Math.pow(v, .6)
 167                                 return v*v*v*(v*(v*6-15)+10);
 168                                 return 1 - Math.pow(1 - v, 1.65);
 169                         }
 170
 171                         function ease2(v) {
 172                                 //return .5;
 173                                 return .01+.99*v;
 174                         }
 175
 176                         for (var i = 0; i < rgbData.length; ++i) {
 177                                 var p = i / rgbData.length;
 178
 179                                 var hue = (min + (max - min) * ease(p)) % 360;
 180
 181                                 var c = hcy2rgb(hue, 1, ease2(p));
 182                                 var x = rgbvalue(c[0], c[1], c[2]);
 183                                 var col = x[0];
 184                                 var oog = x[1];
 185
 186                                 div(col, oog ? 'out-of-gamut sample' : 'sample');
 187                         }
 188
 189                         header('Guess');
 190                         header('.');
 191                         header('HSL')
 192
 193                         for (var i = 0; i < rgbData.length; ++i) {
 194                                 var c = rgb2hsl(rgbData[i][0], rgbData[i][1], rgbData[i][2]);
 195                                 var color = 'hsl(' + c[0] + ',' + c[1] + '%,' + c[2] + '%)';
 196
 197                                 div(color, 'sample');
 198                         }
 199                         div();
 200
 201                         function rgbvalue(r, g, b) {
 202
 203                                 var m = 0;
 204                                 var M = 255;
 205
 206                                 r = (M * r) | 0;
 207                                 g = (M * g) | 0;
 208                                 b = (M * b) | 0;
 209
 210                                 var oog = r > M || b > M || g > M || r < m || g < m || b < m;
 211
 212                                 return ['rgb(' + r + ',' + g + ',' + b + ')', oog];
 213                         }
 214
 215                         function renderRainbow() {
 216
 217                                 var chromaLevels = 10;
 218                                 var lumaLevels = 150;
 219
 220                                 for (var chromaLevel = 0; chromaLevel <= chromaLevels; ++chromaLevel) {
 221                                         for (var lumaLevel = 0; lumaLevel <= lumaLevels; ++lumaLevel) {
 222
 223                                                 var c = hcy2rgb((360 * (init + lumaLevel / lumaLevels))%360, 1, chromaLevel / chromaLevels);
 224                                                 var x = rgbvalue(c[0], c[1], c[2]);
 225                                                 var col = x[0];
 226                                                 var oog = x[1];
 227
 228                                                 //var c = [(360 * (init + lumaLevel / lumaLevels)) % 360, 1, chromaLevel / chromaLevels];
 229                                                 //var col = 'hsl(' + c[0] + ',' + c[1]*100 + '%,' + c[2]*100 + '%)';
 230
 231                                                 div(col, oog ? 'out-of-gamut sample' : 'sample', [360 * lumaLevel / lumaLevels, lumaLevel / lumaLevels, chromaLevel / chromaLevels].join(', '));
 232                                         }
 233
 234
 235                                         div();
 236                                 }
 237
 238                                 for (var chromaLevel = 0; chromaLevel <= chromaLevels; ++chromaLevel) {
 239                                         for (var lumaLevel = 0; lumaLevel <= lumaLevels; ++lumaLevel) {
 240
 241                                                 var c = [(360 * (init + lumaLevel / lumaLevels)) % 360, 1, chromaLevel / chromaLevels];
 242                                                 var col = 'hsl(' + c[0] + ',' + c[1]*100 + '%,' + c[2]*100 + '%)';
 243
 244                                                 div(col, 'sample', c.join(', '));
 245                                         }
 246
 247
 248                                         div();
 249                                 }
 250                         }
 251
 252                         renderRainbow();
 253
 254
 255
 256
 257                         init += .01;
 258                         //window.requestAnimationFrame(renderAll);
 259
 260                 }
 261
 262                 renderAll();
 263
 264                 //window.addEventListener('click', function () {
 265                 //      toggleStandard();
 266                 //      document.body.innerHTML = '';
 267                 //      renderAll()
 268                 //});
 269
 270         </script>
 271
 272 </body>
 273 </html>