From review

frontend/src/modules/SubsurfaceMap/_utils/color.ts

@@ -1,24 +1,19 @@
 import { colorTablesObj } from "@emerson-eps/color-tables";
 import { ColorScale } from "@lib/utils/ColorScale";
 
-import { formatRgb } from "culori";
+import { Color, Rgb, parse } from "culori";
 
-function rgbStringToArray(rgbString: string): number[] | null {
-    const match = rgbString.match(/^rgb\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})\)$/);
-    if (match) {
-        return [parseInt(match[1], 10), parseInt(match[2], 10), parseInt(match[3], 10)];
-    }
-    return null;
-}
 export function createContinuousColorScaleForMap(colorScale: ColorScale): colorTablesObj[] {
     const hexColors = colorScale.getPlotlyColorScale();
     const rgbArr: [number, number, number, number][] = [];
-    hexColors.forEach((color) => {
-        const rgbString: string = formatRgb(color[1]) as string;
-        const rgb = rgbStringToArray(rgbString);
-        if (rgb) {
-            rgbArr.push([color[0], rgb[0], rgb[1], rgb[2]]);
+    hexColors.forEach((hexColor) => {
+        const color: Color | undefined = parse(hexColor[1]); // Returns object with r, g, b items for hex strings
+
+        if (color && color.hasOwnProperty("r") && color.hasOwnProperty("g") && color.hasOwnProperty("b")) {
+            const rgbColor = color as Rgb;
+            rgbArr.push([hexColor[0], rgbColor.r * 255, rgbColor.g * 255, rgbColor.b * 255]);
         }
     });
+
     return [{ name: "Continuous", discrete: false, colors: rgbArr }];
 }