JS: compressHex

based upon: http://jsfiddle.net/ARTsinn/NhLPj/ https://gist.github.com/Prinzhorn/2628611

by Yannick Albert

HTML

<input id="left" autocomplete="off" autofocus>
<input id="right" autocomplete="off" disabled>
<div id='diff'></div>

CSS

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: sans-serif
}


textarea,input {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: 0;
    padding: 0;
    width: 50%;
    height: 100%;
    font-size: 48px;
    text-align: center;
    border: 0;
    outline: 0;
    -webkit-transition: background 0.5s
}

#left {left: 0}
#right {right: 0}

#diff {position: fixed; top: 50%; width: 100%; text-align: center; pointer-events:none}
#diff:before {
    content: '\3008' ' ';
}
#diff:after {
    content: ' ' '\3009';
}

JavaScript

// http://browserhacks.com/#ie
var IE = !+'\v1';


// https://gist.github.com/Prinzhorn/2628611
var minHex = function a(b, c) {
    return ++c ? (('0x' + b) / 17 + .5 | 0).toString(16) : b.replace(/../g, a);
};


// http://stackoverflow.com/a/14101452/1250044
var hex2rgb = function (hex) {
    if(hex.length < 6) hex = hex.replace(/(.)/g, '$1$1');
    return ['0x' + hex[0] + hex[1] | 0, '0x' + hex[2] + hex[3] | 0, '0x' + hex[4] + hex[5] | 0];
};


// https://gist.github.com/yckart/5896364
var pythdiff = function (rgb1, rgb2) {
    var rd = rgb1[0] - rgb2[0];
    var gd = rgb1[1] - rgb2[1];
    var bd = rgb1[2] - rgb2[2];
 
    return Math.sqrt( rd * rd + gd * gd + bd * bd ) ;
};

pythdiff.perc = function (dist) {
    return 100 - dist * (100 / 441.6729559300637);
};


var left = document.getElementById('left');
var right = document.getElementById('right');
var diff = document.getElementById('diff');

if(IE)
    left.style.lineHeight =
    right.style.lineHeight = document.documentElement.clientHeight + 'px';


// get a random pastel color
// http://stackoverflow.com/a/12266311/1250044
left.value = (function (){
    var r = (Math.round(Math.random() * 127) + 127).toString(16);
    var g = (Math.round(Math.random() * 127) + 127).toString(16);
    var b = (Math.round(Math.random() * 127) + 127).toString(16);
    return '#' + r + g + b;
}());


left.onkeyup = function() {

    // get/store the input-value and remove hash
    var hex = this.value.replace('#', '');

    // stop here if input is no hex color
    // http://stackoverflow.com/a/1636354/1250044
    if(!hex.match(/^(?:[0-9a-fA-F]{3}){1,2}$/)) return;

    // convert 3 to 6 digits
    hex = hex.length < 6 ? hex.replace(/(.)/g, '$1$1') : hex;

    // calculate the font contrast
    left.style.color = 
    right.style.color = (parseInt(hex, 16) > 0xffffff / 2) ? 'black' : 'white';

    // compress the color-input
    var min = minHex(hex);

    // get color difference
    var rgb1 = hex2rgb(hex);
    var rgb2 =...