diff --git a/packages/builder/src/components/userInterface/Colorpicker/utils.js b/packages/builder/src/components/userInterface/Colorpicker/utils.js
index d49efc876e..98f3f53f9b 100644
--- a/packages/builder/src/components/userInterface/Colorpicker/utils.js
+++ b/packages/builder/src/components/userInterface/Colorpicker/utils.js
@@ -132,14 +132,14 @@ export const hexaToHSVA = (hex, alpha = "FF") => {
 export const rgbaToHSVA = rgba => {
   const [r, g, b, a = 1] = rgba
   let hsv = _rgbToHSV([r, g, b])
-  return [...hsv, a]
+  return [...hsv, a].map(x => parseFloat(x))
 }
 
 export const hslaToHSVA = ([h, s, l, a = 1]) => {
   let sat = s.replace(/%/, "")
   let lum = l.replace(/%/, "")
   let hsv = _hslToHSV([h, sat, lum])
-  return [...hsv, a]
+  return [...hsv, a].map(x => parseFloat(x))
 }
 
 export const hsvaToHexa = (hsva, asString = false) => {
diff --git a/packages/builder/src/components/userInterface/Colorpicker/utils.test.js b/packages/builder/src/components/userInterface/Colorpicker/utils.test.js
index 56ea17419a..c47d54ed1b 100644
--- a/packages/builder/src/components/userInterface/Colorpicker/utils.test.js
+++ b/packages/builder/src/components/userInterface/Colorpicker/utils.test.js
@@ -54,7 +54,7 @@ describe("convertHsvaToFormat - convert from hsva to format", () => {
 
   test("Convert to hsla", () => {
     expect(convertHsvaToFormat([264, 68.63, 100, 1], "hsl")).toBe(
-      "hsla(264,100,65.7,1)"
+      "hsla(264,100%,66%,1)"
     )
   })
 })
@@ -93,7 +93,7 @@ describe("Get Color Format", () => {
   })
 
   test("Testing hsla value with alpha", () => {
-    expect(getColorFormat("hsla(150, 60, 50, 0.5)")).toBe("hsl")
+    expect(getColorFormat("hsla(150, 60%, 50%, 0.5)")).toBe("hsl")
   })
 
   test("Testing hsl value with incorrectly provided alpha", () => {