"color"
Bootstrap 3.0.0 Snippet by evarevirus

<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>

Related: See More


Questions / Comments: