JSFiddle - React, Tailwind, and code Playground

by prozoroff

JavaScript

const rgb2y = rgb => rgb[0] * 0.2126 + rgb[1] * 0.7152 + rgb[2] * 0.0722;

const rgb2yuv = rgb => {
	return [
		rgb2y(rgb),
		rgb[0] * -0.09991 + rgb[1] * -0.33609 + rgb[2] * 0.436,
		rgb[0] * 0.615 + rgb[1] * -0.55861 + rgb[2] * -0.05639
	];
};

const yuv2rgb = yuv => {
	return [
		clamp(yuv[0] + yuv[1] * 0.0000058 + yuv[2] * 1.28033, 0, 1),
		clamp(yuv[0] + yuv[1] * -0.21482 + yuv[2] * - 0.38059, 0, 1),
		clamp(yuv[0] + yuv[1] * 2.12798 + yuv[2] * 0.000011, 0, 1)
	];
};


function clamp(n,a,b){
if(n > b) return b;
if(n < a) return a;
return n;
}

/**
 * Percieved brightness calculation between 0-1
 * @param color
 * @returns {number} 0-1
 */
function getPercievedBrightness(color) {
	return rgb2y(color);
}

function setPercievedBrightness(color, brightness) {
	const yuvColor = rgb2yuv(color);
	yuvColor[0] = brightness;
	const rgbColor = yuv2rgb(yuvColor);
	color[0] = rgbColor[0];
	color[1] = rgbColor[1];
	color[2] = rgbColor[2];
	return color;
}

alert(getPercievedBrightness([0.5,0.5,0]));
alert(getPercievedBrightness(setPercievedBrightness([0.5,0.5,0],0.5)))