diff --git a/packages/app/src/utils/hexToRGB/index.js b/packages/app/src/utils/hexToRGB/index.js
new file mode 100644
index 00000000..7e29a2a8
--- /dev/null
+++ b/packages/app/src/utils/hexToRGB/index.js
@@ -0,0 +1,11 @@
+export default (hex, alpha) => {
+    const r = parseInt(hex.slice(1, 3), 16)
+    const g = parseInt(hex.slice(3, 5), 16)
+    const b = parseInt(hex.slice(5, 7), 16)
+
+    if (alpha) {
+        return `rgba(${r}, ${g}, ${b}, ${alpha})`
+    }
+
+    return `rgb(${r}, ${g}, ${b})`
+}
\ No newline at end of file
diff --git a/packages/app/src/utils/rootVarHexToRGBValues/index.js b/packages/app/src/utils/rootVarHexToRGBValues/index.js
new file mode 100644
index 00000000..6ccae4e8
--- /dev/null
+++ b/packages/app/src/utils/rootVarHexToRGBValues/index.js
@@ -0,0 +1,16 @@
+export default (rootVar) => {
+    const rootVarValue = getComputedStyle(document.documentElement).getPropertyValue(rootVar)
+
+    let result = rootVarValue
+
+    if (rootVarValue.startsWith("#")) {
+        // Convert hex to rgb values
+        const r = parseInt(rootVarValue.slice(1, 3), 16)
+        const g = parseInt(rootVarValue.slice(3, 5), 16)
+        const b = parseInt(rootVarValue.slice(5, 7), 16)
+
+        result = `${r}, ${g}, ${b}`
+    }
+
+    return result
+}
\ No newline at end of file