JSFiddle - React, Tailwind, and code Playground

by kobi

HTML

<div id="footer-sites">
                    
                        <span style="color:#FE7A15;font-size:140%">■</span>&nbsp;<a href="http://stackoverflow.com">stackoverflow.com</a>&nbsp; 
                        <span style="color:#FE7A15;font-size:140%">■</span>&nbsp;<a href="http://stackapps.com">api/apps</a>&nbsp; 
                        <span style="color:#FE7A15;font-size:140%">■</span>&nbsp;<a href="http://careers.stackoverflow.com">careers</a>&nbsp; 
                        <span style="color:#E8272C;font-size:140%">■</span>&nbsp;<a href="http://serverfault.com">serverfault.com</a>&nbsp; 
                        <span style="color:#00AFEF;font-size:140%">■</span>&nbsp;<a href="http://superuser.com">superuser.com</a>&nbsp; 
                        <span style="color:#969696;font-size:140%">■</span>&nbsp;<a href="http://meta.stackoverflow.com">meta</a>&nbsp; 
                        <span style="color:#46937D;font-size:140%">■</span>&nbsp;<a href="http://area51.stackexchange.com">area&nbsp;51</a>&nbsp; 
                        <span style="color:#C0D0DC;font-size:140%">■</span>&nbsp;<a href="http://webapps.stackexchange.com">webapps</a>&nbsp; 
                        <span style="color:#000000;font-size:140%">■</span>&nbsp;<a href="http://gaming.stackexchange.com">gaming</a>&nbsp; 
                        <span style="color:#dd4814;font-size:140%">■</span>&nbsp;<a href="http://askubuntu.com">ubuntu</a>&nbsp; 
                        <span style="color:#9ce4fe;font-size:140%">■</span>&nbsp;<a href="http://webmasters.stackexchange.com">webmasters</a>&nbsp; 
                        <span style="color:#cf4d3f;font-size:140%">■</span>&nbsp;<a href="http://cooking.stackexchange.com">cooking</a>&nbsp; 
                        <span style="color:#f4f28d;font-size:140%">■</span>&nbsp;<a href="http://gamedev.stackexchange.com">game development</a>&nbsp; 
                        <span style="color:#0f3559;font-size:140%">■</span>&nbsp;<a...

JavaScript

// from http://stackoverflow.com/questions/2348597/why-doesnt-this-javascript-rgb-to-hsl-code-work
function rgbToHsl(r, g, b){
    r /= 255, g /= 255, b /= 255;
    var max = Math.max(r, g, b), min = Math.min(r, g, b);
    var h, s, l = (max + min) / 2;

    if(max == min){
        h = s = 0; // achromatic
    }else{
        var d = max - min;
        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
        switch(max){
            case r: h = (g - b) / d + (g < b ? 6 : 0); break;
            case g: h = (b - r) / d + 2; break;
            case b: h = (r - g) / d + 4; break;
        }
        h /= 6;
    }

    return {h:h,s:s,l:l};
}


$("#footer-sites a").each(function(){
    var link = $(this);
    var newSpan = $("<span />");
    var colorBox = link.prev();

    var color = colorBox.css('color');
    var rgbs = color.match(/\d+/g);
    hsl = rgbToHsl(rgbs[0],rgbs[1],rgbs[2]);
    newSpan.data('colorHsl', hsl);
    
    colorBox.add(link).wrapAll(newSpan);
});


var sorted = $("#footer-sites > span").get().sort(function(a,b){return $(a).data('colorHsl').h - $(b).data('colorHsl').h;});


$("#footer-sites").append(sorted);