Skip to content

Instantly share code, notes, and snippets.

@Rudis1261
Created August 8, 2017 07:07
Show Gist options
  • Save Rudis1261/7640399819aff50d876eecde35c38ade to your computer and use it in GitHub Desktop.
Save Rudis1261/7640399819aff50d876eecde35c38ade to your computer and use it in GitHub Desktop.
Generate 100 mixed Hex values in AngularJS1
// Run this in your browser's console to generate 100 colors between 3 hex values
var colors = {};
function int_to_hex(num) {
var hex = Math.round(num).toString(16);
if (hex.length == 1)
hex = '0' + hex;
return hex;
};
function blend_colors(color1, color2, percentage) {
color1 = color1 || '#000000';
color2 = color2 || '#ffffff';
percentage = percentage || 0.5;
if (color1.length != 4 && color1.length != 7) {
throw new error('colors must be provided as hexes');
}
if (color2.length != 4 && color2.length != 7) {
throw new error('colors must be provided as hexes');
}
if (percentage > 1 || percentage < 0) {
throw new error('percentage must be between 0 and 1');
}
if (color1.length == 4) {
color1 = color1[1] + color1[1] + color1[2] + color1[2] + color1[3] + color1[3];
} else {
color1 = color1.substring(1);
}
if (color2.length == 4) {
color2 = color2[1] + color2[1] + color2[2] + color2[2] + color2[3] + color2[3];
} else {
color2 = color2.substring(1);
}
color1 = [parseInt(color1[0] + color1[1], 16), parseInt(color1[2] + color1[3], 16), parseInt(color1[4] + color1[5], 16)];
color2 = [parseInt(color2[0] + color2[1], 16), parseInt(color2[2] + color2[3], 16), parseInt(color2[4] + color2[5], 16)];
var color3 = [
(1 - percentage) * color1[0] + percentage * color2[0],
(1 - percentage) * color1[1] + percentage * color2[1],
(1 - percentage) * color1[2] + percentage * color2[2]
];
return '#' + int_to_hex(color3[0]) + int_to_hex(color3[1]) + int_to_hex(color3[2]);
};
// Generate all the HEX colors once off
for(var i = 0; i <= 100; i++) {
switch (true) {
case i == 0:
colors[i] = '#cd1012';
break;
case i == 100:
colors[i] = '#0096DA';
break;
case i <= 50:
colors[i] = blend_colors('#cd1012', '#bada55', (i * 2.0) / 100);
break;
case i < 100:
colors[i] = blend_colors('#bada55', '#0096DA', ((i - 50.0) * 2.0) / 100);
break;
}
}
console.log(JSON.stringify(colors));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment