fix: hsl color logic to preserve alpha channel

elastic · Oct 2, 2023 · 48f2076 · 48f2076
1 parent 95e970f
commit 48f2076
Showing 1 changed file with 9 additions and 7 deletions.
diff --git a/packages/charts/src/common/color_library_wrappers.ts b/packages/charts/src/common/color_library_wrappers.ts
@@ -83,18 +83,20 @@ export function colorToRgba(color: Color): RgbaTuple {
 }
 
 /** @internal */
-export function colorToHsl(color: Color) {
-  const [r, g, b] = colorToRgba(color);
-  return chroma.rgb(r, g, b).hsl();
+export function colorToHsl(color: Color): [h: number, s: number, l: number, a: number] {
+  const [r, g, b, a] = colorToRgba(color);
+  const [h, s, l] = chroma.rgb(r, g, b).hsl(); // alpha not preserved
+  return [h, s, l, a];
 }
+
 /** @internal */
-export function hslToColor(h: number, s: number, l: number): Color {
-  const rgba = chroma.hsl(h, s, l).rgba();
+export function hslToColor(h: number, s: number, l: number, a = 1): Color {
+  const rgba = chroma.hsl(h, s, l).alpha(a).rgba();
   return RGBATupleToString(rgba);
 }
 
 /** @internal */
 export function changeColorLightness(color: Color, lightnessAmount: number, lightnessThreshold: number): Color {
-  const [h, s, l] = colorToHsl(color);
-  return hslToColor(h, s, l >= lightnessThreshold ? l - lightnessAmount : l + lightnessAmount);
+  const [h, s, l, a] = colorToHsl(color);
+  return hslToColor(h, s, l >= lightnessThreshold ? l - lightnessAmount : l + lightnessAmount, a);
 }