sortHexColors.ts

//Sorting Hex Color:

class Color {

	hex: string;

	constructor(hexVal: string) { 
		//define a Color class for the color objects
		this.hex = hexVal;
	};

}

const constructColor = (colorObj: any) => {
	var hex = colorObj.hex.substring(1);
	/* Get the RGB values to calculate the Hue. */
	var r = parseInt(hex.substring(0, 2), 16) / 255;
	var g = parseInt(hex.substring(2, 4), 16) / 255;
	var b = parseInt(hex.substring(4, 6), 16) / 255;

	/* Getting the Max and Min values for Chroma. */
	var max = Math.max.apply(Math, [r, g, b]);
	var min = Math.min.apply(Math, [r, g, b]);


	/* Variables for HSV value of hex color. */
	var chr = max - min;
	var hue = 0;
	var val = max;
	var sat = 0;


	if (val > 0) {
		/* Calculate Saturation only if Value isn't 0. */
		sat = chr / val;
		if (sat > 0) {
			if (r == max) {
				hue = 60 * (((g - min) - (b - min)) / chr);
				if (hue < 0) {
					hue += 360;
				}
			} else if (g == max) {
				hue = 120 + 60 * (((b - min) - (r - min)) / chr);
			} else if (b == max) {
				hue = 240 + 60 * (((r - min) - (g - min)) / chr);
			}
		}
	}
	colorObj.chroma = chr;
	colorObj.hue = hue;
	colorObj.sat = sat;
	colorObj.val = val;
	colorObj.luma = 0.3 * r + 0.59 * g + 0.11 * b;
	colorObj.red = parseInt(hex.substring(0, 2), 16);
	colorObj.green = parseInt(hex.substring(2, 4), 16);
	colorObj.blue = parseInt(hex.substring(4, 6), 16);
	return colorObj;
};

const sortColorsByLuma = (colors: any) => {
	return colors.sort(function (a: any, b: any) {
		return a.luma - b.luma;
	});
};

const mapHex = (color: any) => {
	return color.hex;
}

const outputColors = (hexArray: any) => {
	var colors: any[] = [];
	hexArray.forEach((v: any, i: any) => {
		var color = new Color(v);
		constructColor(color);
		colors.push(color);
	});

	sortColorsByLuma(colors);

	return colors.map(mapHex);
};

const myJson = `{
	"colors": {
    "editor.background": "#1e242c",
    "sideBar.background": "#1a2028",
    "sideBar.border": "#282a2e",
    "activityBar.background": "#1a2028",
    "activityBar.border": "#282a2e",
    "statusBar.background": "#1a2028",
    "statusBar.border": "#282a2e",
    "tab.activeBackground": "#1e242c",
    "tab.activeBorder": "#4e6a87",
    "tab.inactiveBackground": "#1e242c",
    "editorGroupHeader.noTabsBackground": "#1e242c",
    "editorGroupHeader.tabsBackground": "#1e242c",
		"editor.foreground": "#d4d4d4",
		"activityBarBadge.background": "#007acc",
    "sideBarTitle.foreground": "#bbbbbb",
    "titleBar.activeBackground": "#1e242c",
    "titleBar.inactiveBackground": "#1e242c",
    "titleBar.border": "#282a2e",
    "editorCursor.foreground": "#f5eea2",
    "editorLineNumber.foreground": "#4e6a87",
    "editor.lineHighlightBackground": "#272c34"
	}
}`;

const extractedColors = myJson.match(/#[a-z0-9]{6}/gi)?.map(c => c.toString().toLowerCase()) ?? [];
const uniqueColors = Array.from(new Set(extractedColors));
const sortedColors = outputColors(uniqueColors);

console.log(sortedColors.map((c, i) => `$color-${i}: ${c}`).join(';'));