alanrsoares/index.html

## index.html
<!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>

## jsbin.vukayi.css
#app {
  font-family: 'Courier'
}

#app li {
  list-style: none;
}

#app div {
  border: solid 1px #999;
  color: white;
}

## jsbin.vukayi.js
"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();
	<!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>