JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

Colour palette for pet game.<br>
Body parts and markings all carry own saturation/colour/shade values. Base could be bright blue, eyes faded pink, and two markings dark grey and light lilac. Not genetic-based and not realistic in the slightest, but hey!<br><br>
<b>Full saturation (3)</b><br>
<table>
    <tr>
        <td>
            <div class='swatch colour_311'></div>
            Powder Pink
        </td>
        <td>
            <div class='swatch colour_312'></div>
            Salmon
        </td>
        <td>
            <div class='swatch colour_313'></div>
            Cherry
        </td>
        <td>
            <div class='swatch colour_314'></div>
            Ruby
        </td>
        <td>
            <div class='swatch colour_315'></div>
            Cranberry
        </td>
    </tr>
    <tr>
        <td>
            <div class='swatch colour_321'></div>
            Shell
        </td>
        <td>
            <div class='swatch colour_322'></div>
            Peach
        </td>
        <td>
            <div class='swatch colour_323'></div>
            Chestnut
        </td>
        <td>
            <div class='swatch colour_324'></div>
            Copper
        </td>
        <td>
            <div class='swatch colour_325'></div>
            Walnut
        </td>
    </tr>
    <tr>
        <td>
            <div class='swatch colour_331'></div>
            Vanilla
        </td>
        <td>
            <div class='swatch colour_332'></div>
            Topaz
        </td>
        <td>
            <div class='swatch colour_333'></div>
            Gold
        </td>
        <td>
            <div class='swatch colour_334'></div>
            Honey
        </td>
        <td>
            <div class='swatch colour_335'></div>
            Mustand
        </td>
    </tr>
    <tr>
        <td>
            <div class='swatch colour_341'></div>
            Gooseberry
        </td>
        <td>
            <div class='swatch colour_342'></div>
            Pear
      ...

CSS

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

table td {
    text-align: center;
    font-size: 12px;
}

table td .swatch {
    width: 100px;
    height: 40px;
    border: 1px solid black;
    border-radius: 5px;
    margin: 0px auto 5px;
}

/* BRIGHT colours. Saturation 3. */

/* Red */
.colour_311 { background-color: #eec8c9; } /* f7e1e2 */
.colour_312 { background-color: #dd888a; } /* e49799 */
.colour_313 { background-color: #C84246; }
.colour_314 { background-color: #902122; }
.colour_315 { background-color: #561213; }

/* Orange */
.colour_321 { background-color: #f2d7c6; } /* f9eae0 */
.colour_322 { background-color: #e4ac83; } /* eab992 */
.colour_323 { background-color: #D27D39; }
.colour_324 { background-color: #995319; }
.colour_325 { background-color: #5C310D; }

/* Yellow */
.colour_331 { background-color: #f6e8c1; } /* fbf4dc */
.colour_332 { background-color: #edcf7a; } /* f1d789 */
.colour_333 { background-color: #E1B229; }
.colour_334 { background-color: #A57E0E; }
.colour_335 { background-color: #644C05; }

/* Olive */
.colour_341 { background-color: #eef0c7; } /* f7f8e0 */
.colour_342 { background-color: #dce185; } /* e3e794 */
.colour_343 { background-color: #C6CD3D; }
.colour_344 { background-color: #8F951E; }
.colour_345 { background-color: #565A10; }

/* Green */
.colour_351 { background-color: #dceec8; } /* edf7e1 */
.colour_352 { background-color: #b8dc89; } /* c3e398 */
.colour_353 { background-color: #8EC743; }
.colour_354 { background-color: #619023; }
.colour_355 { background-color: #3A5713; }

/* Teal */
.colour_361 { background-color: #ceeee6; } /* e3f6f1 */
.colour_362 { background-color: #8cd8c7; } /* 9bdfd0 */
.colour_363 { background-color: #4BBFA6; }
.colour_364 { background-color: #298973; }
.colour_365 { background-color: #175346; }

/* Blue */
.colour_371 { background-color: #c6e3f2; } /* e0f1f9 */
.colour_372 { background-color: #83c4e4; } /* 92ceea */
.colour_373 { background-color: #39A1D2; }
.colour_374 { background-color:...

JavaScript

let brightNames = [
    ["Powder Pink", "Salmon", "Cherry", "Ruby", "Cranberry"],
    ["Shell", "Peach", "Chestnut", "Copper", "Walnut"],
    ["Vanilla", "Topaz", "Gold", "Honey", "Mustard"],
    ["Gooseberry", "Pear", "Peridot", "Olive", "Dark Olive"],
    ["Honeydew", "Mint", "Meadow", "Emerald", "Forest"],
    ["Celeste", "Aquamarine", "Turquoise", "Myrtle", "Peacock"],
    ["Powder Blue", "Sky", "Azure", "Cerulean", "Imperial Blue"],
    ["Crystal", "Cornflower", "Royal Blue", "Indigo", "Lapis Lazuli"],
    ["Lilac", "Wysteria", "Amethyst", "Royal Purple", "Midnight"],
    ["pur1", "pur2", "pur3", "pur4", "pur5"],
    ["Dawn", "Rose", "Magenta", "Amaranth", "Byzantium"]
];

let dullNames = [
    ["Misty Rose", "Blush", "Russet", "Rose Vale", "Mahogany"],
    ["Almond", "Toast", "Coffee", "Umber", "Chocolate"],
    ["Cream", "Champagne", "Caramel", "Grullo", "Bistre"],
    ["Ivory", "Khaki", "Lichen", "Moss", "Dark Moss"],
    ["Mint Cream", "Celadon", "Fern", "Ivy", "Jungle"],
    ["Seafoam", "Duck Egg", "Verdigris", "Viridian", "Storm"],
    ["Blizzard", "Frost", "Ocean", "Cerulean", "Twilight"],
    ["Snow", "Cloud", "Slate", "Blueberry", "Cosmos"],
    ["Mist", "Lavender", "Violet", "Orchid", "Blackberry"],
    ["pur1", "pur2", "pur3", "pur4", "pur5"],
    ["Rose Quartz", "Thistle", "Heather", "Mulberry", "Raisin"]
];

let greyNames = ["Platinum", "Silver", "Steel", "Thunder", "Iron"];