Last active
October 23, 2018 23:53
-
-
Save alanrsoares/8fa5d4242bbfc49e11f5fd39978ba726 to your computer and use it in GitHub Desktop.
linear color interpolation -> JS Bin// source https://jsbin.com/vukayi
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #app { | |
| font-family: 'Courier' | |
| } | |
| #app li { | |
| list-style: none; | |
| } | |
| #app div { | |
| border: solid 1px #999; | |
| color: white; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| "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(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment