randomColor/index.html at master · harrysinghtiwana/randomColor · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
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
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
<!DOCTYPE html>
  <head>
    <meta charset=utf-8>
    <title>Random color generator for JavaScript - randomColor.js</title>
    <link href="//fonts.googleapis.com/css?family=Karla:400,700" rel=stylesheet type=text/css>
    <link rel=icon type=image/png href=/demo/favicon.png>
    <script src=/demo/tests.js></script>
    <script src=/randomColor.js></script>
    <style type=text/css>
    @import url(https://fonts.googleapis.com/css?family=Fira+Sans:300,300italic,400,400italic,500,500italic,700,700italic);
    @import url(https://fonts.googleapis.com/css?family=Fira+Mono:400);

    body {
      width:  100%;
      height: 100%;
      margin: 0px;
      font: 400 17px / 140% 'Fira Sans', sans-serif;
      text-rendering: optimizeLegibility;
    }


    .swatch {
      width: 3em;
      height: 3em;
      border-radius: 50%;
      display: block;
      text-indent: -1000px;
      float: left;
      overflow: hidden;
      background: #000;
      margin: 0 1em 1em 0;
    }

    .swatch:nth-child(9n) {
      margin-right: 0
    }

    section .output {
      background: #fff;
      display: block;
      padding: 0.5em 0.5em 0;
      margin: 1em 0
    }

    code {
      display: block;
      position: relative;
      clear: both;
      line-height: 1.33em;
      font-family: 'Fira Mono', monospace;
      white-space: pre;
      border-radius: 4px
    }

    .output:after {
      content: "";
      width: 100%;
      height: 0;
      clear: both;
      display: block;
    }

    section {
      width: 36em;
      margin: 2em auto;
      padding: 1em 0;
      z-index: 0
    }


    header, footer {
      background: #fff;
      width: 36em;
      margin: 1em auto;
    }

    header a#reload {position: fixed;top: 1em;left: 1em}

    header a,
    header a em,
    footer a,
    footer a em {
      color: #aaa;
      text-decoration: none;
      transition: all 0.2s ease;
    }

    header a em,
    footer a em {
      font-style: normal;
      text-decoration: underline;
    }

    header a:hover,
    footer a:hover {
      color: #f9951d
    }

    header a:hover em,
    footer a:hover em {
      color: #f9951d;border-bottom-color: #f9951d
    }

    footer {border-top: 1px solid rgba(0,0,0,0.1);padding: 2em 0;margin: 2em auto}

    #logo {
      width: 24em;
      position: relative;left: -9em;margin-bottom: 1em}

    p {
      font-size: 1em;line-height: 1.5em;color: #323232}
    p b {font-weight: bold;color: #454545;}

    p a {color: #E07A00;}
    h1, h2 {
      font-size: 2em;
      margin-bottom: 0
    }

    h1 {
      color: #000;
      font-weight: 400;
      margin-top: 1em
    }

    h2 {
      color: #787878;
      font-weight: 300;
    }

    h3 {
      font-weight: 400;
      margin-bottom: 1em;
      color: #000;
      text-transform: uppercase;
      font-size: 1em;
      letter-spacing: 0.05em
    }

    h4 {
      text-transform: uppercase;
      letter-spacing: 0.1em;
      margin-bottom: 0.66em;
      margin-top: 2em;
      color: #000
    }

    .button {
      display: inline-block;
      margin: 2em 0.66em 0em -0.75em;
      text-decoration: none;
      color: #111;
      color: #fff;
      background: #f9951d;
      border-radius: 4em;
      font-size: 1.1566em;
      padding: 0.15em 1em 0;
      line-height: 2.66em;
    }
    </style>
  </head>
  <body>
    <header>
      <a id=reload href=javascript:void(0); onclick=renderDemo()>&#8635; <em>Reload demos</em></a>
      <a href=//llllll.li alt="David Merfield">Made by <em>David Merﬁeld</em>. </a></header>
    <section>
      <svg id=logo version=1.1 xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink x=0px y=0px width=375.062px height=376.363px viewbox="0 0 375.062 376.363" enable-background="new 0 0 375.062 376.363" xml:space=preserve>
      <polygon points="111.622,204.26 122.123,212.463 114.328,222.44 103.821,214.229 95.61,224.736 85.625,216.934
        93.837,206.426 83.334,198.223 91.139,188.24 101.647,196.45 109.857,185.943 119.833,193.752 "/>
      <rect x=209.653 y=163.011 transform="matrix(0.972 0.2352 -0.2352 0.972 50.0954 -46.3761)" width=19.667 height="47.667"/>
      <rect x=129.487 y=58.498 transform="matrix(0.9983 0.0578 -0.0578 0.9983 4.9916 -7.915)" width=19.667 height="47.667"/>
      <rect x=148.868 y=180.999 transform="matrix(0.9575 0.2883 -0.2883 0.9575 64.5795 -41.1618)" width=46.332 height="35.334"/>
      <polygon points="11.392,165.458 33.091,205.572 11.648,205.162 0,183.633 "/>
      <polygon points="164.693,132.899 195.693,166.353 174.821,171.29 158.184,153.337 "/>
      <polygon points="198.914,147.64 182,131.456 192.473,107.657 209.387,123.841 "/>
      <polygon points="53.327,81.062 48.342,62.595 61.843,49.044 80.33,53.962 85.314,72.429 71.813,85.98 "/>
      <polygon points="10.229,156.328 19.211,124.437 42.338,148.161 "/>
      <polygon points="219.486,2.984 197.439,22.131 178.391,0 "/>
      <polygon points="110.895,142.276 127.64,113.021 156.819,129.896 "/>
      <rect x=115.803 y=-5.238 transform="matrix(0.3579 0.9338 -0.9338 0.3579 94.332 -99.5056)" width=7.423 height="48.143"/>
      <rect x=281.792 y=8.943 transform="matrix(-0.5378 0.8431 -0.8431 -0.5378 466.8873 -189.9243)" width=7.423 height="48.142"/>
      <rect x=56.165 y=123.641 transform="matrix(0.9755 0.2198 -0.2198 0.9755 36.1978 -9.7317)" width=11.334 height="68.323"/>
      <path d="M35.627,213.023c-14.997,0-27.153,12.156-27.153,27.156c0,14.996,12.157,27.154,27.153,27.154
        c15,0,27.156-12.158,27.156-27.154H35.627V213.023z"/>
      <ellipse transform="matrix(0.9153 0.4027 -0.4027 0.9153 71.346 -0.4018)" cx=36.628 cy=169.447 rx=8.545 ry="12.694"/>
      <ellipse transform="matrix(0.9085 0.4178 -0.4178 0.9085 80.8294 -40.9085)" cx=133.856 cy=164.172 rx=14.571 ry="21.643"/>
      <path d="M158.547,232.602c3.495,7.59,0.175,16.577-7.414,20.072c-7.59,3.494-16.576,0.175-20.07-7.416
        c-3.495-7.589-0.643-37.561-0.643-37.561S155.052,225.012,158.547,232.602z"/>
      <path d="M117.033,44.482c6.562,5.172,7.69,14.686,2.519,21.25c-5.172,6.562-14.685,7.689-21.249,2.517
        C91.741,63.077,80.66,35.082,80.66,35.082S110.469,39.31,117.033,44.482z"/>
      <path d="M59.829,232.689c-8.769,0-15.904-7.135-15.904-15.904s7.135-15.904,15.904-15.904
        c8.769,0,15.902,7.135,15.902,15.904S68.598,232.689,59.829,232.689z M59.829,208.146c-4.764,0-8.638,3.875-8.638,8.639
        s3.875,8.639,8.638,8.639c4.763,0,8.638-3.875,8.638-8.639S64.592,208.146,59.829,208.146z"/>
      <path d="M39.084,125.534c-10.863,0-19.701-8.838-19.701-19.702S28.221,86.13,39.084,86.13
        c10.863,0,19.7,8.838,19.7,19.702S49.947,125.534,39.084,125.534z M39.084,95.13c-5.901,0-10.701,4.801-10.701,10.702
        c0,5.901,4.8,10.702,10.701,10.702c5.9,0,10.7-4.801,10.7-10.702C49.784,99.931,44.984,95.13,39.084,95.13z"/>
      <polygon points="304.381,256.652 316.068,260.286 306.074,267.354 306.23,279.592 296.422,272.271 284.83,276.202
        288.762,264.611 281.441,254.802 293.68,254.958 300.746,244.965 "/>
      <circle cx=174.83 cy=43.861 r="18.682"/>
      <circle cx=74.472 cy=101.896 r="12.209"/>
      <polygon points="143.908,28.812 145.645,41.699 133.926,47.333 124.946,37.93 131.113,26.483 "/>
      <rect x=317.728 y=190.21 transform="matrix(0.7071 0.7072 -0.7072 0.7071 247.3187 -168.9349)" width=19.668 height="47.666"/>
      <rect x=272.154 y=28.644 transform="matrix(-0.2366 0.9716 -0.9716 -0.2366 400.4307 -204.5926)" width=16.873 height="52.74"/>
      <rect x=213.045 y=95.256 transform="matrix(0.6072 0.7945 -0.7945 0.6072 171.1501 -137.7011)" width=23.621 height="18.014"/>
      <polygon points="307.303,205.618 291.037,188.781 302.438,165.412 318.701,182.249 "/>
      <polygon points="285.279,102.464 290.229,83.988 308.707,79.037 322.232,92.563 317.281,111.04 298.805,115.991 "/>
      <polygon points="168.708,85.801 191.258,61.527 201.004,93.193 "/>
      <polygon points="125.602,257.953 115.518,298.145 75.371,287.885 "/>
      <polygon points="251.684,117.938 280.883,117.874 280.816,147.072 "/>
      <rect x=197.132 y=201.099 transform="matrix(0.5344 0.8452 -0.8452 0.5344 295.4556 -60.6708)" width=11.333 height="73.5"/>
      <ellipse transform="matrix(0.347 0.9379 -0.9379 0.347 338.0264 -130.0029)" cx=262.375 cy=177.753 rx=14.571 ry="21.644"/>
      <path d="M290.389,212.338c7.238,4.176,9.723,13.428,5.549,20.667c-4.176,7.237-13.428,9.722-20.666,5.547
        s-22.229-30.285-22.229-30.285S283.15,208.164,290.389,212.338z"/>
      <path d="M183.378,340.336c-7.681-7.682-7.681-20.18,0.001-27.861c7.681-7.682,20.181-7.682,27.863-0.001
        s7.68,20.18-0.002,27.861C203.559,348.018,191.061,348.018,183.378,340.336z M204.879,318.838c-4.174-4.173-10.963-4.172-15.135,0
        c-4.173,4.174-4.174,10.962,0,15.135c4.172,4.172,10.959,4.172,15.133-0.001C209.049,329.799,209.051,323.01,204.879,318.838z"/>
      <path d="M63.955,301.063c-0.65,6.991-4.09,13.071-9.104,17.233l-7.423-8.945c2.727-2.264,4.595-5.561,4.949-9.365
        c0.707-7.594-4.9-14.35-12.501-15.066c-3.805-0.354-7.39,0.873-10.117,3.137l-7.423-8.946c5.015-4.161,11.625-6.42,18.617-5.771
        C54.936,274.641,65.257,287.08,63.955,301.063z"/>
      <polygon points="245.109,135.184 257.133,142.72 243.838,147.68 240.387,161.444 231.561,150.332 217.402,151.303
        225.246,139.476 219.947,126.311 233.617,130.113 244.5,121.006 "/>
      <circle cx=327.555 cy=75.151 r="7.209"/>
      <circle cx=168.537 cy=109.83 r="12.209"/>
      <polygon points="343.797,158.302 340.08,170.764 327.08,171.078 322.764,158.813 333.094,150.916 "/>
      <rect x=257.388 y=288.66 transform="matrix(-0.0707 -0.9975 0.9975 -0.0707 -8.5273 595.2191)" width=31.2 height="25.842"/>
      <polygon points="254.441,356.916 211.035,370.912 215.361,349.904 238.658,342.393 "/>
      <polygon points="241.566,63.688 230.193,79.067 211.188,76.906 203.555,59.366 214.93,43.987 233.934,46.147 "/>
      <polygon points="357.129,267.109 348.967,284.41 329.904,285.99 319.004,270.271 327.166,252.973 346.229,251.391
        "/>
      <polygon points="281.227,80.176 258.324,100.902 251.826,70.706 "/>
      <polygon points="241.262,323.748 222.561,301.322 245.068,282.721 "/>
      <rect x=152.979 y=326.41 transform="matrix(0.2085 -0.978 0.978 0.2085 -229.6093 442.6039)" width=11.335 height="73.501"/>
      <path d="M244.854,37.956c8.492-3.885,12.229-13.918,8.342-22.413c-3.885-8.493-13.918-12.229-22.41-8.344
        c-8.496,3.886-12.229,13.92-8.344,22.413l15.377-7.035L244.854,37.956z"/>
      <ellipse transform="matrix(-0.399 -0.917 0.917 -0.399 215.7848 169.109)" cx=163.312 cy=13.838 rx=8.546 ry="12.692"/>
      <path d="M319.451,132.452c3.5,8.041-0.195,17.43-8.236,20.929s-17.43-0.196-20.93-8.238
        c-3.498-8.04,0.197-17.428,8.24-20.927C306.566,120.718,315.953,124.413,319.451,132.452z M296.947,142.245
        c1.9,4.368,7,6.375,11.369,4.474c4.367-1.9,6.375-7,4.475-11.368c-1.9-4.366-7-6.373-11.367-4.473
        C297.055,132.779,295.047,137.878,296.947,142.245z"/>
      <circle cx=272.312 cy=342.393 r="12.209"/>
      <circle cx=206.16 cy=274.333 r="18.356"/>
      <polygon points="236.967,241.323 258.488,238.777 267.559,258.458 251.648,273.168 232.738,262.581 "/>
      <rect x=66.963 y=307.738 transform="matrix(-0.8255 -0.5644 0.5644 -0.8255 -19.1169 644.8995)" width=46.332 height="35.334"/>
      <path d="M367.957,124.687c1.562,8.209-3.826,16.13-12.033,17.691c-8.209,1.562-16.129-3.826-17.691-12.035
        s8.436-36.608,8.436-36.608S366.396,116.479,367.957,124.687z"/>
      <ellipse transform="matrix(0.6231 -0.7821 0.7821 0.6231 -159.2432 226.6896)" cx=155.602 cy=278.583 rx=10.724 ry="21.592"/>
      <polygon points="156.827,346.822 131.666,329.027 140.689,296.01 165.85,313.805 "/>
      <polygon points="92.998,147.781 82.212,124.668 102.243,104.637 113.029,127.75 "/>
      <path d="M81.799,152.737c-6.034,7.128-5.146,17.798,1.983,23.832c7.129,6.034,17.798,5.147,23.831-1.98
        c6.036-7.13,5.146-17.8-1.982-23.833l-10.925,12.908L81.799,152.737z"/>
      <circle cx=66.828 cy=268.023 r="8.543"/>
      <polygon points="91.063,264.643 75.425,248.482 85.964,228.617 108.113,232.5 111.264,254.766 "/>
      <path d="M355.533,165.138c4.787-5.137,11.227-7.848,17.738-8.078l0.41,11.618c-3.541,0.125-7.035,1.594-9.641,4.389
        c-5.199,5.58-4.891,14.354,0.689,19.566c2.795,2.605,6.383,3.824,9.924,3.699l0.408,11.617c-6.512,0.229-13.125-2.021-18.262-6.811
        C346.527,191.564,345.957,175.412,355.533,165.138z"/>
      <ellipse transform="matrix(0.9153 0.4028 -0.4028 0.9153 126.3607 -125.1463)" cx=360.715 cy=237.849 rx=8.546 ry="12.693"/>
      <polygon points="337.955,302.592 305.182,334.309 299.793,313.547 317.383,296.525 "/>
      <polygon points="106.346,90.578 108.655,97.55 102.031,99.744 99.721,92.766 92.745,95.076 90.55,88.445
        97.528,86.136 95.218,79.164 101.849,76.971 104.159,83.948 111.135,81.639 113.324,88.269 "/>
      </svg>
      <h1>randomColor</h1>
      <h2><span class=pull-A>A</span><span class=push-c></span> <span class=pull-c>c</span>olor generator for JavaScript.</h2>
      <a href=https://github.com/davidmerfield/randomColor class="button primary" alt="Attractive random color generator">Get the<span class=push-c></span> <span class=pull-c>c</span>ode<span class=push-o></span> <span class=pull-o>o</span>n GitHub &nbsp;&rarr;</a>
    </section>
    <section>
      <h3><span class=pull-W>W</span>hy does this exist?</h3>
      <p><span class=pull-T>T</span>here are lots<span class=push-o></span> <span class=pull-o>o</span>f<span class=push-c></span> <span class=pull-c>c</span>lever <a href="http://www.paulirish.com/2009/random-hex-color-code-snippets/"><span class=pull-o>o</span>ne-liners</a> for generating random<span class=push-c></span> <span class=pull-c>c</span>olors:</p>
      <code class=hljs><span class=hljs-string>'#'</span> + <span class=hljs-built_in>Math</span>.floor(<span class=hljs-built_in>Math</span>.random()*<span class=hljs-number>16777215</span>).toString(<span class=hljs-number>16</span>);</code>
      <p>Unfortunately, this<span class=push-c></span> <span class=pull-c>c</span>ode naturally produces murky greys, browns and greens.</p>

      <p>randomColor generates <em>attractive<span class=push-c></span> <span class=pull-c>c</span>olors</em> by default. More specifically, randomColor produces bright<span class=push-c></span> <span class=pull-c>c</span>olors<span class=push-w></span> <span class=pull-w>w</span>ith a reasonably high saturation.<span class=push-T></span> <span class=pull-T>T</span>his makes randomColor particularly useful for <em>data<span class=push-v></span> <span class=pull-v>v</span>isualizations</em> and <em>generative art</em>.</p>
      <br>
      <h3>Examples</h3>
      <p><span class=pull-O>O</span>nce you’ve included <a href=https://github.com/davidmerfield/randomColor alt="Attractive random color generator">randomColor.js</a> <span class=pull-o>o</span>n your page,<span class=push-c></span> <span class=pull-c>c</span>alling randomColor()<span class=push-w></span> <span class=pull-w>w</span>ill return a random attractive<span class=push-c></span> <span class=pull-c>c</span>olor. Beneath is the<span class=push-o></span> <span class=pull-o>o</span>utput<span class=push-o></span> <span class=pull-o>o</span>f randomColor<span class=push-c></span> <span class=pull-c>c</span>alled 54 times.</p>
      <code class=hljs>randomColor(); <span class=hljs-comment>// Returned a random color as a hex string</span></code>
      <span class=output count=54></span>
      <br>
      <p><span class=pull-Y>Y</span>ou<span class=push-c></span> <span class=pull-c>c</span>an also pass an<span class=push-o></span> <span class=pull-o>o</span>ptions<span class=push-o></span> <span class=pull-o>o</span>bject to randomColor.<span class=push-T></span> <span class=pull-T>T</span>his allows you to specify the hue, luminosity and the number<span class=push-o></span> <span class=pull-o>o</span>f<span class=push-c></span> <span class=pull-c>c</span>olors to generate.</p>
      <br>
      <h3>Similar<span class=push-c></span> <span class=pull-c>c</span>olors</h3>
      <code class=hljs>randomColor({hue: <span class=hljs-string>'red'</span>, count: <span class=hljs-number>18</span>});</code>
      <span class=output hue=red count=18></span>
      <br>
      <code class=hljs>randomColor({hue: <span class=hljs-string>'orange'</span>, count: <span class=hljs-number>18</span>});</code>
      <span class=output hue=orange count=18></span>
      <br>
      <code class=hljs>randomColor({hue: <span class=hljs-string>'yellow'</span>, count: <span class=hljs-number>18</span>});</code>
      <span class=output hue=yellow count=18></span>
      <br>
      <code class=hljs>randomColor({hue: <span class=hljs-string>'green'</span>, count: <span class=hljs-number>18</span>});</code>
      <span class=output hue=green count=18></span>
      <br>
      <code class=hljs>randomColor({hue: <span class=hljs-string>'blue'</span>, count: <span class=hljs-number>18</span>});</code>
      <span class=output hue=blue count=18></span>
      <br>
      <code class=hljs>randomColor({hue: <span class=hljs-string>'purple'</span>, count: <span class=hljs-number>18</span>});</code>
      <span class=output hue=purple count=18></span>
      <br>
      <code class=hljs>randomColor({hue: <span class=hljs-string>'pink'</span>, count: <span class=hljs-number>18</span>});</code>
      <span class=output hue=pink count=18></span>
      <br>
      <code class=hljs>randomColor({hue: <span class=hljs-string>'monochrome'</span>, count: <span class=hljs-number>18</span>});</code>
      <span class=output hue=monochrome count=18></span>
      <br>
      <h3>Light<span class=push-c></span> <span class=pull-c>c</span>olors</h3>
      <code class=hljs>randomColor({luminosity: <span class=hljs-string>'light'</span>,count: <span class=hljs-number>27</span>});</code>
      <span class=output luminosity=light count=27></span>
      <br>
      <h3>Dark<span class=push-c></span> <span class=pull-c>c</span>olors</h3>
      <code class=hljs>randomColor({luminosity: <span class=hljs-string>'dark'</span>, count: <span class=hljs-number>27</span>});</code>
      <span class=output luminosity=dark count=27></span>
      <br>
      <h3><span class=pull-T>T</span>ruly random<span class=push-c></span> <span class=pull-c>c</span>olors</h3>
      <code class=hljs>randomColor({hue: <span class=hljs-string>'random'</span>,luminosity: <span class=hljs-string>'random'</span>,count: <span class=hljs-number>54</span>});</code>
      <span class=output count=54 hue=random luminosity=random></span>
      <br>
      <a href=https://github.com/davidmerfield/randomColor class="button primary">Get this<span class=push-o></span> <span class=pull-o>o</span>n Github &nbsp;&rarr;</a>
    </section>
    <footer>
      <a href=//llllll.li alt="David Merfield">Made by <em>David Merﬁeld</em>. </a>
    <a alt="Attractive random color generator" href=https://github.com/davidmerfield/randomColor>randomColor is licensed under the <em><span class=small-caps>MIT</span> License</em>.</a>
    <a href="http://www.lullatone.com/music/we-will-rock-you-to-sleep/"><span class=pull-T>T</span>he header graphic<span class=push-w></span> <span class=pull-w>w</span>as stolen from Jefferson<span class=push-C></span> <span class=pull-C>C</span>heng’s <em><span class=pull-w>w</span>onderful album<span class=push-c></span> <span class=pull-c>c</span>over</em> for Lullatone.</a>
    <a href=http://www.google.com/fonts/specimen/Karla><span class=pull-A>A</span>ll the<span class=push-w></span> <span class=pull-w>w</span>ords are set in <em>Fira</em>, an<span class=push-o></span> <span class=pull-o>o</span>pen-source typeface designed by Erik Spiekermann.</a>
  <a href=http://en.wikipedia.org/wiki/HSV_color_space><span class=pull-T>T</span>hanks to the <em><span class=small-caps>HSV</span> <span class=pull-c>c</span>olor space</em> for making this all possible.</a>
    </footer>
    <script>
      createSwatches();
      renderDemo(1234);
    </script>
  </body>