Created
August 8, 2017 07:07
-
-
Save Rudis1261/7640399819aff50d876eecde35c38ade to your computer and use it in GitHub Desktop.
Generate 100 mixed Hex values in AngularJS1
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
// 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