Sorting a large color array by hue
by MegaScience
HTML
<h2>Colors Palette</h2>
<div class='colors'></div>
<div class="clearfix"></div>
CSS
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300);
h2 {
display: block;
color: #999;
font: 21px/1.4em 'Open Sans', sans-serif;
margin-top: 30px;
}
.block {
display: block;
width: 30px;
height: 50px;
float: left;
margin: 0 1px 1px 0;
}
.clearfix {
clear: both;
}
JavaScript
const cAoO = [
{
"colorRGBA": "rgb(228, 223, 208)",
"colorHEX": "#e4dfd0",
"colorName": "Snow White"
},
{
"colorRGBA": "rgb(172, 168, 162)",
"colorHEX": "#aca8a2",
"colorName": "Ash Grey"
},
{
"colorRGBA": "rgb(137, 135, 132)",
"colorHEX": "#898784",
"colorName": "Goobbue Grey"
},
{
"colorRGBA": "rgb(101, 101, 101)",
"colorHEX": "#656565",
"colorName": "Slate Grey"
},
{
"colorRGBA": "rgb(72, 71, 66)",
"colorHEX": "#484742",
"colorName": "Charcoal Grey"
},
{
"colorRGBA": "rgb(43, 41, 35)",
"colorHEX": "#2b2923",
"colorName": "Soot Black"
},
{
"colorRGBA": "rgb(230, 159, 150)",
"colorHEX": "#e69f96",
"colorName": "Rose Pink"
},
{
"colorRGBA": "rgb(131, 105, 105)",
"colorHEX": "#836969",
"colorName": "Lilac Purple"
},
{
"colorRGBA": "rgb(91, 23, 41)",
"colorHEX": "#5b1729",
"colorName": "Rolanberry Red"
},
{
"colorRGBA": "rgb(120, 26, 26)",
"colorHEX": "#781a1a",
"colorName": "Dalamud Red"
},
{
"colorRGBA": "rgb(98, 34, 7)",
"colorHEX": "#622207",
"colorName": "Rust Red"
},
{
"colorRGBA": "rgb(69, 21, 17)",
"colorHEX": "#451511",
"colorName": "Wine Red"
},
{
"colorRGBA": "rgb(204, 108, 94)",
"colorHEX": "#cc6c5e",
"colorName": "Coral Pink"
},
{
"colorRGBA": "rgb(145, 59, 39)",
"colorHEX": "#913b27",
"colorName": "Blood Red"
},
{
"colorRGBA": "rgb(228, 170, 138)",
"colorHEX": "#e4aa8a",
"colorName": "Salmon Pink"
},
{
"colorRGBA": "rgb(226, 0, 14)",
"colorHEX": "#e2000e",
"colorName": "Ruby Red"
},
{
"colorRGBA": "rgb(244, 49, 149)",
"colorHEX":...