Improved color palette

colors.ts

@@ -1,22 +1,119 @@
+const hue_gray = 230;
+const hue_brown = 30;
+const hue_orange = 37;
+const hue_purple = 280;
+const hue_pink = 310;
+const hue_red = 340;
+const hue_red_shade = 335;
+const hue_yellow = 57;
+const hue_green = 130;
+const hue_green_shade = 145;
+const hue_sky = 203;
+const hue_blue = 224;
+const hue_blue_shade = 235;
+const hue_blue_shade_2 = 240;
+
+const saturation_max = 90;
+const saturation_normal = 60;
+const saturation_low = 40;
+const saturation_min = 13;
+
+const lightness_max = 95;
+const lightness_light = 67;
+const lightness_mediumlight = 62;
+const lightness_medium = 50;
+const lightness_mediumdark = 40;
+const lightness_dark = 30;
+const lightness_almostverydark = 25;
+const lightness_verydark = 20;
+const lightness_min = 5;
+
+/**
+ * Converts an HSL color value to RGB. Conversion formula
+ * adapted from http://en.wikipedia.org/wiki/HSL_color_space.
+ * Assumes h, s, and l are contained in the set [0, 1] and
+ * returns r, g, and b in the set [0, 255].
+ *
+ * @param   Number  h       The hue
+ * @param   Number  s       The saturation
+ * @param   Number  l       The lightness
+ * @return  Array           The RGB representation
+ */
+ function hsl(h: number, s: number, l: number): [number, number, number] {
+	h = h / 360;
+	s = s/100;
+	l = l/100;
+	let r, g, b;
+  
+	if (s == 0) {
+	  r = g = b = l; // achromatic
+	} else {
+	  const hue2rgb = (p: number, q: number, t: number) => {
+		if (t < 0) t += 1;
+		if (t > 1) t -= 1;
+		if (t < 1/6) return p + (q - p) * 6 * t;
+		if (t < 1/2) return q;
+		if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
+		return p;
+	  }
+  
+	  const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+	  const p = 2 * l - q;
+  
+	  r = hue2rgb(p, q, h + 1/3);
+	  g = hue2rgb(p, q, h);
+	  b = hue2rgb(p, q, h - 1/3);
+	}
+  
+	return [ r , g , b ];
+}
+
 const colors = {
 	TRANSPARENT: [0, 0, 0],
-	BLACK: [0, 0, 0],
-	WHITE: [1, 1, 1],
-	RED: [1, 0, 0],
-	YELLOW: [1, 1, 0],
-	GREEN: [0, 1, 0],
-	BLUE: [0.1, 0.5, 1],
-	DARKBLUE: [0.05, 0.1, 0.3],
-	BROWN: [0.6, 0.5, 0.4],
-	GRAY: [0.5, 0.5, 0.5],
-	PURPLE: [0.7, 0.1, 0.85],
-	ORANGE: [0.95, 0.75, 0.25],
-	CYAN: [0, 0.9, 0.9],
-	LIGHTGRAY: [0.75, 0.75, 0.75],
-	REDDISH: [216/255, 59/255, 113/255],
-	DARKGREEN: [0, 0.6, 0.2],
+	BLACK2: [0, 0, 0],
+	BLACK3: [0, 0, 0],
+	BLACK4: [0, 0, 0],
+	WHITE: hsl(hue_gray, saturation_min, lightness_max),
+	LIGHTGRAY: hsl(hue_gray, saturation_min, lightness_light),
+	DARKGRAY: hsl(hue_gray, saturation_min, lightness_dark),
+	BLACK: hsl(hue_gray, saturation_min, lightness_min),
+	ORANGE: hsl(hue_orange, saturation_normal, lightness_medium),
+	TAN: hsl(hue_brown, saturation_low, lightness_light),
+	BROWN: hsl(hue_brown, saturation_low, lightness_mediumdark),
+	DARKBROWN: hsl(hue_brown, saturation_low, lightness_almostverydark),
+	PURPLE: hsl(hue_purple, saturation_normal, lightness_medium),
+	PINK: hsl(hue_pink, saturation_normal, lightness_light),
+	RED: hsl(hue_red, saturation_normal, lightness_medium),
+	DARKRED: hsl(hue_red_shade, saturation_normal, lightness_dark),
+	YELLOW: hsl(hue_yellow, saturation_max, lightness_mediumlight),
+	GREEN: hsl(hue_green, saturation_normal, lightness_medium),
+	DARKGREEN: hsl(hue_green_shade, saturation_normal, lightness_dark),
+	DARKERGREEN: hsl(hue_green_shade, saturation_normal, lightness_verydark),
+	CYAN: hsl(hue_sky, saturation_max, lightness_light),
+	BLUE: hsl(hue_blue, saturation_normal, lightness_medium),
+	DARKBLUE: hsl(hue_blue_shade, saturation_normal, lightness_mediumdark),
+	DARKERBLUE: hsl(hue_blue_shade_2, saturation_normal, lightness_dark),
 } as const;
 
+// const colors = {
+// 	TRANSPARENT: [0, 0, 0],
+// 	BLACK: [0, 0, 0],
+// 	WHITE: [1, 1, 1],
+// 	RED: [1, 0, 0],
+// 	YELLOW: [1, 1, 0],
+// 	GREEN: [0, 1, 0],
+// 	BLUE: [0.1, 0.5, 1],
+// 	DARKBLUE: [0.05, 0.1, 0.3],
+// 	BROWN: [0.6, 0.5, 0.4],
+// 	GRAY: [0.5, 0.5, 0.5],
+// 	PURPLE: [0.7, 0.1, 0.85],
+// 	ORANGE: [0.95, 0.75, 0.25],
+// 	CYAN: [0, 0.9, 0.9],
+// 	LIGHTGRAY: [0.75, 0.75, 0.75],
+// 	REDDISH: [216/255, 59/255, 113/255],
+// 	DARKGREEN: [0, 0.6, 0.2],
+// } as const;
+
 export const palette: Array<[number, number, number, number]> = Object.values(colors).map(val => [...val, 1]);
 
 export const COLOR = Object.fromEntries(Object.keys(colors).map((name, i) => [name, Number(i)])) as {[key in keyof typeof colors]: number};