Skip to content

Instantly share code, notes, and snippets.

@tomkp
Forked from 140bytes/LICENSE.txt
Created October 19, 2011 14:16
Show Gist options
  • Save tomkp/1298413 to your computer and use it in GitHub Desktop.
Save tomkp/1298413 to your computer and use it in GitHub Desktop.
140byt.es -- Click ↑↑ fork ↑↑ to play!
// colors are stored as rgb arrays eg: [0,0,0] for black and [255,255,255] for white
//
// example:
// r([255, 10, 100], [10, 100, 255], 8)
// =>
// [[255,10,100],[220,22,122],[185,35,144],[150,48,166],[115,61,188],[80,74,210],[45,87,232],[10,100,255]]
//
function(
a, // from color eg: [255,255,255]
b, // to color eg: [0,0,0]
c // total number of colors required
) {
function g(e) { // the calculation...
return 0| // use 0| to floor the result of....
b[e] // the r/g/b component of the 'to' color
- c // minus.... the number of colors still required (the for loop is decrementing this value)
* (b[e] - a[e]) // multiplied by the difference between the r/g/b component of the 'to' and 'from' colors
/ f // divided by one less than the total number of colors required
}
var e = [], // results array
f = c - 1; // one less than the total number of colors required
for (; c--; e.push([g(0),g(1),g(2)])); // store new color in results array
return e // return results array full of colors
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
span {
display: inline-block;
text-align: center;
vertical-align: middle;
line-height: 8em;
margin: 1em;
height: 8em;
width: 8em;
border: 1px solid #eee;
border-radius: 4em;
color: #fff;
}
</style>
</head>
<body>
<div id="range"></div>
</body>
<script>
var r = function(a,b,c){function d(d){return 0|b[d]-c*(b[d]-a[d])/f}var e=[],f=c-1;for(;c--;e.push([d(0),d(1),d(2)]));return e}
var colors = r([255, 10, 100], [10, 100, 255], 8);
var
i,
span,
rgb,
content,
element = document.getElementById("range");
for (i = 0; i < colors.length; i++) {
span = document.createElement("span");
rgb = "rgb(" + colors[i].join(",") + ")";
span.style.backgroundColor = rgb;
content = document.createTextNode(rgb);
span.appendChild(content);
element.appendChild(span);
}
</script>
</html>
function(a,b,c){function d(d){return 0|b[d]-c*(b[d]-a[d])/f}var e=[],f=c-1;for(;c--;e.push([d(0),d(1),d(2)]));return e}
DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
Version 2, December 2004
Copyright (C) 2011 YOUR_NAME_HERE <YOUR_URL_HERE>
Everyone is permitted to copy and distribute verbatim or modified
copies of this license document, and changing it is allowed as long
as the name is changed.
DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
0. You just DO WHAT THE FUCK YOU WANT TO.
{
"name": "colorRange",
"description": "Given 2 colors generate a range of colors.",
"keywords": [
"color",
"gradient",
"range"
]
}
@tomkp
Copy link
Author

tomkp commented Oct 19, 2011

correct again... now using 0| instead of parseInt

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment