JSFiddle - React, Tailwind, and code Playground

by SerGen

HTML

<div id="colorsNode">
	<div class="Color" style="background-color: #8c4d4d"></div><div class="Color" style="background-color: #9fe2b9"></div><div class="Color" style="background-color: #e3a3a3"></div><div class="Color" style="background-color: #bb7d2b"></div><div class="Color" style="background-color: #453270"></div>
</div>
<input type="color" name="" id="colorNode">
<br><br>
Сортировать<br>
<button id="sortByHNode">по тону</button><br>
<button id="sortBySNode">по насыщенности</button><br>
<button id="sortByLNode">по светлоте</button>

CSS

.Color {
  display: inline-block;
  width: 20px;
  height: 20px;
}

JavaScript

var colors = [];

colorNode.onchange = function () {
	addColor(this.value);
};

sortByHNode.onclick = function () {
	sortColors(0);
};
sortBySNode.onclick = function () {
	sortColors(1);
};
sortByLNode.onclick = function () {
	sortColors(2);
};

function addColor (color) {
	colors.push(color);
	colorsNode.insertAdjacentHTML('beforeEnd', `
		<div class="Color" style="background-color: ${color}"></div>
	`)
}

function sortColors (type) {
	var parent = colorsNode;
	var items = [].slice.call(document.querySelectorAll('.Color'));

	sortNodes(items, parent, {
		map: function (item) {
			var content = item.textContent;
			var parsedColor = getComputedStyle(item)['background-color'].match(/(\d+), (\d+), (\d+)/);
			
			item._th_sort_weight = rgbToHsl(parsedColor[1], parsedColor[2], parsedColor[3])[type];

			return item.parentNode.removeChild(item);
		},
		compare: function (a, b) {
			if (a._th_sort_weight < b._th_sort_weight) return 1;
			if (a._th_sort_weight > b._th_sort_weight) return -1;
			return 0;
		}
	});
}


// https://stackoverflow.com/questions/282670/easiest-way-to-sort-dom-nodes
function sortNodes (nodes, parent, options) {
	if (typeof options === 'undefined') {
		options = {};
	};

	if (typeof options.map === 'undefined') {
		options.map = function (node) {
			return node.parentNode.removeChild(node);
		};
	};

	if (typeof options.compare === 'undefined') {
		options.compare = function (a, b) {
			if (a.textContent > b.textContent) return 1;
			if (a.textContent < b.textContent) return -1;

			return 0;
		};
	};

	nodes
		.map(options.map)
		.sort(options.compare)
		.forEach(function (node) {
			parent.appendChild(node);
		});
};


/**
 * Converts an RGB color value to HSL. Conversion formula
 * adapted from http://en.wikipedia.org/wiki/HSL_color_space.
 * Assumes r, g, and b are contained in the set [0, 255] and
 * returns h, s, and l in the set [0, 1].
 *
 * @param   {number}  r       The red color value
 * @param   {number}  g       The green color...