JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Are you a human?</h1>
<span id="msg">Click on the square with <span id="picked">this color</span>:</span>
<br/>
<div id="color1" class="checker">
    <div></div>
    <div></div>
    <div></div>
</div>
<div id="color2" class="checker">
    <div></div>
    <div></div>
    <div></div>
</div>
<div id="color3" class="checker">
    <div></div>
    <div></div>
    <div></div>
</div>
<h2 id="clicked"></h2>

CSS

div {
    margin: 0;
    padding: 0;
}
div.checker {
    width: 100px;
    height: 100px;
    float: left;
    cursor: pointer;        
}
.checker div {
    position: absolute;
    width: inherit;
    height: inherit;
}
#msg,#clicked {
    font-size: 30px;
}

JavaScript

function setColors(len) {
    var f = [];
    for(var i=1; i<len; i++) f[i-1] = meshColors('color'+i);
    var pos = (Math.random()*3|0);
    var r = f[pos][0]|0;
    var g = f[pos][1]|0;
    var b = f[pos][2]|0;
    document.getElementById('picked').style.color = 'rgba('+r+','+g+','+b+',0.9)';
    
}
function meshColors(id) {
    var el = document.getElementById(id);
    var c = el.getElementsByTagName('div');
    var f = [0,0,0];
    for(x=0,l=c.length; x<l ; x++) {
        m = Math.random;
        var r = m() * 255|0;
        var g = m() * 255|0;
        var b = m() * 255|0;
        c[x].style.background = 'rgba('+r+','+g+','+b+',0.3)';
        f[0] += r*0.3;
        f[1] += g*0.3;
        f[2] += b*0.3;
    }
    return f;
}

function checkAnswer(el) {
    var c = el.getElementsByTagName('div');
    var f = [0,0,0];
    for(x=0,l=c.length; x<l ; x++) {
        var style = c[x].style.background.match(/rgba\(([^\)]+)\)/)[1];
        var colors = style.split(',');
        f[0] += colors[0]*0.3;
        f[1] += colors[1]*0.3;
        f[2] += colors[2]*0.3;
        
    }
    var r = f[0]|0;
    var g = f[1]|0;
    var b = f[2]|0;
    var ans = 'rgba('+r+', '+g+', '+b+', 0.9)';
    var p = document.getElementById('picked').style.color;
    return ans==p;  
}

(function(){
    setColors(4);
    d = document.getElementsByClassName('checker');
    for(var i=0, l = d.length; i < l; i++) {
        var v = i;
        d[i].onclick = function() {
            if(checkAnswer(this)) {
                document.getElementById('clicked').innerHTML = 'Right! :)';
            } else {
                document.getElementById('clicked').innerHTML = 'Wrong! SPAMMER!';
            }
        };
     }
}());