JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

<b>Griffusion colour palette</b>
<br>Showing classes, hex colours and names.<br>


<div id='colour_palette'>
    <i>Rendering palettes...</i>
</div>
    
<p>.</p>.<p>.</p>.<p>.</p>

CSS

img, div, button {
    box-sizing: border-box;
}

.center {
    text-align: center;
}
/*
#colour_palette {
    display: flex;
    flex-flow: row wrap;
}

#colour_palette .swatch {
    display: inline-block;
    width: 10%;
    height: 20px;
}
*/
#colour_palette table {
    width: 100%;
    /*height: 100%;*/
    text-align: center;
}
/*
#colour_palette .swatch {
    width: 100%;
    height: 30px;
}*/
#colour_palette .name {
    padding: 5px;
    width: 100%;
    position: absolute;
    bottom: 0px;
    left: 0px;
    background-color: rgba(255, 255, 255, 0.5);
}

#colour_palette table td {
    height: 60px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3) inset;
    transition: 0.2s;
    position: relative;
}


.c_white { background-color: #FFFFFF; }
.f_white { filter: invert(100%); }

/* Red (r). a = bright, m = dull. */

.f_a1 { filter: invert(85%) sepia(10%) saturate(708%) hue-rotate(314deg) brightness(101%) contrast(91%); }
.f_a2 { filter: invert(66%) sepia(81%) saturate(1057%) hue-rotate(308deg) brightness(98%) contrast(81%); }
.f_a3 { filter: invert(18%) sepia(90%) saturate(2563%) hue-rotate(346deg) brightness(106%) contrast(87%); }
.f_a4 { filter: invert(14%) sepia(50%) saturate(4836%) hue-rotate(348deg) brightness(96%) contrast(91%); }
.f_a5 { filter: invert(11%) sepia(49%) saturate(3148%) hue-rotate(342deg) brightness(103%) contrast(99%); }

.f_m1 { filter: invert(100%) sepia(67%) saturate(650%) hue-rotate(291deg) brightness(94%) contrast(94%); }
.f_m2 { filter: invert(78%) sepia(6%) saturate(1797%) hue-rotate(314deg) brightness(87%) contrast(77%); }
.f_m3 { filter: invert(41%) sepia(28%) saturate(708%) hue-rotate(314deg) brightness(97%) contrast(98%); }
.f_m4 { filter: invert(23%) sepia(25%) saturate(1099%) hue-rotate(314deg) brightness(109%) contrast(84%); }
.f_m5 { filter: invert(18%) sepia(9%) saturate(3285%) hue-rotate(314deg) brightness(91%) contrast(87%); }

/* Amber (a). b = bright, n = dull. */

.f_b1 { filter: invert(99%) sepia(39%) saturate(1387%)...

JavaScript

// Red, copper, amber, yellow... purple, magenta, silver.
// Used for colour wheel and calculations.
const validColours = "rcayogtbivpms".split("");

// a-m are bright, n-z are dull. Same 13 colours as above.
// Single letter is stored in DB and used for CSS class.
const validLetters = "abcdefghijklmnopqrstuvwxyz".split("");

// Look up proper colour names and hex codes here.
const colourInfo = {
    a: [ // Bright Red
        {name: "Powder Pink", hex: "F4CCCC"},
        {name: "Salmon", hex: "E48181"},
        {name: "Cherry", hex: "D52F2F"},
        {name: "Ruby", hex: "9B2020"},
        {name: "Cranberry", hex: "681515"}
    ],
    n: [ // Dull Red
        {name: "Misty Rose", hex: "E9D7D7"},
        {name: "Blush", hex: "C99999"},
        {name: "Russet", hex: "A75B5B"},
        {name: "Rose Vale", hex: "7A4040"},
        {name: "Mahogany", hex: "562C2C"}
    ],
    b:  [ // Bright Copper
        {name: "Sand", hex: "F2E6DF"},
        {name: "Tortilla", hex: "DAB8A5"},
        {name: "Tan", hex: "B97A57"},
        {name: "Mocha", hex: "7C4E32"},
        {name: "Chocolate", hex: "4B301F"}
    ],
    o: [ // Dull Copper
        {name: "Peanut", hex: "EBE4E0"},
        {name: "Latte", hex: "C8B4A8"},
        {name: "Coffee", hex: "977564"},
        {name: "Cedar", hex: "675041"},
        {name: "Umber", hex: "45362C"}
    ],
    c:  [ // Bright Amber
        {name: "Shell", hex: "FADBC5"},
        {name: "Peach", hex: "F2AB77"},
        {name: "Orange", hex: "E86F15"},
        {name: "Copper", hex: "AB5210"},
        {name: "Cinnamon", hex: "75380B"}
    ],
    p: [ // Dull Amber
        {name: "Almond", hex: "E6CEC4"},
        {name: "Toast", hex: "CC9C86"},
        {name: "Tawny", hex: "B36D4D"},
        {name: "Brown", hex: "825037"},
        {name: "Walnut", hex: "5C3827"}
    ],
    d: [ // Bright Yellow
        {name: "Vanilla", hex: "FEECB4"},
        {name: "Topaz", hex: "FCD152"},
        {name: "Gold", hex: "F3B805"},
        {name: "Honey", hex:...