JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

<div class='colourSwatch' id='crossColour1' data-swatch='1'>
    <div class='swatch' style='background-color:#F5B2D9'></div> (l2) Rose
</div>
 + 
<div class='colourSwatch' id='crossColour2' data-swatch='2'>
    <div class='swatch' style='background-color:#4A1D97'></div> (j7) Royal Purple
</div>
 = 
<div class='colourSwatch' id='crossColourResult'></div>
<button id='crossColourBtn'>Mix</button>
<hr>
<div id='colour_info'></div>
<div id='colour_table'></div>

CSS

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

input {
    width: 40px;
}

.colour_table {
    width: 100%;
    max-width: 600px;
    margin: 20px auto;
     border-collapse: collapse; 
    /* border-collapse: separate;
       border-spacing: 1px; */
}

.colour_table td {
    height: 25px;
    border: 1px solid rgba(0, 0, 0, 0.3);
    transition: 0.2s;
}

.colour_table td:hover {
    cursor: pointer;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.4) inset;
    transition: 0.2s;
}

.colour_table .active-cell {
    box-shadow: 0 0 0 1px #000 inset;
}

.colourSwatch {
    display: inline-block;
    border: 1px solid silver;
    padding: 5px;
}

.colourSwatch .swatch {
    width: 30px;
    height: 30px;
    display: inline-block;
    transition: 0.3s;
}

.colourSwatch:not(#crossColourResult):hover {
    cursor: pointer;
    background-color: #ddd;
    transition: 0.3s;
}

.activeSwatch {
    background-color: #ddd;
}

JavaScript

/*
* There are 9 shades (hex colours) and 5 names.
*/
const db = {
    palette: {
        a: { // Bright Red
            names: ["Powder Pink","Salmon","Cherry","Ruby","Cranberry"],
            codes: ["FDE5E5","F4B6B6","EB8888","E15858","D92A2A","BC2121","9D1818","810F0F","640808"]
        },
        n: { // Dull Red
            names: ["Misty Rose","Blush","Russet","Rose Vale","Mahogany"],
            codes: ["F5EDED","E1C9C9","CCA7A7","B68383","A26161","8B5252","734242","5D3333","472525"]
        },
        b: { // Bright Brown
            names: ["Shell","Peach","Chestnut","Copper","Walnut"],
            codes: ["F7E8DF","E8CCBC","D9B19A","CA9475","BB7954","9F6646","835337","67412A","4C2F1D"]
        },
        o: { // Dull Brown
            names: ["Almond","Toast","Coffee","Umber","Chocolate"],
            codes: ["EFEAE7","DAD0CA","C5B6AE","AF9B90","9B8274","836E62","6B594F","54463D","3D332C"]
        },
        c: { // Bright Copper
            names: ["Shell","Peach","Chestnut","Copper","Walnut"],
            codes: ["FFE9D9","FCCDAB","F9B37F","F69850","F37E25","D1691A","AC5310","893E06","652A00"]
        },
        p: { // Dull Copper
            names: ["Almond","Toast","Coffee","Umber","Chocolate"],
            codes: ["F2EAE4","E0D1C6","CFB9A8","BE9F87","AD876A","937157","775A44","5D4431","432F20"]
        },
        d: { // Bright Yellow
            names: ["Vanilla","Topaz","Gold","Honey","Mustard"],
            codes: ["FEF3D1","FEE59B","FDD767","FAC831","F8BA00","D29E00","AC8000","896500","654B00"]
        },
        q: { // Dull Yellow
            names: ["Cream","Champagne","Caramel","Grullo","Bistre"],
            codes: ["F0EADF","DFD1BA","CDBA96","BAA170","AA8B4C","907641","766035","5D4C2A","46381E"]
        },
        e: {
            names: ["Gooseberry","Pear","Peridot","Olive","Dark Olive"],
            codes: ["F2FBDC","DEF2B0","CBE985","B7DF58","A4D72D","8BB823","719619","597610","405807"]
        },
        r: { // Dull Olive
        ...