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 [
		jL.clamp(yuv[0] + yuv[2] * 1.28033, 0, 1),
		jL.clamp(yuv[0] + yuv[1] * -0.21482 + yuv[2] -0.38059, 0, 1),
		jL.clamp(yuv[0] + yuv[1] * 2.12798, 0, 1)
	];
}

const colorToVec = rgb => [rgb[0]/255, rgb[1]/255, rgb[2]/255];

function getPercievedBrightness(color) {
	const parsedColor = parseColor(color);
	return rgb2y(colorToVec(parsedColor));
}

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