From f996ba1905bbc80190d8aa6c26b48319451f89b8 Mon Sep 17 00:00:00 2001
From: Ahmed Moussa <moussa.ahmed95@gmail.com>
Date: Fri, 2 Jul 2021 15:36:48 +0200
Subject: [PATCH] Fixed naming convention

---
 Colour.js  | 329 ++++++++++++++++++++++++++---------------------------
 README.md  |  36 +++---
 index.html |  14 +--
 3 files changed, 187 insertions(+), 192 deletions(-)

diff --git a/Colour.js b/Colour.js
index e7fa2a7..42a5406 100644
--- a/Colour.js
+++ b/Colour.js
@@ -7,102 +7,99 @@
  * 3. Convert XYZ to LAB
  * 4. Calculate Delta E00 between two LAB colour (Main purpose)
  * @author Ahmed Moussa <moussa.ahmed95@gmail.com>
- * @version 1.7
+ * @version 2.0
  */
  class Colour {
 	/**
 	 * Convert HEX to LAB
 	 * @param {[string]} hex hex colour value desired to be converted to LAB
 	 */
-	static HEX2LAB(hex) {
-		const [R, G, b, a] = Colour.HEX2RGBA(hex);
-		const [X, Y, Z] = Colour.RGB2XYZ(R, G, b, a);
-		const [L, A, B] = Colour.XYZ2LAB(X, Y, Z);
-		return [L, A, B];
+	static hex2lab(hex) {
+		const [r, g, b, a] = Colour.hex2rgba(hex);
+		const [x, y, z] = Colour.rgb2xyz(r, g, b, a);
+		return Colour.xyz2lab(x, y, z); // [l, a, b]
 	}
 	/**
 	 * Convert RGBA to LAB
-	 * @param {[Number]} R     Red value from 0 to 255
-	 * @param {[Number]} G     Green value from 0 to 255
-	 * @param {[Number]} B     Blue value from 0 to 255
+	 * @param {[Number]} r     Red value from 0 to 255
+	 * @param {[Number]} g     Green value from 0 to 255
+	 * @param {[Number]} b     Blue value from 0 to 255
 	 */
-	static RGBA2LAB(R, G, b, a = 1) {
-		const [X, Y, Z] = Colour.RGB2XYZ(R, G, b, a);
-		const [L, A, B] = Colour.XYZ2LAB(X, Y, Z);
-		return [L, A, B];
+	static rgba2lab(r, g, b, a = 1) {
+		const [x, y, z] = Colour.rgb2xyz(r, g, b, a);
+		return Colour.xyz2lab(x, y, z); // [l, a, b]
 	}
 	/**
 	 * Convert LAB to RGBA
-	 * @param {[Number]} L
-	 * @param {[Number]} A
-	 * @param {[Number]} B 
+	 * @param {[Number]} l
+	 * @param {[Number]} a
+	 * @param {[Number]} b 
 	 */
-	static LAB2RGBA(L, A, B) {
-		const [X, Y, Z] = Colour.LAB2XYZ(L, A, B);
-		const [R, G, b, a] = Colour.XYZ2RGBA(X, Y, Z);
-		return [R, G, b, a];
+	static lab2rgba(l, a, b) {
+		const [x, y, z] = Colour.lab2xyz(l, a, b);
+		return Colour.xyz2rgba(x, y, z); // [r, g, b, a]
 	}
 	/**
 	 * Convert HEX to RGBA
 	 * @param {[string]} hex hex colour value desired to be converted to RGBA
 	 */
-	static HEX2RGBA(hex) {
+	static hex2rgba(hex) {
 		let c;
-		if (hex.charAt(0) == "#") {
+		if (hex.charAt(0) === "#") {
 			c = hex.substring(1).split('');
 		}
 		if (c.length > 6 || c.length < 3) {
 			throw new Error(`HEX colour must be 3 or 6 values. You provided it ${c.length}`);
 		}
-		if (c.length == 3) {
+		if (c.length === 3) {
 			c = [c[0], c[0], c[1], c[1], c[2], c[2]];
 		}
-		c = '0x' + c.join('');
-		let R = (c >> 16) & 255;
-		let G = (c >> 8) & 255;
-		let B = c & 255;
-		let A = 1;
-		return [R, G, B, A];
+		c = "0x" + c.join('');
+		let r = (c >> 16) & 255;
+		let g = (c >> 8) & 255;
+		let b = c & 255;
+		let a = 1;
+		return [r, g, b, a];
 	}
 	/**
 	 * Convert RGB to XYZ
-	 * @param {[Number]} R     Red value from 0 to 255
-	 * @param {[Number]} G     Green value from 0 to 255
-	 * @param {[Number]} B     Blue value from 0 to 255
-	 * @param {Number} [A=1] Obacity value from 0 to 1 with a default value of 1 if not sent
+	 * @param {[Number]} r     Red value from 0 to 255
+	 * @param {[Number]} g     Green value from 0 to 255
+	 * @param {[Number]} b     Blue value from 0 to 255
+	 * @param {Number} [a=1]   Obacity value from 0 to 1 with a default value of 1 if not sent
 	 */
-	static RGB2XYZ(R, G, B, A = 1) {
-		if (R > 255) {
-			console.warn('Red value was higher than 255. It has been set to 255.');
-			R = 255;
-		} else if (R < 0) {
-			console.warn('Red value was smaller than 0. It has been set to 0.');
-			R = 0;
+	static rgb2xyz(r, g, b, a = 1) {
+		if (r > 255) {
+			console.warn("Red value was higher than 255. It has been set to 255.");
+			r = 255;
+		} else if (r < 0) {
+			console.warn("Red value was smaller than 0. It has been set to 0.");
+			r = 0;
 		}
-		if (G > 255) {
-			console.warn('Green value was higher than 255. It has been set to 255.');
-			G = 255;
-		} else if (G < 0) {
-			console.warn('Green value was smaller than 0. It has been set to 0.');
-			G = 0;
+		if (g > 255) {
+			console.warn("Green value was higher than 255. It has been set to 255.");
+			g = 255;
+		} else if (g < 0) {
+			console.warn("Green value was smaller than 0. It has been set to 0.");
+			g = 0;
 		}
-		if (B > 255) {
-			console.warn('Blue value was higher than 255. It has been set to 255.');
-			B = 255;
-		} else if (B < 0) {
-			console.warn('Blue value was smaller than 0. It has been set to 0.');
-			B = 0;
+		if (b > 255) {
+			console.warn("Blue value was higher than 255. It has been set to 255.");
+			b = 255;
+		} else if (b < 0) {
+			console.warn("Blue value was smaller than 0. It has been set to 0.");
+			b = 0;
 		}
-		if (A > 1) {
-			console.warn('Obacity value was higher than 1. It has been set to 1.');
-			A = 1;
-		} else if (A < 0) {
-			console.warn('Obacity value was smaller than 0. It has been set to 0.');
-			A = 0;
+		if (a > 1) {
+			console.warn("Obacity value was higher than 1. It has been set to 1.");
+			a = 1;
+		} else if (a < 0) {
+			console.warn("Obacity value was smaller than 0. It has been set to 0.");
+			a = 0;
 		}
-		let r = R / 255;
-		let g = G / 255;
-		let b = B / 255;
+		r = r / 255;
+		g = g / 255;
+		b = b / 255;
 		// step 1
 		if (r > 0.04045) {
 			r = Math.pow(((r + 0.055) / 1.055), 2.4);
@@ -124,64 +121,64 @@
 		g = g * 100;
 		b = b * 100;
 		// step 3
-		const X = (r * 0.4124564) + (g * 0.3575761) + (b * 0.1804375);
-		const Y = (r * 0.2126729) + (g * 0.7151522) + (b * 0.0721750);
-		const Z = (r * 0.0193339) + (g * 0.1191920) + (b * 0.9503041);
-		return [X, Y, Z];
+		const x = (r * 0.4124564) + (g * 0.3575761) + (b * 0.1804375);
+		const y = (r * 0.2126729) + (g * 0.7151522) + (b * 0.0721750);
+		const z = (r * 0.0193339) + (g * 0.1191920) + (b * 0.9503041);
+		return [x, y, z];
 	}
 	/**
 	 * Convert XYZ to RGBA
-	 * @param {[Number]} X
-	 * @param {[Number]} Y
-	 * @param {[Number]} Z
+	 * @param {[Number]} x
+	 * @param {[Number]} y
+	 * @param {[Number]} z
 	 */
-	static XYZ2RGBA(X, Y, Z) {
-		let var_X = X / 100;
-		let var_Y = Y / 100;
-		let var_Z = Z / 100;
+	static xyz2rgba(x, y, z) {
+		let varX = x / 100;
+		let varY = y / 100;
+		let varZ = z / 100;
 
-		let var_R = (var_X *  3.2404542) + (var_Y * -1.5371385) + (var_Z * -0.4985314);
-		let var_G = (var_X * -0.9692660) + (var_Y *  1.8760108) + (var_Z * 0.0415560);
-		let var_B = (var_X *  0.0556434) + (var_Y * -0.2040259) + (var_Z * 1.0572252);
+		let varR = (varX *  3.2404542) + (varY * -1.5371385) + (varZ * -0.4985314);
+		let varG = (varX * -0.9692660) + (varY *  1.8760108) + (varZ * 0.0415560);
+		let varB = (varX *  0.0556434) + (varY * -0.2040259) + (varZ * 1.0572252);
 
-		if ( var_R > 0.0031308 ) {
-			var_R = 1.055 * Math.pow(var_R, (1 / 2.4) ) - 0.055;
+		if ( varR > 0.0031308 ) {
+			varR = 1.055 * Math.pow(varR, (1 / 2.4) ) - 0.055;
 		} else {
-			var_R = 12.92 * var_R;
+			varR = 12.92 * varR;
 		}
-		if ( var_G > 0.0031308 ) {
-			var_G = 1.055 * Math.pow(var_G, (1 / 2.4) ) - 0.055;
+		if ( varG > 0.0031308 ) {
+			varG = 1.055 * Math.pow(varG, (1 / 2.4) ) - 0.055;
 		} else {
-			var_G = 12.92 * var_G;
+			varG = 12.92 * varG;
 		}
-		if ( var_B > 0.0031308 ) {
-			var_B = 1.055 * Math.pow(var_B, (1 / 2.4) ) - 0.055;
+		if ( varB > 0.0031308 ) {
+			varB = 1.055 * Math.pow(varB, (1 / 2.4) ) - 0.055;
 		} else {
-			var_B = 12.92 * var_B;
+			varB = 12.92 * varB;
 		}
 
-		let R = Math.round(var_R * 255);
-		let G = Math.round(var_G * 255);
-		let B = Math.round(var_B * 255);
+		let r = Math.round(varR * 255);
+		let g = Math.round(varG * 255);
+		let b = Math.round(varB * 255);
 
-		return [R, G, B, 1];
+		return [r, g, b, 1];
 	}
 	/**
 	 * Convert XYZ to LAB
-	 * @param {[Number]} X Value
-	 * @param {[Number]} Y Value
-	 * @param {[Number]} Z Value
+	 * @param {[Number]} x Value
+	 * @param {[Number]} y Value
+	 * @param {[Number]} z Value
 	 */
-	static XYZ2LAB(X, Y, Z) {
+	static xyz2lab(x, y, z) {
 		// using 10o Observer (CIE 1964)
 		// CIE10_D65 = {94.811f, 100f, 107.304f} => Daylight
-		const ReferenceX = 94.811;
-		const ReferenceY = 100;
-		const ReferenceZ = 107.304;
+		const referenceX = 94.811;
+		const referenceY = 100;
+		const referenceZ = 107.304;
 		// step 1
-		let x = X / ReferenceX;
-		let y = Y / ReferenceY;
-		let z = Z / ReferenceZ;
+		x = x / referenceX;
+		y = y / referenceY;
+		z = z / referenceZ;
 		// step 2
 		if (x > 0.008856) {
 			x = Math.pow(x, (1 / 3));
@@ -199,49 +196,49 @@
 			z = (7.787 * z) + (16 / 116);
 		}
 		// step 3
-		const L = (116 * y) - 16;
-		const A = 500 * (x - y);
-		const B = 200 * (y - z);
-		return [L, A, B];
+		const l = (116 * y) - 16;
+		const a = 500 * (x - y);
+		const b = 200 * (y - z);
+		return [l, a, b];
 	}
 	/**
 	 * Convert LAB to XYZ
-	 * @param {[Number]} L
-	 * @param {[Number]} A
-	 * @param {[Number]} B
+	 * @param {[Number]} l
+	 * @param {[Number]} a
+	 * @param {[Number]} b
 	 */
-	static LAB2XYZ(L, A, B) {
+	static lab2xyz(l, a, b) {
 		// using 10o Observer (CIE 1964)
 		// CIE10_D65 = {94.811f, 100f, 107.304f} => Daylight
-		const ReferenceX = 94.811;
-		const ReferenceY = 100;
-		const ReferenceZ = 107.304;
+		const referenceX = 94.811;
+		const referenceY = 100;
+		const referenceZ = 107.304;
 
-		let var_Y = ( L + 16 ) / 116;
-		let var_X = A / 500 + var_Y;
-		let var_Z = var_Y - B / 200;
+		let varY = ( l + 16 ) / 116;
+		let varX = a / 500 + varY;
+		let varZ = varY - b / 200;
 
-		if ( Math.pow(var_Y, 3)  > 0.008856 ) {
-			var_Y = Math.pow(var_Y, 3);
+		if ( Math.pow(varY, 3)  > 0.008856 ) {
+			varY = Math.pow(varY, 3);
 		} else {
-			var_Y = ( var_Y - 16 / 116 ) / 7.787;
+			varY = ( varY - 16 / 116 ) / 7.787;
 		}
-		if ( Math.pow(var_X, 3)  > 0.008856 ) {
-			var_X = Math.pow(var_X, 3);
+		if ( Math.pow(varX, 3)  > 0.008856 ) {
+			varX = Math.pow(varX, 3);
 		} else {
-			var_X = ( var_X - 16 / 116 ) / 7.787;
+			varX = ( varX - 16 / 116 ) / 7.787;
 		}
-		if ( Math.pow(var_Z, 3)  > 0.008856 ) {
-			var_Z = Math.pow(var_Z, 3);
+		if ( Math.pow(varZ, 3)  > 0.008856 ) {
+			varZ = Math.pow(varZ, 3);
 		} else {
-			var_Z = ( var_Z - 16 / 116 ) / 7.787;
+			varZ = ( varZ - 16 / 116 ) / 7.787;
 		}
 
-		let X = var_X * ReferenceX;
-		let Y = var_Y * ReferenceY;
-		let Z = var_Z * ReferenceZ;
+		let x = varX * referenceX;
+		let y = varY * referenceY;
+		let z = varZ * referenceZ;
 
-		return [X, Y, Z];
+		return [x, y, z];
 	}
 	/**
 	 * The difference between two given colours with respect to the human eye
@@ -252,7 +249,7 @@
 	 * @param {[type]} a2 Colour 2
 	 * @param {[type]} b2 Colour 2
 	 */
-	static DeltaE00(l1, a1, b1, l2, a2, b2) {
+	static deltaE00(l1, a1, b1, l2, a2, b2) {
 		// Utility functions added to Math Object
 		Math.rad2deg = function(rad) {
 			return 360 * rad / (2 * Math.PI);
@@ -263,32 +260,32 @@
 		// Start Equation
 		// Equation exist on the following URL http://www.brucelindbloom.com/index.html?Eqn_DeltaE_CIE2000.html
 		const avgL = (l1 + l2) / 2;
-		const C1 = Math.sqrt(Math.pow(a1, 2) + Math.pow(b1, 2));
-		const C2 = Math.sqrt(Math.pow(a2, 2) + Math.pow(b2, 2));
-		const avgC = (C1 + C2) / 2;
-		const G = (1 - Math.sqrt(Math.pow(avgC, 7) / (Math.pow(avgC, 7) + Math.pow(25, 7)))) / 2;
+		const c1 = Math.sqrt(Math.pow(a1, 2) + Math.pow(b1, 2));
+		const c2 = Math.sqrt(Math.pow(a2, 2) + Math.pow(b2, 2));
+		const avgC = (c1 + c2) / 2;
+		const g = (1 - Math.sqrt(Math.pow(avgC, 7) / (Math.pow(avgC, 7) + Math.pow(25, 7)))) / 2;
 
-		const A1p = a1 * (1 + G);
-		const A2p = a2 * (1 + G);
+		const a1p = a1 * (1 + g);
+		const a2p = a2 * (1 + g);
 
-		const C1p = Math.sqrt(Math.pow(A1p, 2) + Math.pow(b1, 2));
-		const C2p = Math.sqrt(Math.pow(A2p, 2) + Math.pow(b2, 2));
+		const c1p = Math.sqrt(Math.pow(a1p, 2) + Math.pow(b1, 2));
+		const c2p = Math.sqrt(Math.pow(a2p, 2) + Math.pow(b2, 2));
 
-		const avgCp = (C1p + C2p) / 2;
+		const avgCp = (c1p + c2p) / 2;
 
-		let h1p = Math.rad2deg(Math.atan2(b1, A1p));
+		let h1p = Math.rad2deg(Math.atan2(b1, a1p));
 		if (h1p < 0) {
 			h1p = h1p + 360;
 		}
 
-		let h2p = Math.rad2deg(Math.atan2(b2, A2p));
+		let h2p = Math.rad2deg(Math.atan2(b2, a2p));
 		if (h2p < 0) {
 			h2p = h2p + 360;
 		}
 
 		const avghp = Math.abs(h1p - h2p) > 180 ? (h1p + h2p + 360) / 2 : (h1p + h2p) / 2;
 
-		const T = 1 - 0.17 * Math.cos(Math.deg2rad(avghp - 30)) + 0.24 * Math.cos(Math.deg2rad(2 * avghp)) + 0.32 * Math.cos(Math.deg2rad(3 * avghp + 6)) - 0.2 * Math.cos(Math.deg2rad(4 * avghp - 63));
+		const t = 1 - 0.17 * Math.cos(Math.deg2rad(avghp - 30)) + 0.24 * Math.cos(Math.deg2rad(2 * avghp)) + 0.32 * Math.cos(Math.deg2rad(3 * avghp + 6)) - 0.2 * Math.cos(Math.deg2rad(4 * avghp - 63));
 
 		let deltahp = h2p - h1p;
 		if (Math.abs(deltahp) > 180) {
@@ -299,55 +296,53 @@
 			}
 		}
 
-		const delta_lp = l2 - l1;
-		const delta_cp = C2p - C1p;
+		const deltalp = l2 - l1;
+		const deltacp = c2p - c1p;
 
-		deltahp = 2 * Math.sqrt(C1p * C2p) * Math.sin(Math.deg2rad(deltahp) / 2);
+		deltahp = 2 * Math.sqrt(c1p * c2p) * Math.sin(Math.deg2rad(deltahp) / 2);
 
-		const Sl = 1 + ((0.015 * Math.pow(avgL - 50, 2)) / Math.sqrt(20 + Math.pow(avgL - 50, 2)));
-		const Sc = 1 + 0.045 * avgCp;
-		const Sh = 1 + 0.015 * avgCp * T;
+		const sl = 1 + ((0.015 * Math.pow(avgL - 50, 2)) / Math.sqrt(20 + Math.pow(avgL - 50, 2)));
+		const sc = 1 + 0.045 * avgCp;
+		const sh = 1 + 0.015 * avgCp * t;
 
 		const deltaro = 30 * Math.exp(-(Math.pow((avghp - 275) / 25, 2)));
-		const Rc = 2 * Math.sqrt(Math.pow(avgCp, 7) / (Math.pow(avgCp, 7) + Math.pow(25, 7)));
-		const Rt = -Rc * Math.sin(2 * Math.deg2rad(deltaro));
+		const rc = 2 * Math.sqrt(Math.pow(avgCp, 7) / (Math.pow(avgCp, 7) + Math.pow(25, 7)));
+		const rt = -rc * Math.sin(2 * Math.deg2rad(deltaro));
 
 		const kl = 1;
 		const kc = 1;
 		const kh = 1;
 
-		const deltaE = Math.sqrt(Math.pow(delta_lp / (kl * Sl), 2) + Math.pow(delta_cp / (kc * Sc), 2) + Math.pow(deltahp / (kh * Sh), 2) + Rt * (delta_cp / (kc * Sc)) * (deltahp / (kh * Sh)));
+		const deltaE = Math.sqrt(Math.pow(deltalp / (kl * sl), 2) + Math.pow(deltacp / (kc * sc), 2) + Math.pow(deltahp / (kh * sh), 2) + rt * (deltacp / (kc * sc)) * (deltahp / (kh * sh)));
 
 		return deltaE;
 	}
 	/**
 	 * Get darker colour of the given colour
-	 * @param {[Number]} R     Red value from 0 to 255
-	 * @param {[Number]} G     Green value from 0 to 255
-	 * @param {[Number]} B     Blue value from 0 to 255
+	 * @param {[Number]} r     Red value from 0 to 255
+	 * @param {[Number]} g     Green value from 0 to 255
+	 * @param {[Number]} b     Blue value from 0 to 255
 	 */
-	static GetDarkerColour(r, g, b, a = 1, darkenPercentage = 0.05) {
-		let [L1, A1, B1] = Colour.RGBA2LAB(r, g, b, a);
-		L1 -= L1 * darkenPercentage;
-		if (L1 < 0) {
-			L1 = 0;
+	static getDarkerColour(r, g, b, a = 1, darkenPercentage = 0.05) {
+		let [l1, a1, b1] = Colour.rgba2lab(r, g, b, a);
+		l1 -= l1 * darkenPercentage;
+		if (l1 < 0) {
+			l1 = 0;
 		}
-		let [R, G, B, A] = Colour.LAB2RGBA(L1, A1, B1);
-		return [R, G, B, A];
+		return Colour.lab2rgba(l1, a1, b1); // [R, G, B, A]
 	}
 	/**
 	 * Get brighter colour of the given colour
-	 * @param {[Number]} R     Red value from 0 to 255
-	 * @param {[Number]} G     Green value from 0 to 255
-	 * @param {[Number]} B     Blue value from 0 to 255
+	 * @param {[Number]} r     Red value from 0 to 255
+	 * @param {[Number]} g     Green value from 0 to 255
+	 * @param {[Number]} b     Blue value from 0 to 255
 	 */
-	static GetBrighterColour(r, g, b, a = 1, brighterPercentage = 0.05) {
-		let [L1, A1, B1] = Colour.RGBA2LAB(r, g, b, a);
-		L1 += L1 * brighterPercentage;
-		if (L1 > 100) {
-			L1 = 100;
+	static getBrighterColour(r, g, b, a = 1, brighterPercentage = 0.05) {
+		let [l1, a1, b1] = Colour.rgba2lab(r, g, b, a);
+		l1 += l1 * brighterPercentage;
+		if (l1 > 100) {
+			l1 = 100;
 		}
-		let [R, G, B, A] = Colour.LAB2RGBA(L1, A1, B1);
-		return [R, G, B, A];
+		return Colour.lab2rgba(l1, a1, b1); // [R, G, B, A]
 	}
 }
diff --git a/README.md b/README.md
index d145f38..dc02501 100644
--- a/README.md
+++ b/README.md
@@ -3,13 +3,13 @@ Javascript implementation of CIE Delta E 2000 Color-Difference algorithm (CIEDE2
 
 Live Demo https://hamada147.github.io/IsThisColourSimilar/
 
-# What is that?
+## What is that?
 Let me just say that there are two version of the story behing the creation of this library. Short and Long.
 
-# Short
+### Short
 I just wanted to have different background color other than the font color so they are both distinguishable by the user and the text is readable.
 
-# Long
+### Long
 I just wanted to have different background color other than the font color so they are both distinguishable by the user and the text is readable. And so my jouney begain. I stumbled upon this question which encourged me to procreed with my research on the subject.
 https://stackoverflow.com/questions/15049753/an-algorithm-for-selecting-a-dark-color-similar-to-a-light-color/49170325#49170325
 
@@ -17,7 +17,7 @@ I started reasearching with just random words regarding the colour then I stumbl
 
 First of all I would like to highlight a few points and make sure that anyone that is reading this is able to understand what I'm talking about here.
 
-# What is a Color Space?
+## What is a Color Space?
 
 A range of colors can be created by the primary colors of pigment and these colors then define a specific color space. Color space, also known as the color model (or color system), is an abstract mathematical model which simply describes the range of colors as tuples of numbers, typically as 3 or 4 values or color components (ex: RGB). Basically speaking, color space is an elaboration of the coordinate system and sub-space. Each color in the system is represented by a single dot.
 
@@ -40,11 +40,11 @@ Wither we used HEX, RGBA, CMYK or any other color space we won't be able to know
 
 But there exist other color spaces (scientific ones) that take in consideration the way our eyes see colors and how our mind interpret them. One of these are LAB.
 
-# Color Transformation
+## Color Transformation
 
 A color in one absolute color space can be converted into another absolute color space, and back again, in general; however, some color spaces may have gamut limitations, and converting colors that lie outside that gamut will not produce correct results. There are also likely to be rounding errors, especially if the popular range of only 256 distinct values per component (8-bit color) is used.
 
-# What is gamut?
+## What is gamut?
 
 In color reproduction, including computer graphics and photography, the gamut, or color gamut, is a certain complete subset of colors. The most common usage refers to the subset of colors which can be accurately represented in a given circumstance, such as within a given color space or by a certain output device.
 
@@ -53,13 +53,13 @@ Nope
 
 Let's continue on with a little bit more about the converstion between different colour spaces
 
-# HEX To RGB
+## HEX To RGB
 
 We have HEX as the color representation in hexadecimal value we just have to get their decimal values and that it, now we have our color in RGB color space.
 A = RGB(255, 0, 0) Red
 B = RGB(0, 255, 0) Green
 
-# RGB To XYZ
+## RGB To XYZ
 
 We have to follow the following mathematical law
 color = current color / 255
@@ -107,7 +107,7 @@ Z = (colorRed * 0.0193) + (colorGreen * 0.1192) + (colorBlue * 0.9505)
 A XYZ(X, Y, Z)
 ```
 
-# XYZ To LAB
+## XYZ To LAB
 
 // Reference-X, Reference-Y and Reference-Z refer to specific illuminants and observers. Check Reference Section
 ```
@@ -135,7 +135,7 @@ CIE-a* = 500 * ( X - Y )
 CIE-b* = 200 * ( Y - Z )
 ```
 
-# Reference
+## Reference
 
 Here is some list of them that I was able to find.
 //2o Observer (CIE 1931) 
@@ -180,14 +180,14 @@ CIE10_F7 = {95.792f, 100f, 107.687f}
 
 CIE10_F11 = {103.866f, 100f, 65.627f}
 
-# Distance between two colors in LAP colour Space
+## Distance between two colors in LAP colour Space
 
 Treat the color as 3d dimension like we did earlier and now we have the exact distance between the two colors with respect to the human eye.
 
 Now what do you think? Am I right?
 Correct if we are going to check the distance between two colour in the LAP colour space (48% - 50%) accurecy => I don't remember where I got this number from but it was in my notes. So, I just past it here :)
 
-# Let the Real Thing Begins
+## Let the Real Thing Begins
 
 As per more of my research on LAB Colour Space I found some intersting things.
 For short LAB is really cool
@@ -209,7 +209,7 @@ Until I finally found this article https://sensing.konicaminolta.us/blog/identif
 
 Now this, was a life changing for me. I was not really able to differeintiate between the two apples until sometime. But once I did, it's like I got hit with a bus and the I know what I'm suppose to search for. Delta E (ΔE).
 
-# ΔE - Delta E
+## ΔE - Delta E
 
 ΔE - (Delta E, dE) The measure of change in visual perception of two given colors.
 Delta E is a metric for understanding how the human eye perceives color difference. The term delta comes from mathematics, meaning change in a variable or function. The suffix E references the German word Empfindung, which broadly means sensation.
@@ -230,11 +230,11 @@ Take the table as a general guide; it’s possible to get a Delta E value below
 
 Because of inconsistencies between the three algorithms, the exact meaning of Delta E changes slightly depending on which formula is used. Think of Delta E less as a definitive answer, and instead a helpful metric to apply to a specific use case.
 
-# Delta E 76
+## Delta E 76
 
 Is pretty much what I was trying to implement on my own so we will pass thins one. But for those who want to know it. It is the distance betweent he two colours in 3D space and it is pretty much the Euclidean Distance formula.
 
-# Delta E 94
+## Delta E 94
 
 In 1994, the original Delta E formula was improved. The new formula would take into account certain weighting factors for each lightness, chroma, and hue value.
 
@@ -242,17 +242,17 @@ In 1994, the original Delta E formula was improved. The new formula would take i
 
 Days of normal mathmatical equation has long passed.
 
-# Delta E 2000 (One used in this library)
+## Delta E 2000 (One used in this library)
 
 The CIE organization decided to fix the lightness inaccuracies by introducing dE00. It’s currently the most complicated, yet most accurate, CIE color difference algorithm available. And let me tell you. It was a pain to implement. Not because it is heard but because it had too many variables and I got lost many times trying to implemen it
 
 ![alt formula-cie2000](https://raw.githubusercontent.com/hamada147/IsThisColourSimilar/master/formula-cie00.png)
 
-# How to use
+## How to use
 
 Simple include the Colour.js file into your web page in head tag. Take two colour from the manully or auto generated. Convert them to LAB then run the deltaE00 function and see the result then check the table for understanding the meaning behind the given value.
 
-# TODO
+## TODO
 
 Create and usage example DONE
 
diff --git a/index.html b/index.html
index 9fe9970..c1db4a8 100644
--- a/index.html
+++ b/index.html
@@ -178,8 +178,8 @@ <h1>Colour Difference</h1>
             function getDarkerColourFeature() {
                 getDarkerColourButton.addEventListener("click", function() {
                     FirstColourShowElement.style.backgroundColor = getDarkerColourColor.value;
-                    let [R1, G1, B1, A1] = Colour.HEX2RGBA(getDarkerColourColor.value);
-                    let [R2, G2, B2, A2] = Colour.GetDarkerColour(R1, G1, B1, A1);
+                    let [R1, G1, B1, A1] = Colour.hex2rgba(getDarkerColourColor.value);
+                    let [R2, G2, B2, A2] = Colour.getDarkerColour(R1, G1, B1, A1);
                     SecondColourShowElement.style.backgroundColor = `rgba(${R2}, ${G2}, ${B2}, ${A2})`;
                 });
             }
@@ -187,8 +187,8 @@ <h1>Colour Difference</h1>
             function getBrighterColourFeature() {
                 getBrighterColourButton.addEventListener("click", function(){
                     FirstColourShowElement.style.backgroundColor = getDarkerColourColor.value;
-                    let [R1, G1, B1, A1] = Colour.HEX2RGBA(getDarkerColourColor.value);
-                    let [R2, G2, B2, A2] = Colour.GetBrighterColour(R1, G1, B1, A1);
+                    let [R1, G1, B1, A1] = Colour.hex2rgba(getDarkerColourColor.value);
+                    let [R2, G2, B2, A2] = Colour.getBrighterColour(R1, G1, B1, A1);
                     SecondColourShowElement.style.backgroundColor = `rgba(${R2}, ${G2}, ${B2}, ${A2})`;
                 });
             }
@@ -209,9 +209,9 @@ <h1>Colour Difference</h1>
                 // init on click
                 compareButton.addEventListener("click", function() {
                     // convert HEX to LAB
-                    const [L1, A1, B1] = Colour.HEX2LAB(FirstColourInHEX, 1);
-                    const [L2, A2, B2] = Colour.HEX2LAB(SecondColourInHEX, 2);
-                    const deltaE = Colour.DeltaE00(L1, A1, B1, L2, A2, B2);
+                    const [L1, A1, B1] = Colour.hex2lab(FirstColourInHEX, 1);
+                    const [L2, A2, B2] = Colour.hex2lab(SecondColourInHEX, 2);
+                    const deltaE = Colour.deltaE00(L1, A1, B1, L2, A2, B2);
                     logElement.innerHTML += `<li class="result">DetlaE00: ${deltaE}</li>`;
                 });
             }