<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/njmcode/pen/axoyD?limit=all&page=8&q=color" />
<script src='https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js'></script>
<style class="cp-pen-styles">body {
text-align:center;
background: #111;
color: #999;
font-family: Arial,sans-serif;
}
ul {
margin: 20px auto;
width: 300px;
padding:0;
list-style-type:none;
}
li {
/*border: 1px solid #222;*/
height: 30px;
line-height: 30px;
text-align:right;
background-color: #000;
transition:background-color 1s ease-in-out;
position: relative;
}
li span {
font-family:monospace;
font-size:15px;
margin-right:10px;
color: #fff;
text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
}
li input {
position:absolute;
right:310px;
}</style></head><body>
Interim steps: <input type="range" id="numsteps" value="10" min="1" max="20" />
<ul id="list">
<li id="start"><input type="color" value="#5E4FA2" size="7" /><span></span></li>
<li id="end"><input type="color" value="#F79459" size="7" /><span></span></li>
</ul>
RGB <input type="radio" name="intype" value="interpolateColor" checked />
HSL <input type="radio" name="intype" value="interpolateHSL" />
<br/>
Use hex inputs <input type="checkbox" id="usehex" />
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script >/**
* TODO - refactor this as a (jQuery?) plugin!
**/
// Converts a #ffffff hex string into an [r,g,b] array
var h2r = function(hex) {
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result ? [
parseInt(result[1], 16),
parseInt(result[2], 16),
parseInt(result[3], 16)
] : null;
};
// Inverse of the above
var r2h = function(rgb) {
return "#" + ((1 << 24) + (rgb[0] << 16) + (rgb[1] << 8) + rgb[2]).toString(16).slice(1);
};
// Interpolates two [r,g,b] colors and returns an [r,g,b] of the result
// Taken from the awesome ROT.js roguelike dev library at
// https://github.com/ondras/rot.js
var _interpolateColor = function(color1, color2, factor) {
if (arguments.length < 3) { factor = 0.5; }
var result = color1.slice();
for (var i=0;i<3;i++) {if (window.CP.shouldStopExecution(1)){break;}
result[i] = Math.round(result[i] + factor*(color2[i]-color1[i]));
}
window.CP.exitedLoop(1);
return result;
};
var rgb2hsl = function(color) {
var r = color[0]/255;
var g = color[1]/255;
var b = color[2]/255;
var max = Math.max(r, g, b), min = Math.min(r, g, b);
var h, s, l = (max + min) / 2;
if (max == min) {
h = s = 0; // achromatic
} else {
var d = max - min;
s = (l > 0.5 ? d / (2 - max - min) : d / (max + min));
switch(max) {
case r: h = (g - b) / d + (g < b ? 6 : 0); break;
case g: h = (b - r) / d + 2; break;
case b: h = (r - g) / d + 4; break;
}
h /= 6;
}
return [h, s, l];
};
var hsl2rgb = function(color) {
var l = color[2];
if (color[1] == 0) {
l = Math.round(l*255);
return [l, l, l];
} else {
function hue2rgb(p, q, t) {
if (t < 0) t += 1;
if (t > 1) t -= 1;
if (t < 1/6) return p + (q - p) * 6 * t;
if (t < 1/2) return q;
if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
return p;
}
var s = color[1];
var q = (l < 0.5 ? l * (1 + s) : l + s - l * s);
var p = 2 * l - q;
var r = hue2rgb(p, q, color[0] + 1/3);
var g = hue2rgb(p, q, color[0]);
var b = hue2rgb(p, q, color[0] - 1/3);
return [Math.round(r*255), Math.round(g*255), Math.round(b*255)];
}
};
var _interpolateHSL = function(color1, color2, factor) {
if (arguments.length < 3) { factor = 0.5; }
var hsl1 = rgb2hsl(color1);
var hsl2 = rgb2hsl(color2);
for (var i=0;i<3;i++) {if (window.CP.shouldStopExecution(2)){break;}
hsl1[i] += factor*(hsl2[i]-hsl1[i]);
}
window.CP.exitedLoop(2);
return hsl2rgb(hsl1);
};
(function($) {
var $list = $('#list'),
$start = $('#start'),
$end = $('#end'),
$intype = $('input[name="intype"]'),
$usehex = $('#usehex');
// Add li elements between the start and end ones
var _createSteps = function(numSteps) {
$list.find('li.interim').remove();
for(var i = 0; i < numSteps; i++) {if (window.CP.shouldStopExecution(3)){break;}
$end.before('<li class="interim"><span></span></li>');
}
window.CP.exitedLoop(3);
};
// Color each li by interpolating between the start and end colors
var _styleSteps = function() {
var $items = $('li'),
scol = h2r($start.find('input').val()),
ecol = h2r($end.find('input').val());
var fn = '_' + $('input[name="intype"]:checked').val();
console.log('fn', fn);
var factorStep = 1 / ($items.length - 1);
$items.each(function(idx) {
var icol = window[fn](scol, ecol, factorStep * idx),
hcol = r2h(icol);
$(this).css('background-color', hcol);
$(this).find('span').text(hcol);
});
}
// Re-render on change
$('#usehex').on('change', function() {
var ct = $('ul input').eq(0).attr('type');
var scol = $start.find('input').val(),
ecol = $end.find('input').val();
$('ul input').attr('type', (ct == 'color') ? 'text' : 'color');
$start.find('input').val(scol);
$end.find('input').val(ecol);
});
$('input').not('#usehex').on('change', _styleSteps);
$('#numsteps').on('change', function() {
_createSteps($(this).val());
_styleSteps();
}).trigger('change');
})(jQuery);
//# sourceURL=pen.js
</script>
</body></html>
