-
-
Save mvaneijgen/49c0aa2d9b475fb9cf926907e501f924 to your computer and use it in GitHub Desktop.
Color sorting in JavaScript
This file contains 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
//Sorting Hex Color: | |
var scheme = [ | |
"#4C4C4C","#1F2029","#35404E","#282938","#00A0BE","#C67C48","#32CF72", "#4155D1","#B86838","#D81196","#149C92","#786DC4","#DB2C38","#83C057", "#A4A4A4","#55747C","#FFFFFF" | |
]; | |
var Color = function Color(hexVal) { //define a Color class for the color objects | |
this.hex = hexVal; | |
}; | |
constructColor = function(colorObj){ | |
var hex = colorObj.hex.substring(1); | |
/* Get the RGB values to calculate the Hue. */ | |
var r = parseInt(hex.substring(0, 2), 16) / 255; | |
var g = parseInt(hex.substring(2, 4), 16) / 255; | |
var b = parseInt(hex.substring(4, 6), 16) / 255; | |
/* Getting the Max and Min values for Chroma. */ | |
var max = Math.max.apply(Math, [r, g, b]); | |
var min = Math.min.apply(Math, [r, g, b]); | |
/* Variables for HSV value of hex color. */ | |
var chr = max - min; | |
var hue = 0; | |
var val = max; | |
var sat = 0; | |
if (val > 0) { | |
/* Calculate Saturation only if Value isn't 0. */ | |
sat = chr / val; | |
if (sat > 0) { | |
if (r == max) { | |
hue = 60 * (((g - min) - (b - min)) / chr); | |
if (hue < 0) { | |
hue += 360; | |
} | |
} else if (g == max) { | |
hue = 120 + 60 * (((b - min) - (r - min)) / chr); | |
} else if (b == max) { | |
hue = 240 + 60 * (((r - min) - (g - min)) / chr); | |
} | |
} | |
} | |
colorObj.chroma = chr; | |
colorObj.hue = hue; | |
colorObj.sat = sat; | |
colorObj.val = val; | |
colorObj.luma = 0.3 * r + 0.59 * g + 0.11 * b; | |
colorObj.red = parseInt(hex.substring(0, 2), 16); | |
colorObj.green = parseInt(hex.substring(2, 4), 16); | |
colorObj.blue = parseInt(hex.substring(4, 6), 16); | |
return colorObj; | |
}; | |
sortColorsByLuma = function (colors) { | |
return colors.sort(function (a, b) { | |
return a.luma - b.luma; | |
}); | |
}; | |
mapHex = function(color) { | |
return color.hex; | |
} | |
outputColors = function(hexArray) { | |
var colors = []; | |
$.each(hexArray, function (i, v) { | |
var color = new Color(v); | |
constructColor(color); | |
colors.push(color); | |
}); | |
sortColorsByLuma(colors); | |
console.log(colors.map(mapHex)); | |
}; | |
outputColors(scheme); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment