chroma-js
Version:
JavaScript library for color conversions
58 lines (50 loc) • 1.78 kB
HTML
<html>
<head>
<title>Cubejelix Interpolation</title>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="../../chroma.js"></script>
<style type="text/css">
input[type=number] { width: 40px; }
</style>
</head>
<body>
start <input type="number" id="start" value="300" step="20" />
rotations <input type="number" id="rot" value="-1.5" step="0.1" />
gamma <input type="number" id="gamma" value="1" step="0.1" />
l min/max <input type="number" id="lmin" value="0" step="0.1" min="0" />
<input type="number" id="lmax" value="1" step="0.1" max="1" />
sat min/max <input type="number" id="smin" value="1" step="0.1" min="0" />
<input type="number" id="smax" value="1" step="0.1" min="0" />
<hr>
<script type="text/javascript">
$('input').on('change', update);
function v(id) { return +$('#'+id).val(); }
var j = 0;
function update() {
var steps = 200,
totalW = 800;
var sat = [v('smin'), v('smax')];
$('.scale').remove();
var ch = chroma.cubehelix(
v('start'),
v('rot'),
sat[0] != sat[1] ? sat : sat[0],
v('gamma'),
[v('lmin'), v('lmax')]
);
var c = $('<div />').addClass('scale').appendTo('body');
for (var i=0; i < steps; i++) {
$('<div/>').css({
display: 'inline-block',
width: (totalW / steps) + 'px',
height: '100px',
background: ch(i/(steps-1)).hex()
})
.appendTo(c);
}
}
update();
</script>
</body>
</html>