Color Conversion functions

colors.ts

/*
HSV/HSL code based on Wikipedia algorithms

Permission to use, copy, modify, and/or distribute this software for
any purpose with or without fee is hereby granted.

THE SOFTWARE IS PROVIDED “AS IS” AND THE AUTHOR DISCLAIMS ALL
WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES
OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE
FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY
DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN
AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT
OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
*/
export function hexToRgb(hexCode: string) {
	if (hexCode.length === 6) {
		const r = `${hexCode[0]}${hexCode[1]}`,
			g = `${hexCode[2]}${hexCode[3]}`,
			b = `${hexCode[4]}${hexCode[5]}`;
		return [parseInt(r, 16), parseInt(g, 16), parseInt(b, 16)];
	} else if (hexCode.length === 3) {
		const r = `${hexCode[0]}${hexCode[0]}`,
			g = `${hexCode[1]}${hexCode[1]}`,
			b = `${hexCode[2]}${hexCode[2]}`;
		return [parseInt(r, 16), parseInt(g, 16), parseInt(b, 16)];
	} else {
		// throw new Error(`invalid hex color: ${hexCode}`);
		return null;
	}
}

function calculateHue(chroma: number, value: number, red: number, green: number, blue: number) {
	console.log({ chroma, value, red, green, blue });
	let hue = 0;
	if (chroma === 0) {
		hue = 0;
	} else if (value === red) {
		hue = ((green - blue) / chroma) % 6;
	} else if (value === green) {
		hue = (blue - red) / chroma + 2;
	} else if (value === blue) {
		hue = (red - green) / chroma + 4;
	}
	return Math.round(hue * 60);
}

type HsvColor = { hue: number; saturation: number; value: number };
export function RgbToHsv(rgbColor: number[]): HsvColor {
	let [red, green, blue] = rgbColor;
	red = Math.round((red / 255) * 100);
	green = Math.round((green / 255) * 100);
	blue = Math.round((blue / 255) * 100);

	const xMax = Math.max(red, green, blue);
	const xMin = Math.min(red, green, blue);

	const value = xMax;
	const chroma = xMax - xMin;
	// const lightness = (xMax + xMin) / 2;
	const hue = calculateHue(chroma, value, red, green, blue);

	let saturation = 0;
	if (value > 0) {
		saturation = chroma / value;
	}
	saturation = Math.round(saturation * 100);

	return { hue, saturation, value };
}

export function RgbToHsl(rgbColor: number[]) {
	let [red, green, blue] = rgbColor;
	red = Math.round((red / 255) * 100);
	green = Math.round((green / 255) * 100);
	blue = Math.round((blue / 255) * 100);

	const xMax = Math.max(red, green, blue);
	const xMin = Math.min(red, green, blue);

	const value = xMax;
	const chroma = xMax - xMin;
	// const lightness = (xMax + xMin) / 2;
	const lightness = value - chroma / 2;
	const hue = calculateHue(chroma, value, red, green, blue);

	// console.log({ lightness, value });
	let saturation = 0;
	if (lightness != 0 && lightness != 100) {
		saturation = (2 * (value - lightness)) / (100 - Math.abs(2 * lightness - 100));
	}
	saturation = Math.round(saturation * 100);

	return { hue, saturation, lightness };
}

export function HsvToHwb(hsvColor: HsvColor) {
	const { hue, saturation, value } = hsvColor;
	const white = Math.round((1 - saturation / 100) * (value / 100) * 100);
	const black = Math.round((1 - value / 100) * 100);
	return { hue, white, black };
}