Untitled

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<style id="jsbin-css">
#app {
  font-family: 'Courier'
}

#app li {
  list-style: none;
}

#app div {
  border: solid 1px #999;
  color: white;
}
</style>
</head>
<body>
  <div id="app"></div>
<script id="jsbin-javascript">
"use strict";

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

function hexToRGB(hex) {
  var match = hex.replace(/#/, '').match(/.{1,2}/g);

  return {
    r: parseInt(match[0], 16),
    g: parseInt(match[1], 16),
    b: parseInt(match[2], 16)
  };
}

var rgbToCSSString = function rgbToCSSString(_ref) {
  var r = _ref.r;
  var g = _ref.g;
  var b = _ref.b;
  return "rgb(" + r + "," + g + "," + b + ")";
};

function interpolateColors(left, right, percentage) {
  return ["r", "g", "b"].reduce(function (acc, c) {
    return _extends({}, acc, _defineProperty({}, c, Math.round(left[c] + (right[c] - left[c]) * percentage / 100)));
  }, {});
}

// usage:

var startColor = hexToRGB("#FF0033");
var endColor = hexToRGB("#FFCC33");

function render() {
  var colors = [];

  for (var ratio = 0; ratio < 100; ratio += 2) {
    colors.push(rgbToCSSString(interpolateColors(startColor, endColor, ratio)));
  }

  var color = function color(x) {
    return "\n    <li>\n      <div style=\"background-color: " + x + "; padding: 5px 10px\">\n      </div>\n    </li>\n  ";
  };

  var template = "<ul>" + colors.map(color).join('') + "</ul>";

  document.getElementById('app').innerHTML = template;
}

render();
</script>


<script id="jsbin-source-css" type="text/css">#app {
  font-family: 'Courier'
}

#app li {
  list-style: none;
}

#app div {
  border: solid 1px #999;
  color: white;
}</script>

<script id="jsbin-source-javascript" type="text/javascript">function hexToRGB(hex) {
  const match = hex.replace(/#/,'').match(/.{1,2}/g)

  return {
    r: parseInt(match[0], 16),
    g: parseInt(match[1], 16),
    b: parseInt(match[2], 16)
  }
}

const rgbToCSSString = ({ r, g, b }) => `rgb(${r},${g},${b})`

function interpolateColors(left, right, percentage) {
  return ["r", "g", "b"].reduce(
    (acc, c) => ({
      ...acc,
      [c]: Math.round(left[c] + (right[c] - left[c]) * percentage / 100)
    }),
    {}
  )
}

// usage:

const startColor = hexToRGB("#FF0033")
const endColor = hexToRGB("#FFCC33")

function render() {
  const colors = []

  for (let ratio = 0; ratio < 100; ratio+=2) {
    colors.push(
      rgbToCSSString(
        interpolateColors(startColor, endColor, ratio)
      )
    )
  }

  const color = x => `
    <li>
      <div style="background-color: ${x}; padding: 5px 10px">
      </div>
    </li>
  `

  const template = `<ul>${colors.map(color).join('')}</ul>`

  document.getElementById('app').innerHTML = template
}

render()</script></body>
</html>