chroma-js
Version:
JavaScript library for color conversions
70 lines (56 loc) • 1.86 kB
HTML
<html>
<head>
<title>Chroma.js</title>
<script type="text/javascript" src="../../chroma.js"></script>
</head>
<style type="text/css">
body { font-family: Helvetica; }
h1 { font-size: 18px; }
.row { margin-bottom: 10px; }
.left, .right { display: inline-block; margin-right: 20px; position: relative; }
.swatch { display: inline-block; width: 60px; height: 50px; }
.swatch.overlay { position: absolute; left: 60px; }
</style>
<body>
<script type="text/javascript">
var names = Object.keys(chroma.colors), l = names.length;
var cssMap = {
dodge: 'color-dodge',
burn: 'color-burn'
};
Object.keys(chroma.blend).forEach(function(mode) {
document.write('<h1>'+mode+'</h1>');
for (var i=0; i<10; i++) {
var row = el('div.row'),
left = el('div.left'),
right = el('div.right');
var bottom = names[Math.floor(Math.random()*l)],
top = names[Math.floor(Math.random()*l)];
swatch(bottom, left);
swatch(chroma.blend(bottom, top, mode).hex(), left);
swatch(top, left);
swatch(bottom, right);
swatch(bottom, right);
var s = swatch(top, right);
s.className = 'swatch overlay';
s.style.mixBlendMode = cssMap[mode] || mode;
swatch(top, right);
}
});
function swatch(color, parent) {
var s = el('div.swatch', parent);
s.setAttribute('title', color);
s.style.background = color;
return s;
}
function el(t, parent) {
var p = t.split('.');
var e = document.createElement(p[0]);
if (p[1]) e.className = p[1];
(parent || document.body).appendChild(e);
return e;
}
</script>
</body>
</html>