From 9eb397db7dcb7c94197fe3bc33c275cf1e1e7e28 Mon Sep 17 00:00:00 2001 From: sgoudham Date: Sat, 2 Nov 2024 09:01:31 +0000 Subject: [PATCH] feat(ansi): add `hsl` and `rgb` values --- mod.ts | 38 +++ palette.json | 640 +++++++++++++++++++++++++++++++++++++++++ scripts/gen_palette.ts | 70 +++-- 3 files changed, 723 insertions(+), 25 deletions(-) diff --git a/mod.ts b/mod.ts index 446376e..3b2ee8f 100644 --- a/mod.ts +++ b/mod.ts @@ -253,6 +253,44 @@ export type AnsiColorFormat = Readonly<{ */ hex: string; + /** + * Formatted rgb value. + * @example { r: 186, g: 187, b: 241} + */ + rgb: { + /** + * Red, 0-255 + */ + r: number; + /** + * Green, 0-255 + */ + g: number; + /** + * Blue, 0-255 + */ + b: number; + }; + + /** + * Formatted hsl value. + * @example { h: 238.9, s: 12.1, l: 83.5 } + */ + hsl: { + /** + * Hue, 0-360 + */ + h: number; + /** + * Saturation, 0-100 + */ + s: number; + /** + * Lightness, 0-100 + */ + l: number; + }; + /** * The ANSI color code. * @example 4 diff --git a/palette.json b/palette.json index 54767c9..8ecd0a4 100644 --- a/palette.json +++ b/palette.json @@ -430,11 +430,31 @@ "normal": { "name": "Normal", "hex": "#5c5f77", + "rgb": { + "r": 92, + "g": 95, + "b": 119 + }, + "hsl": { + "h": 233.33333333333334, + "s": 0.1279620853080569, + "l": 0.4137254901960784 + }, "code": 0 }, "bright": { "name": "Bright", "hex": "#6c6f85", + "rgb": { + "r": 108, + "g": 111, + "b": 133 + }, + "hsl": { + "h": 232.79999999999998, + "s": 0.10373443983402494, + "l": 0.4725490196078431 + }, "code": 8 } }, @@ -444,11 +464,31 @@ "normal": { "name": "Normal", "hex": "#d20f39", + "rgb": { + "r": 210, + "g": 15, + "b": 57 + }, + "hsl": { + "h": 347.0769230769231, + "s": 0.8666666666666666, + "l": 0.4411764705882353 + }, "code": 1 }, "bright": { "name": "Bright", "hex": "#de293e", + "rgb": { + "r": 222, + "g": 41, + "b": 62 + }, + "hsl": { + "h": 353.0386740331492, + "s": 0.7327935222672065, + "l": 0.515686274509804 + }, "code": 9 } }, @@ -458,11 +498,31 @@ "normal": { "name": "Normal", "hex": "#40a02b", + "rgb": { + "r": 64, + "g": 160, + "b": 43 + }, + "hsl": { + "h": 109.23076923076923, + "s": 0.5763546798029556, + "l": 0.39803921568627454 + }, "code": 2 }, "bright": { "name": "Bright", "hex": "#49af3d", + "rgb": { + "r": 73, + "g": 175, + "b": 61 + }, + "hsl": { + "h": 113.68421052631581, + "s": 0.48305084745762705, + "l": 0.4627450980392157 + }, "code": 10 } }, @@ -472,11 +532,31 @@ "normal": { "name": "Normal", "hex": "#df8e1d", + "rgb": { + "r": 223, + "g": 142, + "b": 29 + }, + "hsl": { + "h": 34.948453608247426, + "s": 0.7698412698412698, + "l": 0.49411764705882355 + }, "code": 3 }, "bright": { "name": "Bright", "hex": "#eea02d", + "rgb": { + "r": 238, + "g": 160, + "b": 45 + }, + "hsl": { + "h": 35.751295336787564, + "s": 0.8502202643171807, + "l": 0.5549019607843138 + }, "code": 11 } }, @@ -486,11 +566,31 @@ "normal": { "name": "Normal", "hex": "#1e66f5", + "rgb": { + "r": 30, + "g": 102, + "b": 245 + }, + "hsl": { + "h": 219.90697674418607, + "s": 0.9148936170212768, + "l": 0.5392156862745098 + }, "code": 4 }, "bright": { "name": "Bright", "hex": "#456eff", + "rgb": { + "r": 69, + "g": 110, + "b": 255 + }, + "hsl": { + "h": 226.77419354838707, + "s": 1, + "l": 0.6352941176470588 + }, "code": 12 } }, @@ -500,11 +600,31 @@ "normal": { "name": "Normal", "hex": "#ea76cb", + "rgb": { + "r": 234, + "g": 118, + "b": 203 + }, + "hsl": { + "h": 316.0344827586207, + "s": 0.7341772151898731, + "l": 0.6901960784313725 + }, "code": 5 }, "bright": { "name": "Bright", "hex": "#fe85d8", + "rgb": { + "r": 254, + "g": 133, + "b": 216 + }, + "hsl": { + "h": 318.8429752066116, + "s": 0.983739837398374, + "l": 0.7588235294117647 + }, "code": 13 } }, @@ -514,11 +634,31 @@ "normal": { "name": "Normal", "hex": "#179299", + "rgb": { + "r": 23, + "g": 146, + "b": 153 + }, + "hsl": { + "h": 183.23076923076923, + "s": 0.7386363636363636, + "l": 0.34509803921568627 + }, "code": 6 }, "bright": { "name": "Bright", "hex": "#2d9fa8", + "rgb": { + "r": 45, + "g": 159, + "b": 168 + }, + "hsl": { + "h": 184.39024390243904, + "s": 0.5774647887323943, + "l": 0.4176470588235294 + }, "code": 14 } }, @@ -528,11 +668,31 @@ "normal": { "name": "Normal", "hex": "#acb0be", + "rgb": { + "r": 172, + "g": 176, + "b": 190 + }, + "hsl": { + "h": 226.6666666666667, + "s": 0.12162162162162159, + "l": 0.7098039215686275 + }, "code": 7 }, "bright": { "name": "Bright", "hex": "#bcc0cc", + "rgb": { + "r": 188, + "g": 192, + "b": 204 + }, + "hsl": { + "h": 225.00000000000003, + "s": 0.13559322033898308, + "l": 0.7686274509803922 + }, "code": 15 } } @@ -968,11 +1128,31 @@ "normal": { "name": "Normal", "hex": "#51576d", + "rgb": { + "r": 81, + "g": 87, + "b": 109 + }, + "hsl": { + "h": 227.14285714285714, + "s": 0.14736842105263157, + "l": 0.37254901960784315 + }, "code": 0 }, "bright": { "name": "Bright", "hex": "#626880", + "rgb": { + "r": 98, + "g": 104, + "b": 128 + }, + "hsl": { + "h": 228.00000000000003, + "s": 0.1327433628318584, + "l": 0.44313725490196076 + }, "code": 8 } }, @@ -982,11 +1162,31 @@ "normal": { "name": "Normal", "hex": "#e78284", + "rgb": { + "r": 231, + "g": 130, + "b": 132 + }, + "hsl": { + "h": 358.8118811881188, + "s": 0.6778523489932885, + "l": 0.7078431372549019 + }, "code": 1 }, "bright": { "name": "Bright", "hex": "#e67172", + "rgb": { + "r": 230, + "g": 113, + "b": 114 + }, + "hsl": { + "h": 359.4871794871795, + "s": 0.7005988023952096, + "l": 0.6725490196078432 + }, "code": 9 } }, @@ -996,11 +1196,31 @@ "normal": { "name": "Normal", "hex": "#a6d189", + "rgb": { + "r": 166, + "g": 209, + "b": 137 + }, + "hsl": { + "h": 95.83333333333331, + "s": 0.4390243902439024, + "l": 0.6784313725490196 + }, "code": 2 }, "bright": { "name": "Bright", "hex": "#8ec772", + "rgb": { + "r": 142, + "g": 199, + "b": 114 + }, + "hsl": { + "h": 100.23529411764706, + "s": 0.431472081218274, + "l": 0.6137254901960785 + }, "code": 10 } }, @@ -1010,11 +1230,31 @@ "normal": { "name": "Normal", "hex": "#e5c890", + "rgb": { + "r": 229, + "g": 200, + "b": 144 + }, + "hsl": { + "h": 39.52941176470588, + "s": 0.6204379562043796, + "l": 0.7313725490196079 + }, "code": 3 }, "bright": { "name": "Bright", "hex": "#d9ba73", + "rgb": { + "r": 217, + "g": 186, + "b": 115 + }, + "hsl": { + "h": 41.764705882352935, + "s": 0.5730337078651685, + "l": 0.6509803921568628 + }, "code": 11 } }, @@ -1024,11 +1264,31 @@ "normal": { "name": "Normal", "hex": "#8caaee", + "rgb": { + "r": 140, + "g": 170, + "b": 238 + }, + "hsl": { + "h": 221.6326530612245, + "s": 0.7424242424242424, + "l": 0.7411764705882353 + }, "code": 4 }, "bright": { "name": "Bright", "hex": "#7b9ef0", + "rgb": { + "r": 123, + "g": 158, + "b": 240 + }, + "hsl": { + "h": 222.05128205128207, + "s": 0.7959183673469388, + "l": 0.711764705882353 + }, "code": 12 } }, @@ -1038,11 +1298,31 @@ "normal": { "name": "Normal", "hex": "#f4b8e4", + "rgb": { + "r": 244, + "g": 184, + "b": 228 + }, + "hsl": { + "h": 316, + "s": 0.7317073170731713, + "l": 0.8392156862745098 + }, "code": 5 }, "bright": { "name": "Bright", "hex": "#f2a4db", + "rgb": { + "r": 242, + "g": 164, + "b": 219 + }, + "hsl": { + "h": 317.6923076923077, + "s": 0.7499999999999998, + "l": 0.7960784313725491 + }, "code": 13 } }, @@ -1052,11 +1332,31 @@ "normal": { "name": "Normal", "hex": "#81c8be", + "rgb": { + "r": 129, + "g": 200, + "b": 190 + }, + "hsl": { + "h": 171.5492957746479, + "s": 0.3922651933701657, + "l": 0.6450980392156862 + }, "code": 6 }, "bright": { "name": "Bright", "hex": "#5abfb5", + "rgb": { + "r": 90, + "g": 191, + "b": 181 + }, + "hsl": { + "h": 174.05940594059405, + "s": 0.44104803493449785, + "l": 0.5509803921568628 + }, "code": 14 } }, @@ -1066,11 +1366,31 @@ "normal": { "name": "Normal", "hex": "#a5adce", + "rgb": { + "r": 165, + "g": 173, + "b": 206 + }, + "hsl": { + "h": 228.29268292682926, + "s": 0.2949640287769784, + "l": 0.7274509803921569 + }, "code": 7 }, "bright": { "name": "Bright", "hex": "#b5bfe2", + "rgb": { + "r": 181, + "g": 191, + "b": 226 + }, + "hsl": { + "h": 226.66666666666669, + "s": 0.43689320388349495, + "l": 0.7980392156862746 + }, "code": 15 } } @@ -1506,11 +1826,31 @@ "normal": { "name": "Normal", "hex": "#494d64", + "rgb": { + "r": 73, + "g": 77, + "b": 100 + }, + "hsl": { + "h": 231.11111111111114, + "s": 0.15606936416184972, + "l": 0.3392156862745098 + }, "code": 0 }, "bright": { "name": "Bright", "hex": "#5b6078", + "rgb": { + "r": 91, + "g": 96, + "b": 120 + }, + "hsl": { + "h": 229.65517241379308, + "s": 0.13744075829383887, + "l": 0.4137254901960784 + }, "code": 8 } }, @@ -1520,11 +1860,31 @@ "normal": { "name": "Normal", "hex": "#ed8796", + "rgb": { + "r": 237, + "g": 135, + "b": 150 + }, + "hsl": { + "h": 351.1764705882353, + "s": 0.7391304347826088, + "l": 0.7294117647058824 + }, "code": 1 }, "bright": { "name": "Bright", "hex": "#ec7486", + "rgb": { + "r": 236, + "g": 116, + "b": 134 + }, + "hsl": { + "h": 351, + "s": 0.759493670886076, + "l": 0.6901960784313725 + }, "code": 9 } }, @@ -1534,11 +1894,31 @@ "normal": { "name": "Normal", "hex": "#a6da95", + "rgb": { + "r": 166, + "g": 218, + "b": 149 + }, + "hsl": { + "h": 105.21739130434783, + "s": 0.4825174825174825, + "l": 0.7196078431372549 + }, "code": 2 }, "bright": { "name": "Bright", "hex": "#8ccf7f", + "rgb": { + "r": 140, + "g": 207, + "b": 127 + }, + "hsl": { + "h": 110.24999999999999, + "s": 0.45454545454545453, + "l": 0.6549019607843137 + }, "code": 10 } }, @@ -1548,11 +1928,31 @@ "normal": { "name": "Normal", "hex": "#eed49f", + "rgb": { + "r": 238, + "g": 212, + "b": 159 + }, + "hsl": { + "h": 40.253164556962034, + "s": 0.6991150442477877, + "l": 0.7784313725490196 + }, "code": 3 }, "bright": { "name": "Bright", "hex": "#e1c682", + "rgb": { + "r": 225, + "g": 198, + "b": 130 + }, + "hsl": { + "h": 42.94736842105264, + "s": 0.6129032258064515, + "l": 0.696078431372549 + }, "code": 11 } }, @@ -1562,11 +1962,31 @@ "normal": { "name": "Normal", "hex": "#8aadf4", + "rgb": { + "r": 138, + "g": 173, + "b": 244 + }, + "hsl": { + "h": 220.188679245283, + "s": 0.8281250000000003, + "l": 0.7490196078431373 + }, "code": 4 }, "bright": { "name": "Bright", "hex": "#78a1f6", + "rgb": { + "r": 120, + "g": 161, + "b": 246 + }, + "hsl": { + "h": 220.47619047619048, + "s": 0.8750000000000002, + "l": 0.7176470588235294 + }, "code": 12 } }, @@ -1576,11 +1996,31 @@ "normal": { "name": "Normal", "hex": "#f5bde6", + "rgb": { + "r": 245, + "g": 189, + "b": 230 + }, + "hsl": { + "h": 316.0714285714286, + "s": 0.7368421052631583, + "l": 0.8509803921568628 + }, "code": 5 }, "bright": { "name": "Bright", "hex": "#f2a9dd", + "rgb": { + "r": 242, + "g": 169, + "b": 221 + }, + "hsl": { + "h": 317.26027397260276, + "s": 0.7373737373737372, + "l": 0.8058823529411765 + }, "code": 13 } }, @@ -1590,11 +2030,31 @@ "normal": { "name": "Normal", "hex": "#8bd5ca", + "rgb": { + "r": 139, + "g": 213, + "b": 202 + }, + "hsl": { + "h": 171.08108108108107, + "s": 0.46835443037974706, + "l": 0.6901960784313725 + }, "code": 6 }, "bright": { "name": "Bright", "hex": "#63cbc0", + "rgb": { + "r": 99, + "g": 203, + "b": 192 + }, + "hsl": { + "h": 173.65384615384616, + "s": 0.4999999999999998, + "l": 0.592156862745098 + }, "code": 14 } }, @@ -1604,11 +2064,31 @@ "normal": { "name": "Normal", "hex": "#a5adcb", + "rgb": { + "r": 165, + "g": 173, + "b": 203 + }, + "hsl": { + "h": 227.36842105263156, + "s": 0.2676056338028167, + "l": 0.7215686274509804 + }, "code": 7 }, "bright": { "name": "Bright", "hex": "#b8c0e0", + "rgb": { + "r": 184, + "g": 192, + "b": 224 + }, + "hsl": { + "h": 228, + "s": 0.39215686274509803, + "l": 0.8 + }, "code": 15 } } @@ -2044,11 +2524,31 @@ "normal": { "name": "Normal", "hex": "#45475a", + "rgb": { + "r": 69, + "g": 71, + "b": 90 + }, + "hsl": { + "h": 234.2857142857143, + "s": 0.13207547169811326, + "l": 0.31176470588235294 + }, "code": 0 }, "bright": { "name": "Bright", "hex": "#585b70", + "rgb": { + "r": 88, + "g": 91, + "b": 112 + }, + "hsl": { + "h": 232.5, + "s": 0.12, + "l": 0.39215686274509803 + }, "code": 8 } }, @@ -2058,11 +2558,31 @@ "normal": { "name": "Normal", "hex": "#f38ba8", + "rgb": { + "r": 243, + "g": 139, + "b": 168 + }, + "hsl": { + "h": 343.2692307692308, + "s": 0.8124999999999998, + "l": 0.7490196078431373 + }, "code": 1 }, "bright": { "name": "Bright", "hex": "#f37799", + "rgb": { + "r": 243, + "g": 119, + "b": 153 + }, + "hsl": { + "h": 343.54838709677415, + "s": 0.8378378378378376, + "l": 0.7098039215686274 + }, "code": 9 } }, @@ -2072,11 +2592,31 @@ "normal": { "name": "Normal", "hex": "#a6e3a1", + "rgb": { + "r": 166, + "g": 227, + "b": 161 + }, + "hsl": { + "h": 115.45454545454544, + "s": 0.5409836065573769, + "l": 0.7607843137254902 + }, "code": 2 }, "bright": { "name": "Bright", "hex": "#89d88b", + "rgb": { + "r": 137, + "g": 216, + "b": 139 + }, + "hsl": { + "h": 121.51898734177213, + "s": 0.5031847133757963, + "l": 0.692156862745098 + }, "code": 10 } }, @@ -2086,11 +2626,31 @@ "normal": { "name": "Normal", "hex": "#f9e2af", + "rgb": { + "r": 249, + "g": 226, + "b": 175 + }, + "hsl": { + "h": 41.35135135135135, + "s": 0.8604651162790699, + "l": 0.8313725490196078 + }, "code": 3 }, "bright": { "name": "Bright", "hex": "#ebd391", + "rgb": { + "r": 235, + "g": 211, + "b": 145 + }, + "hsl": { + "h": 44, + "s": 0.692307692307692, + "l": 0.7450980392156863 + }, "code": 11 } }, @@ -2100,11 +2660,31 @@ "normal": { "name": "Normal", "hex": "#89b4fa", + "rgb": { + "r": 137, + "g": 180, + "b": 250 + }, + "hsl": { + "h": 217.1681415929203, + "s": 0.9186991869918699, + "l": 0.7588235294117647 + }, "code": 4 }, "bright": { "name": "Bright", "hex": "#74a8fc", + "rgb": { + "r": 116, + "g": 168, + "b": 252 + }, + "hsl": { + "h": 217.05882352941174, + "s": 0.9577464788732396, + "l": 0.7215686274509804 + }, "code": 12 } }, @@ -2114,11 +2694,31 @@ "normal": { "name": "Normal", "hex": "#f5c2e7", + "rgb": { + "r": 245, + "g": 194, + "b": 231 + }, + "hsl": { + "h": 316.4705882352941, + "s": 0.7183098591549301, + "l": 0.8607843137254902 + }, "code": 5 }, "bright": { "name": "Bright", "hex": "#f2aede", + "rgb": { + "r": 242, + "g": 174, + "b": 222 + }, + "hsl": { + "h": 317.6470588235294, + "s": 0.7234042553191488, + "l": 0.8156862745098039 + }, "code": 13 } }, @@ -2128,11 +2728,31 @@ "normal": { "name": "Normal", "hex": "#94e2d5", + "rgb": { + "r": 148, + "g": 226, + "b": 213 + }, + "hsl": { + "h": 170.00000000000003, + "s": 0.5735294117647057, + "l": 0.7333333333333334 + }, "code": 6 }, "bright": { "name": "Bright", "hex": "#6bd7ca", + "rgb": { + "r": 107, + "g": 215, + "b": 202 + }, + "hsl": { + "h": 172.77777777777777, + "s": 0.5744680851063831, + "l": 0.6313725490196078 + }, "code": 14 } }, @@ -2142,11 +2762,31 @@ "normal": { "name": "Normal", "hex": "#a6adc8", + "rgb": { + "r": 166, + "g": 173, + "b": 200 + }, + "hsl": { + "h": 227.6470588235294, + "s": 0.23611111111111102, + "l": 0.7176470588235294 + }, "code": 7 }, "bright": { "name": "Bright", "hex": "#bac2de", + "rgb": { + "r": 186, + "g": 194, + "b": 222 + }, + "hsl": { + "h": 226.66666666666669, + "s": 0.35294117647058837, + "l": 0.8 + }, "code": 15 } } diff --git a/scripts/gen_palette.ts b/scripts/gen_palette.ts index 1438545..311560f 100644 --- a/scripts/gen_palette.ts +++ b/scripts/gen_palette.ts @@ -277,6 +277,24 @@ const ansiMappings = { }, }; +const toRgb = (hex: string): { r: number; g: number; b: number } => { + const { r, g, b } = tinycolor(hex).toRgb(); + return { + r, + g, + b, + }; +}; + +const toHsl = (hex: string): { h: number; s: number; l: number } => { + const { h, s, l } = tinycolor(hex).toHsl(); + return { + h, + s, + l, + }; +}; + const formatted = entriesFromObject(definitions).reduce( (acc, [flavorName, flavor], currentIndex) => { acc[flavorName] = { @@ -286,23 +304,19 @@ const formatted = entriesFromObject(definitions).reduce( dark: flavor.dark, colors: entriesFromObject(flavor.colors).reduce( (acc, [colorName, color], currentIndex) => { - const { r, g, b } = tinycolor(color).toRgb(); - const { h, s, l } = tinycolor(color).toHsl(); - acc[colorName] = { name: prettyNames[currentIndex], order: currentIndex, hex: color, - rgb: { r, g, b }, - hsl: { h, s, l }, + rgb: toRgb(color), + hsl: toHsl(color), accent: accents.includes(colorName), }; - return acc; }, {} as Writeable, ), - ansiColors: entriesFromObject(ansiMappings).reduce((acc, [name, props], currentIndex) => { + ansiColors: entriesFromObject(ansiMappings).reduce( (acc, [name, props], currentIndex) => { const mapping = props.normal.mapping as ColorName; let normalColorHex = flavor.colors[mapping]; let brightColorHex: string; @@ -311,8 +325,8 @@ const formatted = entriesFromObject(definitions).reduce( normalColorHex = flavor.dark ? flavor.colors["surface1"] : flavor.colors["subtext1"]; brightColorHex = flavor.dark ? flavor.colors["surface2"] : flavor.colors["subtext0"]; } else if (name == "white") { - normalColorHex = flavor.dark ? flavor.colors["subtext0"] : flavor.colors["surface2"] ; - brightColorHex = flavor.dark ? flavor.colors["subtext1"] : flavor.colors["surface1"] ; + normalColorHex = flavor.dark ? flavor.colors["subtext0"] : flavor.colors["surface2"]; + brightColorHex = flavor.dark ? flavor.colors["subtext1"] : flavor.colors["surface1"]; } else { const brightColor = new Color(normalColorHex); brightColor.lch.l *= flavor.dark ? 0.94 : 1.09; @@ -321,23 +335,29 @@ const formatted = entriesFromObject(definitions).reduce( brightColorHex = brightColor.toString({ format: "hex" }); } - acc[name] = { - name: name[0].toUpperCase() + name.substring(1).toLowerCase(), - order: currentIndex, - normal: { - name: "Normal", - hex: normalColorHex, - code: props.normal.code, - }, - bright: { - name: "Bright", - hex: brightColorHex, - code: props.bright.code, - }, - }; + acc[name] = { + name: name[0].toUpperCase() + name.substring(1).toLowerCase(), + order: currentIndex, + normal: { + name: "Normal", + hex: normalColorHex, + rgb: toRgb(normalColorHex), + hsl: toHsl(normalColorHex), + code: props.normal.code, + }, + bright: { + name: "Bright", + hex: brightColorHex, + rgb: toRgb(brightColorHex), + hsl: toHsl(brightColorHex), + code: props.bright.code, + }, + }; - return acc; - }, {} as Writeable), + return acc; + }, + {} as Writeable, + ), }; return acc; },