color sorting.js

/* found on https://stackoverflow.com/a/8023734/763127 */
function rgb2hsv () {
    var rr, gg, bb,
        r = arguments[0] / 255,
        g = arguments[1] / 255,
        b = arguments[2] / 255,
        h, s,
        v = Math.max(r, g, b),
        diff = v - Math.min(r, g, b),
        diffc = function(c){
            return (v - c) / 6 / diff + 1 / 2;
        };

    if (diff == 0) {
        h = s = 0;
    } else {
        s = diff / v;
        rr = diffc(r);
        gg = diffc(g);
        bb = diffc(b);

        if (r === v) {
            h = bb - gg;
        }else if (g === v) {
            h = (1 / 3) + rr - bb;
        }else if (b === v) {
            h = (2 / 3) + gg - rr;
        }
        if (h < 0) {
            h += 1;
        }else if (h > 1) {
            h -= 1;
        }
    }
    return {
        h: Math.round(h * 360),
        s: Math.round(s * 100),
        v: Math.round(v * 100)
    };
}
/* found ends */





const toInt  = hexPair  => parseInt(hexPair, 16),
      toInts = hexSeven => [ toInt(hexSeven.substring(1,3)), toInt(hexSeven.substring(3,5)), toInt(hexSeven.substring(5,7)) ];

function colorSort(c1, c2) {
  
  var l = rgb2hsv.apply(this, toInts(c1)),
      r = rgb2hsv.apply(this, toInts(c2));

  if (l.h < r.h) { return  1; }
  if (l.h > r.h) { return -1; }

  if (l.s < r.s) { return  1; }
  if (l.s > r.s) { return -1; }

  if (l.v < r.v) { return  1; }
  if (l.v > r.v) { return -1; }

  return 0;

}





function swatches(colors, sizePx = 25, colCount=(Math.ceil(Math.sqrt(colors.length)))) {

  const rowCount = Math.ceil(colors.length / colCount),
        table    = document.createElement('table'),
        tbody    = document.createElement('tbody');

  var   idx      = 0;

  for (let row=0; row<rowCount; ++row) {

    const tr = document.createElement('tr');

    for (let col=0; col<colCount; ++col) {
      const td = document.createElement('td');
      td.style.width = `${sizePx}px`;
      td.style.height = `${sizePx}px`;
      td.style.backgroundColor = colors[idx];
      tr.appendChild(td);
      ++idx;
    }

    tbody.appendChild(tr);

  }

  table.appendChild(tbody);
  return table;

}

What colors are available on github for new languages.js

// feed me the contents of https://raw.githubusercontent.com/github/linguist/master/lib/linguist/languages.yml
//
// helpfully after the leading comment it has no backticks; you can contain it in a template string as just a copy paste
//   as long as you remove the comment part
//
// const _raw = `(paste)`;  
// _raw.length;   // was around 84k at the time of this writing
//
// colors_from() will return an array of the colors within
// html_view() will render a page thereof
//
// you may then search in vain for a usable color
// mwa ha ha

function colors_from(raw) {

  return lines = raw.replace('\r\n', '\n')                       // normalize dos-style to unix lines
                    .replace('\r', '\n')                         // normalize old-mac-style to unix lines
                    .split('\n')                                 // split string to array on unix lines
                    .filter(line => line.length)                 // remove empties
                    .map(s => s.trim())                          // clean strings' sides of whitespace
                    .filter(line => line.startsWith('color: '))  // remove everything but color rows
                    .map(c => c.substring(8).split('"',1)[0] );  // remove front, then everything after 2nd " 

}

/* today's results (there's 214 of them:)

["#814CCC","#E8274B","#B9D9FF","#E6EFBB","#9DC3FF","#2ACCA8","#5A8164","#6a40fd","#1ac620","#882B0F","#02f88c",
 "#315665","#64C800","#101F1F","#aa2afe","#bd79d1","#a957b0","#6E4C13","#6594b9","#1C3552","#C1F12E","#cd6400",
 "#d4bec1","#2F2530","#555555","#178600","#f34b7d","#563d7c","#8dc63f","#ccccff","#db901e","#3F85AF","#E4E6F3",
 "#db5855","#244776","#ed2cd6","#3fb68b","#B0CE4E","#776791","#3A4E3A","#ba595e","#447265","#00B4AB","#cca760",
 "#6c616e","#ccce35","#8a1267","#a78649","#946d57","#6e4a7e","#60B5CC","#c065db","#FFF4F3","#B83998","#b845fc",
 "#88ccff","#636746","#7b9db4","#14253c","#341708","#4d41b1","#0050b2","#00cafe","#8fb200","#fb855d","#5B2063",
 "#e4cc98","#f0a9f0","#375eab","#88562A","#82937f","#79aa7a","#e69f56","#e34c26","#878787","#0e60e3","#5e5086",
 "#df7900","#7790B2","#a3522f","#a9188d","#078193","#FEFE00","#9EEDFF","#40d47e","#b07219","#f1e05a","#843179",
 "#a270ba","#DA5B0B","#28431f","#F18E33","#185619","#cc9900","#3d9970","#999999","#DBCA00","#499886","#652B81",
 "#000080","#00a6a6","#62A8D6","#4A76B8","#b7e1f4","#427819","#f97732","#bb92ac","#c4a79c","#ff2b2b","#007800",
 "#8f14e9","#c7a938","#28431f","#990000","#3d3c6e","#0aa0ff","#747faa","#ff6375","#87AED7","#37775b","#009917",
 "#7e7eff","#c9df40","#3be133","#438eff","#6866fb","#ff0c5a","#cabbff","#f7ede0","#cdd0e3","#fab738","#7055b5",
 "#dbb284","#4F5D95","#dad8d8","#cc0000","#6600cc","#f3ca0a","#E3F171","#C76F5B","#0298c3","#0000fb","#fcd7de",
 "#005390","#d80074","#da291c","#8f0f8d","#012456","#0096D8","#74283c","#7fa2a7","#302B6D","#5a6986","#1D222D",
 "#3572A5","#44a51c","#198CE7","#77d9fb","#665a4e","#22228f","#9d5200","#fffaa0","#358a5b","#f50000","#ff7f7f",
 "#0e60e3","#ecdebe","#cc0088","#701516","#dea584","#B34936","#3F3F3F","#348a34","#646464","#c22d40","#1e4aec",
 "#0579aa","#89e051","#120F14","#007eff","#596706","#5c7611","#800000","#b2011d","#dc566d","#46390b","#ffac45",
 "#DAE1C2","#A0AA87","#e4cc98","#3D6117","#00004c","#cf142b","#2b7489","#a54c4d","#adb2cb","#fbe5cd","#b2b7f8",
 "#199f4b","#945db7","#1F1F1F","#2c3e50","#04133b","#4B6BEF","#99DA07","#5232e7","#EB8CEB","#4B6C4B","#118f9e",
 "#913960","#94B0C7","#b0b77e","#7582D1","#403a40"
]

*/



function swatches(colors, sizePx = 25, colCount=(Math.ceil(Math.sqrt(colors.length)))) {

  const rowCount = Math.ceil(colors.length / colCount),
        table    = document.createElement('table'),
        tbody    = document.createElement('tbody');

  var   idx      = 0;

  for (let row=0; row<rowCount; ++row) {

    const tr = document.createElement('tr');

    for (let col=0; col<colCount; ++col) {
      const td = document.createElement('td');
      td.style.width = `${sizePx}px`;
      td.style.height = `${sizePx}px`;
      td.style.backgroundColor = colors[idx];
      tr.appendChild(td);
      ++idx;
    }

    tbody.appendChild(tr);

  }

  table.appendChild(tbody);
  return table;

}

// produces http://imgur.com/a/zOXut

sorted by h, then s, then v, it's more like