Use hsl to calculate fingerprint colors (#407)

To make the colours more perceptually different

Author: microbit-grace

src/components/RecordingFingerprint.tsx

@@ -1,9 +1,9 @@
 import { BoxProps, Grid, GridItem, Text, VStack } from "@chakra-ui/react";
+import { FormattedMessage } from "react-intl";
 import { applyFilters } from "../ml";
 import { XYZData } from "../model";
-import { calculateColor } from "../utils/gradient-calculator";
+import { calculateGradientColor } from "../utils/gradient-calculator";
 import ClickableTooltip from "./ClickableTooltip";
-import { FormattedMessage } from "react-intl";
 
 interface RecordingFingerprintProps extends BoxProps {
   data: XYZData;
@@ -49,11 +49,7 @@ const RecordingFingerprint = ({
         >
           <GridItem
             w="100%"
-            backgroundColor={calculateColor(
-              dataFeatures[k],
-              { r: 225, g: 255, b: 255 },
-              { r: 25, g: 125, b: 188 }
-            )}
+            backgroundColor={calculateGradientColor("#007DBC", dataFeatures[k])}
           />
         </ClickableTooltip>
       ))}

src/utils/gradient-calculator.ts

@@ -1,20 +1,8 @@
-interface RGB {
-  r: number;
-  g: number;
-  b: number;
-}
-
-export const calculateColor = (
-  value: number,
-  startColor: RGB,
-  endColor: RGB
-) => {
-  const diff = {
-    r: endColor.r - startColor.r,
-    g: endColor.g - startColor.g,
-    b: endColor.b - startColor.b,
-  };
-  return `rgba(${startColor.r + diff.r * value}, ${
-    startColor.g + diff.g * value
-  }, ${startColor.b + diff.b * value}, 1)`;
+export const calculateGradientColor = (hexColor: string, value: number) => {
+  const minLightness = 10;
+  const maxLightness = 90;
+  const diffLightness = maxLightness - minLightness;
+  return `hsl(from ${hexColor} h s ${
+    minLightness + (1 - value) * diffLightness
+  }%)`;
 };