Skip to content

Instantly share code, notes, and snippets.

@joshrp

joshrp/Colour-Interpolation.markdown

Created December 21, 2014 13:39
Show Gist options
  • Save joshrp/00d6d475a1fda10d7cd6 to your computer and use it in GitHub Desktop.
Save joshrp/00d6d475a1fda10d7cd6 to your computer and use it in GitHub Desktop.
Download ZIP
Colour Interpolation
Raw
index.html
<body>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<div id="color">
</div>
</body>
Raw
script.js
calc = function (perc) {
perc = 100 - parseInt(perc, 10);
var colors = {
r: {
top: 200,
bottom: 255,
func: function (x) {
return (Math.pow(x,3) * 5) / 400;
}
},
g: {
top: 60,
bottom: 255,
func: function (x) {
return (0.0077143 * Math.pow(x, 2.5) - 0.631429 * x - 2.85714);
}
},
b: {
top: 60,
bottom: 255,
func: function (x) {
return (0.0137143 * Math.pow(x, 2) - 0.631429 * x - 3.85713);
}
}
};
values = {};
$.each(colors, function (color, data) {
var progress = data.func(perc);
diff = data.bottom - data.top;
values[color] = Math.round(data.top + (diff * (progress / 100)));
});
return 'rgb(' +values.r + ','+ values.g +','+ values.b +')';
}
box = $('#color')
box.html('');
Array.apply(null, Array(100)).map(function (_, i) {
color = calc(i);
extra = $('<div class="extra"/>').css('background-color', color)
box.append(extra);
});
Raw
style.css
#color {
}
.extra {
width: 10px;
height: 50px;
float: left;
border-top: 1px black;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment