JSFiddle - React, Tailwind, and code Playground

by Satheesh Kumar

HTML

<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<div class="grid">

<div class="grid__item grid__item_eight grid__item_dark-background" data-secondary="rgb(39, 68, 114)">
            <img...

CSS

body {
        background-color: #fff;
        color: #000;
    }

    .grid {
        display: flex;
        flex-wrap: wrap;
    }

    .grid__item {
        width: calc(25% - 4px);
        height: 150px;
        border: 2px solid #d3d3dd;
    }

    img {
        width: 100%;
        max-width: 150px;
        max-height: 100px;
    }

    .grid__item_dark-background {
        color: #fff;
    }

    .grid__item_one {
        background-color: rgb(0, 0, 0);
    }

    .grid__item_two {
        background-color: rgb(0, 66, 105);
    }

    .grid__item_three {
        background-color: rgb(0, 0, 0);
    }

    .grid__item_four {
        background-color: rgb(252, 200, 121);
    }

    .grid__item_five {
        background-color: rgb(27, 188, 155);
    }

    .grid__item_six {
        background-color: rgb(58, 83, 113);
    }

    .grid__item_seven {
        background-color: rgb(39, 68, 114);
    }

    .grid__item_eight {
        background-color: rgb(0,0, 0) 
    }

JavaScript

function getAverageRGB(imgEl) {
            var blockSize = 5, // only visit every 5 pixels
                defaultRGB = { r: 0, g: 0, b: 0 }, // for non-supporting envs
                canvas = document.createElement('canvas'),
                context = canvas.getContext && canvas.getContext('2d'),
                data, width, height,
                i = -4,
                length,
                rgb = { r: 0, g: 0, b: 0 },
                count = 0;

            if (!context) {
                return defaultRGB;
            }
            height = canvas.height = imgEl.naturalHeight || imgEl.offsetHeight || imgEl.height;
            width = canvas.width = imgEl.naturalWidth || imgEl.offsetWidth || imgEl.width;
            context.drawImage(imgEl, 0, 0);
            try {
                data = context.getImageData(0, 0, width, height);
            } catch (e) {
        /* security error, img on diff domain */alert('x');
                return defaultRGB;
            }

            length = data.data.length;

            while ((i += blockSize * 4) < length) {
                ++count;
                rgb.r += data.data[i];
                rgb.g += data.data[i + 1];
                rgb.b += data.data[i + 2];
            }

            // ~~ used to floor values
            rgb.r = ~~(rgb.r / count);
            rgb.g = ~~(rgb.g / count);
            rgb.b = ~~(rgb.b / count);

            return rgb;
        }
        
        function convertRGB(color) {
            let splitColor = color.split('(')
            let splitColorCodes = splitColor[1].split(',')
            let blueColorCode = splitColorCodes[0].split(')');
            return {
                r: splitColorCodes[0],
                g: splitColorCodes[1],
                b: blueColorCode[0]
            }
        }

        function lightOrDark(color) {
                if (color.match(/^rgb/)) {
                color = color.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)$/);

        ...