| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>Chroma.js</title> |
| <script type="text/javascript" src="../../chroma.js"></script> |
| </head> |
| <body> |
|
|
| <script type="text/javascript"> |
| |
| function showScale(color, mode, odiv) { |
| var c = document.createElement('div'); |
| for (var i=0; i <= 1; i += 0.01) { |
| var col = chroma(color).luminance(i, mode); |
| var d = document.createElement('div'); |
| d.style.display = 'inline-block'; |
| d.style.width = '10px'; |
| d.style.height = '60px'; |
| d.style.background = col.hex(); |
| c.appendChild(d); |
| } |
| odiv.appendChild(c); |
| } |
| |
| var scales = [ |
| ['red', 'rgb'], |
| ['red', 'lab'], |
| ['yellow', 'lab'], |
| ['black', 'rgb'], |
| ['blue', 'rgb'], |
| ['green', 'rgb'], |
| ['green', 'lab'], |
| ['orange', 'rgb'] |
| ]; |
| |
| for (var s in scales) { |
| s = scales[s]; |
| d = document.createElement('div'); |
| d.style.position = 'relative'; |
| document.body.appendChild(d); |
| d.innerHTML = "<div style='position:absolute;top:5px;left:10px;opacity:0.9;color:#000;text-shadow:-1px -1px 0px rgba(255,255,255,0.3), 1px 1px 0px rgba(255,255,255,0.3), -1px 1px 0px rgba(255,255,255,0.3), 1px -1px 0px rgba(255,255,255,0.3)'><code>" + s.join(' / ') + "</code></div>"; |
| showScale(s[0], s[1], d); |
| } |
| |
| |
| |
| </script> |
|
|
| </body> |
| </html> |
