Color at pixel with contrast

by Louis Walch

HTML

<div class="section" style="background-color: #ffa500;"></div>
<div class="section" style="background-color: #000080;"></div>
<div class="section" style="background-image: url(https://media.cnn.com/api/v1/images/stellar/prod/231009084221-greta-gerwig-0712.jpg?c=16x9&q=h_438,w_780,c_fill);"></div>
<div class="section" style="background-image: url(https://media.cnn.com/api/v1/images/stellar/prod/240103115012-07-oppenheimer-film.jpg?c=16x9&q=h_438,w_780,c_fill);"></div>

<div class="menu">
MENU
</div>

CSS

.section {
    width: 400px;
    height: 300px;
    background-size: cover;
    cursor: crosshair;
    background-color: white;
}

.menu {
    position: fixed;
    top: 30px;
    left: 440px;
    width: 200px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ccc;
    font-size: 26px;
    font-family: sans-serif;
}
.menu.--white {
    color: white;
}

JavaScript

var menu = document.getElementsByClassName('menu')[0];
var sections = document.getElementsByClassName('section');

function setMenuColor(color) {
	if (!color) color = '#ffffff';

	menu.style.backgroundColor = color;

    var colors = color.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
    var r = colors[1];
    var g = colors[2];
    var b = colors[3];
    var o = Math.round(((parseInt(r) * 299) + (parseInt(g) * 587) + (parseInt(b) * 114)) / 1000);

  	if (o > 125) {
    	menu.classList.remove('--white')
  	} else {
    	menu.classList.add('--white')
  	}	

}



for (var i = 0; i < sections.length; i++) {
    sections[i].addEventListener('click', e => {

        var element = e.target;
        var has_bg_image = element.style.backgroundImage !== '';

		if (!has_bg_image) {
        	setMenuColor(element.style.backgroundColor);
        	return;
        }
        
        


    });
}

/* function getPixel(img, x, y) {

    let canvas = document.createElement('canvas');
    canvas.width = 1;
    canvas.height = 1;
    canvas.getContext('2d').drawImage(img, x, y, 1, 1, 0, 0, 1, 1);;
    let pixelData = canvas.getContext('2d').getImageData(0, 0, 1, 1).data;

    return pixelData;   
} */