JSFiddle - React, Tailwind, and code Playground

by icodeforlove

HTML

<h2>dictionary words as HEX color codes</h2>

CSS

body {
    font-family: helvetica, arial;
    color: #444;
    width: 1035px;
    margin: 0 auto;
    background: #fff;
}
h2 {
    text-align: center;
}
.color {
    float: left;
    width: 70px;
    height: 27px;
    padding: 5px;
    text-align: center;
    margin: 2px;
    font-size: 12px;
    border-width: 5px;
    border-style: solid;
}
.hex {
    text-transform: uppercase;
    display: block;
}
.word {
    display: block;
    font-weight: bold;
}

JavaScript

function rgbToHsl(rgb){
    var r = rgb.r,
        g = rgb.g,
        b = rgb.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 [Math.floor(h * 360), Math.floor(s * 100), Math.floor(l * 100)];
}

function rgbToHsv(rgb) {
    var r = rgb.r,
        g = rgb.g,
        b = rgb.b;
    
    var
        min = Math.min(r, g, b),
        max = Math.max(r, g, b),
        delta = max - min,
        h, s, v = max;

    v = Math.floor(max / 255 * 100);
    if ( max != 0 )
        s = Math.floor(delta / max * 100);
    else {
        // black
        return [0, 0, 0];
    }

    if( r == max )
        h = ( g - b ) / delta;         // between yellow & magenta
    else if( g == max )
        h = 2 + ( b - r ) / delta;     // between cyan & yellow
    else
        h = 4 + ( r - g ) / delta;     // between magenta & cyan

    h = Math.floor(h * 60);            // degrees
    if( h < 0 ) h += 360;

    return [h, s, v];
}

function hexToRgb(hex) {
    var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
    hex = hex.replace(shorthandRegex, function(m, r, g, b) {
        return r + r + g + g + b + b;
    });

    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
    return result ? {
        r: parseInt(result[1], 16),
        g: parseInt(result[2], 16),
        b: parseInt(result[3], 16)
    } : null;
}

var colors = [
	{ word: 'aal', hex: 'aa1' },
	{ word: 'aba', hex: 'aba' },
	{ word: 'abased', hex: 'aba5ed' },
	{ word: 'abasia', hex: 'aba51a' },
	{ word: 'abasic', hex: 'aba51c' },
	{ word: 'abatis', hex:...