<!DOCTYPE html>
<html>
    <head>
        <style>
            .sample {
                width: 500px;
                height: 400px;
                background-color: rgb(51,51,51);
            }
            
            .sample > div {
                height: 30px;
                width: 30px;
                margin: 5px;
                float: left;
            }

            .test
            {
                width: 100px;
                height: 100px;
                background-color: blue;
                border: 50px solid green;
                margin: 10px;
                float: left;
            }
        </style>
        <script>
            const colors = [
                // Original, Transformed.
                ["rgb(0, 0, 0)", "rgb(255,255,255)"],
                ["rgb(255, 255, 255)", "rgb(51,51,51)"],
                ["rgb(235, 235, 235)", "rgb(67,67,67)"],
                ["rgb(214, 214, 214)", "rgb(84,84,84)"],
                ["rgb(192, 192, 192)", "rgb(101,101,101)"],
                ["rgb(170, 170, 170)", "rgb(119,119,119)"],
                ["rgb(146, 146, 146)", "rgb(138,138,138)"],
                ["rgb(122, 122, 122)", "rgb(157,157,157)"],
                ["rgb(96, 96, 96)", "rgb(178,178,178)"],
                ["rgb(68, 68, 68)", "rgb(201,201,201)"],
                ["rgb(35, 35, 35)", "rgb(227,227,227)"],
                ["rgb(0, 0, 0)", "rgb(255,255,255)"],
                ["rgb(0, 54, 74)", "rgb(199,242,255)"],
                ["rgb(0, 30, 87)", "rgb(191,215,255)"],
                ["rgb(17, 5, 59)", "rgb(222,212,255)"],
                ["rgb(46, 7, 62)", "rgb(240,209,253)"],
                ["rgb(60, 8, 27)", "rgb(249,207,222)"],
                ["rgb(92, 7, 0)", "rgb(252,184,178)"],
                ["rgb(90, 28, 0)", "rgb(251,201,179)"],
                ["rgb(88, 52, 0)", "rgb(249,220,179)"],
                ["rgb(85, 61, 0)", "rgb(249,230,181)"],
                ["rgb(102, 97, 0)", "rgb(246,242,165)"],
                ["rgb(79, 85, 3)", "rgb(241,245,180)"],
                ["rgb(38, 62, 15)", "rgb(220,240,202)"],
                ["rgb(0, 77, 101)", "rgb(179,240,255)"],
                ["rgb(0, 46, 122)", "rgb(166,202,255)"],
                ["rgb(26, 10, 83)", "rgb(207,195,253)"],
                ["rgb(69, 14, 89)", "rgb(233,189,249)"],
                ["rgb(86, 16, 41)", "rgb(242,186,206)"],
                ["rgb(131, 17, 0)", "rgb(250,159,145)"],
                ["rgb(124, 42, 0)", "rgb(249,183,149)"],
                ["rgb(122, 74, 0)", "rgb(247,209,149)"],
                ["rgb(120, 87, 0)", "rgb(246,220,150)"],
                ["rgb(141, 134, 0)", "rgb(243,237,130)"],
                ["rgb(111, 118, 8)", "rgb(233,239,151)"],
                ["rgb(56, 87, 26)", "rgb(205,230,181)"],
                ["rgb(0, 109, 143)", "rgb(147,234,255)"],
                ["rgb(0, 66, 170)", "rgb(130,183,255)"],
                ["rgb(44, 19, 118)", "rgb(189,169,248)"],
                ["rgb(97, 23, 124)", "rgb(222,163,243)"],
                ["rgb(121, 26, 62)", "rgb(235,159,187)"],
                ["rgb(181, 26, 0)", "rgb(248,124,103)"],
                ["rgb(173, 62, 0)", "rgb(246,157,108)"],
                ["rgb(169, 104, 0)", "rgb(244,192,108)"],
                ["rgb(167, 123, 0)", "rgb(243,208,109)"],
                ["rgb(196, 188, 0)", "rgb(238,232,81)"],
                ["rgb(154, 166, 14)", "rgb(221,231,109)"],
                ["rgb(79, 122, 40)", "rgb(183,217,151)"],
                ["rgb(0, 140, 180)", "rgb(119,231,255)"],
                ["rgb(0, 86, 214)", "rgb(98,167,255)"],
                ["rgb(55, 26, 148)", "rgb(170,147,244)"],
                ["rgb(123, 33, 159)", "rgb(208,136,237)"],
                ["rgb(154, 36, 79)", "rgb(226,132,166)"],
                ["rgb(227, 36, 0)", "rgb(246,93,64)"],
                ["rgb(217, 80, 0)", "rgb(244,134,70)"],
                ["rgb(213, 132, 0)", "rgb(241,176,70)"],
                ["rgb(210, 157, 0)", "rgb(239,197,71)"],
                ["rgb(245, 236, 0)", "rgb(234,227,37)"],
                ["rgb(195, 209, 23)", "rgb(209,220,71)"],
                ["rgb(102, 156, 53)", "rgb(162,205,122)"],
                ["rgb(0, 163, 215)", "rgb(93,223,255)"],
                ["rgb(0, 97, 255)", "rgb(68,146,255)"],
                ["rgb(77, 34, 179)", "rgb(158,123,239)"],
                ["rgb(153, 41, 189)", "rgb(203,114,232)"],
                ["rgb(185, 45, 93)", "rgb(219,107,145)"],
                ["rgb(255, 64, 19)", "rgb(230,77,41)"],
                ["rgb(255, 106, 0)", "rgb(241,122,37)"],
                ["rgb(255, 170, 0)", "rgb(237,169,33)"],
                ["rgb(254, 199, 0)", "rgb(236,192,32)"],
                ["rgb(255, 252, 65)", "rgb(186,184,34)"],
                ["rgb(217, 235, 55)", "rgb(181,196,51)"],
                ["rgb(119, 187, 65)", "rgb(140,194,96)"],
                ["rgb(0, 199, 252)", "rgb(64,223,255)"],
                ["rgb(58, 136, 254)", "rgb(65,127,221)"],
                ["rgb(94, 48, 235)", "rgb(119,82,232)"],
                ["rgb(190, 56, 243)", "rgb(180,73,223)"],
                ["rgb(230, 59, 122)", "rgb(208,71,122)"],
                ["rgb(255, 98, 81)", "rgb(184,58,45)"],
                ["rgb(255, 134, 71)", "rgb(189,92,42)"],
                ["rgb(255, 180, 63)", "rgb(192,132,38)"],
                ["rgb(254, 203, 62)", "rgb(191,151,37)"],
                ["rgb(255, 247, 107)", "rgb(157,150,38)"],
                ["rgb(228, 239, 101)", "rgb(153,162,52)"],
                ["rgb(150, 211, 95)", "rgb(122,171,77)"],
                ["rgb(83, 213, 253)", "rgb(60,164,196)"],
                ["rgb(116, 167, 254)", "rgb(61,102,171)"],
                ["rgb(135, 78, 254)", "rgb(111,66,206)"],
                ["rgb(211, 87, 254)", "rgb(162,63,196)"],
                ["rgb(237, 113, 158)", "rgb(165,66,101)"],
                ["rgb(255, 140, 130)", "rgb(147,55,46)"],
                ["rgb(255, 165, 125)", "rgb(149,77,44)"],
                ["rgb(255, 198, 119)", "rgb(151,105,42)"],
                ["rgb(255, 216, 119)", "rgb(150,119,41)"],
                ["rgb(255, 249, 149)", "rgb(127,122,42)"],
                ["rgb(235, 243, 143)", "rgb(126,132,52)"],
                ["rgb(177, 221, 140)", "rgb(102,137,72)"],
                ["rgb(148, 227, 254)", "rgb(57,120,141)"],
                ["rgb(168, 198, 254)", "rgb(58,82,126)"],
                ["rgb(177, 140, 254)", "rgb(90,61,152)"],
                ["rgb(227, 146, 254)", "rgb(124,59,145)"],
                ["rgb(244, 164, 192)", "rgb(124,60,82)"],
                ["rgb(255, 181, 175)", "rgb(112,53,48)"],
                ["rgb(255, 196, 171)", "rgb(114,67,47)"],
                ["rgb(255, 217, 168)", "rgb(115,85,45)"],
                ["rgb(255, 228, 168)", "rgb(114,93,45)"],
                ["rgb(255, 251, 185)", "rgb(101,98,45)"],
                ["rgb(242, 247, 183)", "rgb(99,103,52)"],
                ["rgb(204, 232, 181)", "rgb(84,107,65)"],
                ["rgb(202, 240, 254)", "rgb(54,85,96)"],
                ["rgb(212, 227, 254)", "rgb(55,67,88)"],
                ["rgb(217, 202, 254)", "rgb(68,56,97)"],
                ["rgb(241, 201, 254)", "rgb(87,55,98)"],
                ["rgb(249, 211, 224)", "rgb(86,56,66)"],
                ["rgb(255, 218, 216)", "rgb(81,51,49)"],
                ["rgb(255, 226, 214)", "rgb(82,59,49)"],
                ["rgb(255, 236, 213)", "rgb(82,67,48)"],
                ["rgb(255, 242, 213)", "rgb(82,71,48)"],
                ["rgb(254, 252, 221)", "rgb(75,74,49)"],
                ["rgb(248, 250, 219)", "rgb(76,77,52)"],
                ["rgb(224, 237, 212)", "rgb(73,84,63)"],
            ];

            function createSwatches(parent)
            {
                for (color of colors) {
                    var child = document.createElement('div');
                    child.style.backgroundColor = color[1];
                    parent.appendChild(child);
                }
            }

            function doSetup()
            {
                var div;
                for (div of document.querySelectorAll('.sample'))
                    createSwatches(div);
            }
            
            window.addEventListener('load', doSetup, false);
            
        </script>
    </head>
    <body>
        <div class="sample"></div>
    </body>
</html>