diff --git a/src/alf/util/colors/conversion.ts b/src/alf/util/colors/conversion.ts
index 41ef92422..691b0fabd 100644
--- a/src/alf/util/colors/conversion.ts
+++ b/src/alf/util/colors/conversion.ts
@@ -89,11 +89,11 @@ export const hslToHex = (
     }
   }
 
-  const r = hue(h + 1 / 3) * 255
-  const g = hue(h) * 255
-  const b = hue(h - 1 / 3) * 255
+  const r = Math.round(hue(h + 1 / 3) * 255)
+  const g = Math.round(hue(h) * 255)
+  const b = Math.round(hue(h - 1 / 3) * 255)
 
-  return `${appendSymbol ? '#' : ''}${r.toString(16)}${g.toString(16)}${b.toString(16)}${typeof a !== 'undefined' ? a.toString(16) : ''}`
+  return `${appendSymbol ? '#' : ''}${r.toString(16)}${g.toString(16)}${b.toString(16)}${typeof a !== 'undefined' ? Math.round(a).toString(16) : ''}`
 }
 
 /**
@@ -215,3 +215,9 @@ export const hslToRgb = ({h, s, l, a}: HslColor): RgbColor => {
     a: typeof a !== 'undefined' ? (a / 100) * 255 : undefined,
   }
 }
+
+export const rgbObjectToString = ({r, g, b, a}: RgbColor) => {
+  const res = `rgba(${r}, ${g}, ${b}${a ? `, ${(a / 255) * 100}` : ''})`
+  console.log(res)
+  return res
+}
diff --git a/src/alf/util/colors/index.ts b/src/alf/util/colors/index.ts
index cc0b52929..bf6b41f0a 100644
--- a/src/alf/util/colors/index.ts
+++ b/src/alf/util/colors/index.ts
@@ -1,4 +1,9 @@
-import {hexToHsl, hslToHex} from '#/alf/util/colors/conversion'
+import {
+  hexToHsl,
+  hslToHex,
+  hslToRgb,
+  rgbObjectToString,
+} from '#/alf/util/colors/conversion'
 
 export interface HslColor {
   h: number
@@ -57,5 +62,5 @@ export const fade = (hex: HexCode, amount: number) => {
 
   hsl.a = amount / 100
   hsl.a = clamp(hsl.a)
-  return hslToHex(hsl)
+  return rgbObjectToString(hslToRgb(hsl))
 }