diff --git a/packages/core/src/lib/adapters/inbound/colorsToCssVariables.ts b/packages/core/src/lib/adapters/inbound/colorsToCssVariables.ts
index e876d79..cd640eb 100644
--- a/packages/core/src/lib/adapters/inbound/colorsToCssVariables.ts
+++ b/packages/core/src/lib/adapters/inbound/colorsToCssVariables.ts
@@ -1,15 +1,23 @@
 import { PenpotApiFile } from '../../api'
 import { CSSCustomPropertyDefinition } from '../../types'
 
-const toRgbaCssValue = (hex: string, alpha: number = 1) => {
-  const channels = hex.match(/\w{2}/g)
-  if (channels === null || channels.length !== 3)
+const toHexQuartet = (hexTriplet: string, alpha: number = 1) => {
+  const alphaChannel = Math.trunc(alpha * 0x100) - 1
+  if (alphaChannel < 0 || alphaChannel > 0xff)
+    throw new Error(
+      'Invalid alpha (opacity) number: requires a decimal value between 0 and 1.0',
+    )
+
+  const rgbChannels = hexTriplet.match(/\w{2}/g)
+  if (rgbChannels === null || rgbChannels.length !== 3)
     throw new Error(
       'Invalid RGB value provided: requires 8-bit hexadecimal value per channel',
     )
 
-  const [r, g, b] = channels.map((channelHex) => parseInt(channelHex, 16))
-  return `rgba(${[r, g, b, alpha].join(', ')})`
+  const [RR, GG, BB] = rgbChannels
+  const AA = alphaChannel.toString(16).padStart(2, '0')
+
+  return ('#' + RR + GG + BB + AA).toLowerCase()
 }
 
 export const adaptColorsToCssVariables = (
@@ -22,7 +30,7 @@ export const adaptColorsToCssVariables = (
     return {
       scope: fileName,
       name: color.name,
-      value: toRgbaCssValue(color.color, color.opacity),
+      value: toHexQuartet(color.color, color.opacity),
     }
   })
 
diff --git a/packages/demo/src/styles/colors.css b/packages/demo/src/styles/colors.css
index 94c7ee4..556e9cd 100644
--- a/packages/demo/src/styles/colors.css
+++ b/packages/demo/src/styles/colors.css
@@ -1,29 +1,29 @@
 :root {
-  --Primary_900: rgba(0, 110, 84, 1);
-  --Secondary_500: rgba(191, 152, 254, 1);
-  --Secondary_400: rgba(207, 179, 255, 1);
-  --Neutral_100: rgba(247, 248, 249, 1);
-  --Neutral_500: rgba(133, 144, 162, 1);
-  --Primary_200: rgba(202, 255, 233, 1);
-  --Secondary_800: rgba(105, 31, 209, 1);
-  --Primary_100: rgba(233, 255, 247, 1);
-  --Secondary_200: rgba(240, 232, 255, 1);
-  --Neutral_200: rgba(241, 242, 244, 1);
-  --Neutral_300: rgba(220, 223, 228, 1);
-  --Neutral_700: rgba(98, 111, 134, 1);
-  --Neutral_400: rgba(179, 185, 196, 1);
-  --Neutral_600: rgba(117, 129, 149, 1);
-  --Secondary_600: rgba(148, 83, 249, 1);
-  --Primary_300: rgba(154, 255, 217, 1);
-  --Primary_400: rgba(90, 251, 199, 1);
-  --Secondary_300: rgba(228, 212, 255, 1);
-  --Primary_800: rgba(0, 139, 105, 1);
-  --Neutral_900: rgba(23, 43, 77, 1);
-  --Neutral_800: rgba(68, 84, 111, 1);
-  --Secondary_900: rgba(91, 31, 170, 1);
-  --Primary_700: rgba(0, 174, 127, 1);
-  --Secondary_700: rgba(125, 48, 237, 1);
-  --Primary_500: rgba(49, 239, 184, 1);
-  --Secondary_100: rgba(249, 245, 255, 1);
-  --Primary_600: rgba(0, 213, 154, 1);
+  --Primary_900: #006e54ff;
+  --Secondary_500: #bf98feff;
+  --Secondary_400: #cfb3ffff;
+  --Neutral_100: #f7f8f9ff;
+  --Neutral_500: #8590a2ff;
+  --Primary_200: #caffe9ff;
+  --Secondary_800: #691fd1ff;
+  --Primary_100: #e9fff7ff;
+  --Secondary_200: #f0e8ffff;
+  --Neutral_200: #f1f2f4ff;
+  --Neutral_300: #dcdfe4ff;
+  --Neutral_700: #626f86ff;
+  --Neutral_400: #b3b9c4ff;
+  --Neutral_600: #758195ff;
+  --Secondary_600: #9453f9ff;
+  --Primary_300: #9affd9ff;
+  --Primary_400: #5afbc7ff;
+  --Secondary_300: #e4d4ffff;
+  --Primary_800: #008b69ff;
+  --Neutral_900: #172b4dff;
+  --Neutral_800: #44546fff;
+  --Secondary_900: #5b1faaff;
+  --Primary_700: #00ae7fff;
+  --Secondary_700: #7d30edff;
+  --Primary_500: #31efb8ff;
+  --Secondary_100: #f9f5ffff;
+  --Primary_600: #00d59aff;
 }
\ No newline at end of file
diff --git a/packages/demo/src/styles/colors.json b/packages/demo/src/styles/colors.json
index 0b804ae..8f7299c 100644
--- a/packages/demo/src/styles/colors.json
+++ b/packages/demo/src/styles/colors.json
@@ -2,136 +2,136 @@
   {
     "scope": "EasyFest: Design System & Landing page",
     "name": "Primary 900",
-    "value": "rgba(0, 110, 84, 1)"
+    "value": "#006e54ff"
   },
   {
     "scope": "EasyFest: Design System & Landing page",
     "name": "Secondary 500",
-    "value": "rgba(191, 152, 254, 1)"
+    "value": "#bf98feff"
   },
   {
     "scope": "EasyFest: Design System & Landing page",
     "name": "Secondary 400",
-    "value": "rgba(207, 179, 255, 1)"
+    "value": "#cfb3ffff"
   },
   {
     "scope": "EasyFest: Design System & Landing page",
     "name": "Neutral 100",
-    "value": "rgba(247, 248, 249, 1)"
+    "value": "#f7f8f9ff"
   },
   {
     "scope": "EasyFest: Design System & Landing page",
     "name": "Neutral 500",
-    "value": "rgba(133, 144, 162, 1)"
+    "value": "#8590a2ff"
   },
   {
     "scope": "EasyFest: Design System & Landing page",
     "name": "Primary 200",
-    "value": "rgba(202, 255, 233, 1)"
+    "value": "#caffe9ff"
   },
   {
     "scope": "EasyFest: Design System & Landing page",
     "name": "Secondary 800",
-    "value": "rgba(105, 31, 209, 1)"
+    "value": "#691fd1ff"
   },
   {
     "scope": "EasyFest: Design System & Landing page",
     "name": "Primary 100",
-    "value": "rgba(233, 255, 247, 1)"
+    "value": "#e9fff7ff"
   },
   {
     "scope": "EasyFest: Design System & Landing page",
     "name": "Secondary 200",
-    "value": "rgba(240, 232, 255, 1)"
+    "value": "#f0e8ffff"
   },
   {
     "scope": "EasyFest: Design System & Landing page",
     "name": "Neutral 200",
-    "value": "rgba(241, 242, 244, 1)"
+    "value": "#f1f2f4ff"
   },
   {
     "scope": "EasyFest: Design System & Landing page",
     "name": "Neutral 300",
-    "value": "rgba(220, 223, 228, 1)"
+    "value": "#dcdfe4ff"
   },
   {
     "scope": "EasyFest: Design System & Landing page",
     "name": "Neutral 700",
-    "value": "rgba(98, 111, 134, 1)"
+    "value": "#626f86ff"
   },
   {
     "scope": "EasyFest: Design System & Landing page",
     "name": "Neutral 400",
-    "value": "rgba(179, 185, 196, 1)"
+    "value": "#b3b9c4ff"
   },
   {
     "scope": "EasyFest: Design System & Landing page",
     "name": "Neutral 600",
-    "value": "rgba(117, 129, 149, 1)"
+    "value": "#758195ff"
   },
   {
     "scope": "EasyFest: Design System & Landing page",
     "name": "Secondary 600",
-    "value": "rgba(148, 83, 249, 1)"
+    "value": "#9453f9ff"
   },
   {
     "scope": "EasyFest: Design System & Landing page",
     "name": "Primary 300",
-    "value": "rgba(154, 255, 217, 1)"
+    "value": "#9affd9ff"
   },
   {
     "scope": "EasyFest: Design System & Landing page",
     "name": "Primary 400",
-    "value": "rgba(90, 251, 199, 1)"
+    "value": "#5afbc7ff"
   },
   {
     "scope": "EasyFest: Design System & Landing page",
     "name": "Secondary 300",
-    "value": "rgba(228, 212, 255, 1)"
+    "value": "#e4d4ffff"
   },
   {
     "scope": "EasyFest: Design System & Landing page",
     "name": "Primary 800",
-    "value": "rgba(0, 139, 105, 1)"
+    "value": "#008b69ff"
   },
   {
     "scope": "EasyFest: Design System & Landing page",
     "name": "Neutral 900",
-    "value": "rgba(23, 43, 77, 1)"
+    "value": "#172b4dff"
   },
   {
     "scope": "EasyFest: Design System & Landing page",
     "name": "Neutral 800",
-    "value": "rgba(68, 84, 111, 1)"
+    "value": "#44546fff"
   },
   {
     "scope": "EasyFest: Design System & Landing page",
     "name": "Secondary 900",
-    "value": "rgba(91, 31, 170, 1)"
+    "value": "#5b1faaff"
   },
   {
     "scope": "EasyFest: Design System & Landing page",
     "name": "Primary 700",
-    "value": "rgba(0, 174, 127, 1)"
+    "value": "#00ae7fff"
   },
   {
     "scope": "EasyFest: Design System & Landing page",
     "name": "Secondary 700",
-    "value": "rgba(125, 48, 237, 1)"
+    "value": "#7d30edff"
   },
   {
     "scope": "EasyFest: Design System & Landing page",
     "name": "Primary 500",
-    "value": "rgba(49, 239, 184, 1)"
+    "value": "#31efb8ff"
   },
   {
     "scope": "EasyFest: Design System & Landing page",
     "name": "Secondary 100",
-    "value": "rgba(249, 245, 255, 1)"
+    "value": "#f9f5ffff"
   },
   {
     "scope": "EasyFest: Design System & Landing page",
     "name": "Primary 600",
-    "value": "rgba(0, 213, 154, 1)"
+    "value": "#00d59aff"
   }
 ]
\ No newline at end of file
diff --git a/packages/demo/src/styles/colors.scss b/packages/demo/src/styles/colors.scss
index e45fc5d..0d7f1d0 100644
--- a/packages/demo/src/styles/colors.scss
+++ b/packages/demo/src/styles/colors.scss
@@ -1,27 +1,27 @@
-$Primary_900: rgba(0, 110, 84, 1);
-$Secondary_500: rgba(191, 152, 254, 1);
-$Secondary_400: rgba(207, 179, 255, 1);
-$Neutral_100: rgba(247, 248, 249, 1);
-$Neutral_500: rgba(133, 144, 162, 1);
-$Primary_200: rgba(202, 255, 233, 1);
-$Secondary_800: rgba(105, 31, 209, 1);
-$Primary_100: rgba(233, 255, 247, 1);
-$Secondary_200: rgba(240, 232, 255, 1);
-$Neutral_200: rgba(241, 242, 244, 1);
-$Neutral_300: rgba(220, 223, 228, 1);
-$Neutral_700: rgba(98, 111, 134, 1);
-$Neutral_400: rgba(179, 185, 196, 1);
-$Neutral_600: rgba(117, 129, 149, 1);
-$Secondary_600: rgba(148, 83, 249, 1);
-$Primary_300: rgba(154, 255, 217, 1);
-$Primary_400: rgba(90, 251, 199, 1);
-$Secondary_300: rgba(228, 212, 255, 1);
-$Primary_800: rgba(0, 139, 105, 1);
-$Neutral_900: rgba(23, 43, 77, 1);
-$Neutral_800: rgba(68, 84, 111, 1);
-$Secondary_900: rgba(91, 31, 170, 1);
-$Primary_700: rgba(0, 174, 127, 1);
-$Secondary_700: rgba(125, 48, 237, 1);
-$Primary_500: rgba(49, 239, 184, 1);
-$Secondary_100: rgba(249, 245, 255, 1);
-$Primary_600: rgba(0, 213, 154, 1);
\ No newline at end of file
+$Primary_900: #006e54ff;
+$Secondary_500: #bf98feff;
+$Secondary_400: #cfb3ffff;
+$Neutral_100: #f7f8f9ff;
+$Neutral_500: #8590a2ff;
+$Primary_200: #caffe9ff;
+$Secondary_800: #691fd1ff;
+$Primary_100: #e9fff7ff;
+$Secondary_200: #f0e8ffff;
+$Neutral_200: #f1f2f4ff;
+$Neutral_300: #dcdfe4ff;
+$Neutral_700: #626f86ff;
+$Neutral_400: #b3b9c4ff;
+$Neutral_600: #758195ff;
+$Secondary_600: #9453f9ff;
+$Primary_300: #9affd9ff;
+$Primary_400: #5afbc7ff;
+$Secondary_300: #e4d4ffff;
+$Primary_800: #008b69ff;
+$Neutral_900: #172b4dff;
+$Neutral_800: #44546fff;
+$Secondary_900: #5b1faaff;
+$Primary_700: #00ae7fff;
+$Secondary_700: #7d30edff;
+$Primary_500: #31efb8ff;
+$Secondary_100: #f9f5ffff;
+$Primary_600: #00d59aff;
\ No newline at end of file