Colortron 5000 - dye picker

by that_shaman

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.6.1/spectrum.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.6.1/spectrum.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-color/2.1.2/jquery.color.min.js"></script>
<link rel="stylesheet" href="https://d1h9a8s8eodvjz.cloudfront.net/fonts/menomonia/08-02-12/menomonia.css">
<b>Usage</b>: Select a color below or double click one of the dyes in the list.
<div id="outputDiv" style="float: left; margin: 10px"></div>
<div style="float: left; margin: 10px">
    <input type='text' id="picker" value='#eef7f1' />
</div>

CSS

.dye {
    color: #ffffff;
    text-shadow: 1px 1px #000000, -1px -1px 0 #000000, 1px -1px 0 #000000, -1px 1px 0 #000000;
    height: 38px;
    width: 300px;
    padding: 10px;
    border: solid 1px #000000;
    -moz-border-radius: 5px;
    border-radius: 5px;
    font-size: 11pt;
    cursor: pointer;
    margin: 3px;
}

body {
    font-family: menomonia;
}

JavaScript

/*
Copyright © 2015 that_shaman
This work is free. You can redistribute it and/or modify it under the
terms of the Do What The Fuck You Want To Public License, Version 2,
as published by Sam Hocevar. See http://www.wtfpl.net/ for more details.
*/

function sortFunction(a, b)
{
    return a[0] > b[0];
}

function toGW2Code(input)
{
    var buffer = "";

    for (r = 0; r < input.length; r++)
    {
        buffer += String.fromCharCode(input[r]);
    }

    return "[&" + btoa(buffer) + "]";
}

function idToGW2Code(id)
{
    var A = Math.floor(id / 256);
    var B = id - (A * 256);

    return toGW2Code(new Array(2, 1, B, A, 0, 0));
}

function RGBtoXYZ(r, g, b)
{
    var var_R = (r / 255);
    var var_G = (g / 255);
    var var_B = (b / 255);

    if (var_R > 0.04045) var_R = Math.pow(((var_R + 0.055) / 1.055), 2.4);
    else var_R = var_R / 12.92;

    if (var_G > 0.04045) var_G = Math.pow(((var_G + 0.055) / 1.055), 2.4);
    else var_G = var_G / 12.92;

    if (var_B > 0.04045) var_B = Math.pow(((var_B + 0.055) / 1.055), 2.4);
    else var_B = var_B / 12.92;

    X = var_R * 0.4124 + var_G * 0.3576 + var_B * 0.1805;
    Y = var_R * 0.2126 + var_G * 0.7152 + var_B * 0.0722;
    Z = var_R * 0.0193 + var_G * 0.1192 + var_B * 0.9505;

    var_X = X / 95.047;
    var_Y = Y / 100.000;
    var_Z = Z / 108.883;

    if (var_X > 0.008856) var_X = Math.pow(var_X, (1 / 3));
    else var_X = (7.787 * var_X) + (16 / 116);
    if (var_Y > 0.008856) var_Y = Math.pow(var_Y, (1 / 3));
    else var_Y = (7.787 * var_Y) + (16 / 116);
    if (var_Z > 0.008856) var_Z = Math.pow(var_Z, (1 / 3));
    else var_Z = (7.787 * var_Z) + (16 / 116);

    return [var_X, var_Y, var_Z];
}

function RGBtoLAB(r, g, b)
{
    var var_R = (r / 255);
    var var_G = (g / 255);
    var var_B = (b / 255);

    if (var_R > 0.04045) var_R = Math.pow(((var_R + 0.055) / 1.055), 2.4);
    else var_R = var_R / 12.92;

    if (var_G > 0.04045) var_G = Math.pow(((var_G + 0.055) / 1.055), 2.4);
    else var_G =...