color.js

//#region Color
/**
 * Converts a rgb(a) color to hex.
 * @memberOf color
 * @function
 * @example
 * console.log(_$.rgbToHex("rgb(255,255,255)")); // "#ffffff"
 * @param {String} rgb The string of RGB colors.
 * @returns {String} The hex color.
 */
export let rgbToHex = (rgb = req("string", "RGB color")) => {
	let sep = rgb.indexOf(",") > -1 ? "," : " ";
	rgb = rgb.substr(4).split(")")[0].split(sep);

	let r = (+rgb[0]).toString(16),
		g = (+rgb[1]).toString(16),
		b = (+rgb[2]).toString(16);

	if (r.length === 1) r = "0" + r;
	if (g.length === 1) g = "0" + g;
	if (b.length === 1) b = "0" + b;

	return "#" + r + g + b;
};
/**
 * Converts a hex code to a RGB color.
 * @function
 * @memberOf color
 * @param {String} hex The hex code to convert.
 * @example
 * console.log(_$.rgbToHex("#ffffff")); // "rgb(255,255,255)"
 * @returns {String} The RGB color converted from the hex code.
 */
export let hexToRGB = (hex = req("string", "hex color")) => {
	if (
		((hex.length - 1 === 6 ||
			hex.length - 1 === 8 ||
			hex.length - 1 === 4 ||
			hex.length - 1 === 3) &&
			hex.startsWith("#")) ||
		((hex.length === 6 ||
			hex.length === 8 ||
			hex.length === 4 ||
			hex.length === 3) &&
			!hex.startsWith("#"))
	) {
	} else {
		throw new Error("Invalid hex");
	}
	let alpha = false,
		h = hex.slice(hex.startsWith("#") ? 1 : 0);
	if (h.length === 3) h = [...h].map((x) => x + x).join("");
	else if (h.length === 8) alpha = true;
	h = parseInt(h, 16);
	return (
		"rgb" +
		(alpha ? "a" : "") +
		"(" +
		(h >>> (alpha ? 24 : 16)) +
		", " +
		((h & (alpha ? 0x00ff0000 : 0x00ff00)) >>> (alpha ? 16 : 8)) +
		", " +
		((h & (alpha ? 0x0000ff00 : 0x0000ff)) >>> (alpha ? 8 : 0)) +
		(alpha ? `, ${h & 0x000000ff}` : "") +
		")"
	);
};
/**
 * Blends two colors through additive blending by a percentage.
 * @function
 * @memberOf color
 * @param {String} color1 The hex code of the first color to be blended
 * @param {String} color2 The hex code of the second color to be blended.
 * @param {Number} [percent=50] A number between 0 and 100 of the percentage to blend the two colors, 0 being completely the first color and 100 being completely the second color.
 * @example
 * console.log(_$.blendColors("#ffffff", "#000000", 80)); // #333333
 * @returns {String} The blended color (A hex code).
 */
export let blendColors = (
	color1 = req("string", "color 1"),
	color2 = req("string", "color 2"),
	percent = 50,
) => {
	const generateHex = (r, g, b) => {
		let R = r.toString(16);
		let G = g.toString(16);
		let B = b.toString(16);

		while (R.length < 2) {
			R = `0${R}`;
		}
		while (G.length < 2) {
			G = `0${G}`;
		}
		while (B.length < 2) {
			B = `0${B}`;
		}

		return `#${R}${G}${B}`;
	};

	const mix = (start, end, percent) =>
		start + (percent / 100) * (end - start);

	const red1 = parseInt(`${color1[1]}${color1[2]}`, 16);
	const green1 = parseInt(`${color1[3]}${color1[4]}`, 16);
	const blue1 = parseInt(`${color1[5]}${color1[6]}`, 16);

	const red2 = parseInt(`${color2[1]}${color2[2]}`, 16);
	const green2 = parseInt(`${color2[3]}${color2[4]}`, 16);
	const blue2 = parseInt(`${color2[5]}${color2[6]}`, 16);

	const red = Math.round(mix(red1, red2, percent));
	const green = Math.round(mix(green1, green2, percent));
	const blue = Math.round(mix(blue1, blue2, percent));

	return generateHex(red, green, blue);
};
/**
 * Generates a random hex color.
 * @function
 * @memberOf color
 * @example
 * console.log(_$.randomColor()); // e.g. #5bf462
 * @returns {String} A random Hex color
 */
export let randomColor = () =>
	`#${Math.floor(Math.random() * 16777215).toString(16)}`;
/**
 * Lighten or darken a color by a certain amount
 * @function
 * @memberOf color
 * @param {String} col The color to lighten/darken
 * @param {Number} amt The amount to lighten the color (out of 255).
 * @example
 * _$.lightenColor("#000000", 50); // #323232
 * @returns {String} The color lightened.
 */
export let lightenColor = (
	col = req("string", "hex color"),
	amt = req("number", "amount"),
) => {
	var usePound = false;

	if (col[0] == "#") {
		col = col.slice(1);
		usePound = true;
	}

	var num = parseInt(col, 16);

	var r = (num >> 16) + amt;

	if (r > 255) r = 255;
	else if (r < 0) r = 0;

	var b = ((num >> 8) & 0x00ff) + amt;

	if (b > 255) b = 255;
	else if (b < 0) b = 0;

	var g = (num & 0x0000ff) + amt;

	if (g > 255) g = 255;
	else if (g < 0) g = 0;

	return (
		(usePound ? "#" : "") + (g | (b << 8) | (r << 16)).toString(16)
	);
};
/**
  * Tests if a color is light or dark and returns an object representation.
  * @function
  * @memberOf color
  * @param {string} color The hex color to test.
  * @example
  * if (_$.lightOrDark("#333333").lightOrDark === 'dark'){
    document.querySelector("DIV").style.color = "white";
  } else {
      document.querySelector("DIV").style.color = "black";
  }
  * @returns {Object} An object that represents if the color is light or dark and how much. The object key "hsp" represents a value out of 255 of how light the color is and the object's key "lightOrDark" is a string (Either "light" or "dark") of whether the color is light or dark.
  */
export let lightOrDark = (
	color = req("string", "hex or RGB color"),
) => {
	var r, g, b, hsp;
	if (color.match(/^rgb/)) {
		color = color.match(
			/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)$/,
		);

		r = color[1];
		g = color[2];
		b = color[3];
	} else {
		color = +(
			"0x" + color.slice(1).replace(color.length < 5 && /./g, "$&$&")
		);

		r = color >> 16;
		g = (color >> 8) & 255;
		b = color & 255;
	}

	hsp = Math.sqrt(
		0.299 * (r * r) + 0.587 * (g * g) + 0.114 * (b * b),
	);
	if (hsp > 127.5) {
		return { lightOrDark: "light", hsp: hsp };
	} else {
		return { lightOrDark: "dark", hsp: hsp };
	}
};
//#endregion Color