diff --git a/packages/configuration-builder/src/TokensSection/ColorSelector.tsx b/packages/configuration-builder/src/TokensSection/ColorSelector.tsx
index 4fd47c327..3773ee9f7 100644
--- a/packages/configuration-builder/src/TokensSection/ColorSelector.tsx
+++ b/packages/configuration-builder/src/TokensSection/ColorSelector.tsx
@@ -10,7 +10,7 @@ import {
 import { useConfiguratorStatusContext } from "../ConfiguratorStatusContext";
 import { useTranslation } from "react-i18next";
 import { ColorPickerField } from "../ColorPickerField/ColorPickerField";
-import { ColorToken, colorTokenToRGBA } from "../utils/paletteUtils";
+import { ColorToken, colorTokenToValue } from "../utils/paletteUtils";
 
 export function ColorSelector(props: {
   label: LocalizedString;
@@ -18,7 +18,7 @@ export function ColorSelector(props: {
   onChange: (value: ColorToken) => void;
 }) {
   const colors = useConfiguratorStatusContext().theme.colors;
-  const selectedColor = colorTokenToRGBA(colors)(props.value);
+  const selectedColor = colorTokenToValue(colors)(props.value);
   const { t } = useTranslation();
 
   return (
diff --git a/packages/configuration-builder/src/utils/colorUtils.ts b/packages/configuration-builder/src/utils/colorUtils.ts
index 1403cd185..39f5b8f91 100644
--- a/packages/configuration-builder/src/utils/colorUtils.ts
+++ b/packages/configuration-builder/src/utils/colorUtils.ts
@@ -100,10 +100,10 @@ export function HexToRGB(hex: HexColor): RGB {
 }
 
 export function withAlpha(color: HexColor, alpha: number) {
-  const rgb = HexToRGB(color);
   if (alpha === 100) {
-    return `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`;
+    return color;
   } else {
+    const rgb = HexToRGB(color);
     return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${alpha / 100})`;
   }
 }
diff --git a/packages/configuration-builder/src/utils/paletteUtils.ts b/packages/configuration-builder/src/utils/paletteUtils.ts
index 345ddbce1..631513b48 100644
--- a/packages/configuration-builder/src/utils/paletteUtils.ts
+++ b/packages/configuration-builder/src/utils/paletteUtils.ts
@@ -81,13 +81,13 @@ export type ColorToken = {
   alpha: number;
 };
 
-export function colorTokenToRGBA(colors: ThemeConfig["colors"]) {
+export function colorTokenToValue(colors: ThemeConfig["colors"]) {
   return (colorToken: ColorToken): string | undefined => {
     if (colorToken.colorKey === "black") {
       return withAlpha("#000000" as HexColor, colorToken.alpha);
     }
     if (colorToken.colorKey === "white") {
-      return withAlpha("#FFFFFF" as HexColor, colorToken.alpha);
+      return withAlpha("#ffffff" as HexColor, colorToken.alpha);
     }
     const [paletteName, step] = colorToken.colorKey.split("-");
     const keyColor = getPaletteKeyColor(paletteName as PaletteName, colors);
diff --git a/packages/configuration-builder/src/utils/preview.ts b/packages/configuration-builder/src/utils/preview.ts
index 7318f28d7..10d91d1da 100644
--- a/packages/configuration-builder/src/utils/preview.ts
+++ b/packages/configuration-builder/src/utils/preview.ts
@@ -1,12 +1,12 @@
 import { BentoTheme } from "@buildo/bento-design-system";
 import { useConfiguratorStatusContext } from "../ConfiguratorStatusContext";
-import { ColorToken, colorTokenToRGBA as _colorTokenToRGBA } from "./paletteUtils";
+import { ColorToken, colorTokenToValue as _colorTokenToValue } from "./paletteUtils";
 
 export function useConfiguredTheme(): BentoTheme & object {
   const { tokens: _tokens, colors } = useConfiguratorStatusContext().theme;
   const tokens = _tokens as Record<string, Record<string, ColorToken>>;
 
-  const colorTokenToRGBA = _colorTokenToRGBA(colors);
+  const colorTokenToValue = _colorTokenToValue(colors);
 
   const theme: BentoTheme & object = Object.keys(tokens).reduce(
     (acc, key) => ({
@@ -14,7 +14,7 @@ export function useConfiguredTheme(): BentoTheme & object {
       [key]: Object.keys(tokens[key]).reduce(
         (acc2, key2) => ({
           ...acc2,
-          [key2]: colorTokenToRGBA(tokens[key][key2]),
+          [key2]: colorTokenToValue(tokens[key][key2]),
         }),
         {}
       ),
diff --git a/packages/configuration-builder/src/utils/useConfigurationExporter.ts b/packages/configuration-builder/src/utils/useConfigurationExporter.ts
index fb11e3958..0fb63e147 100644
--- a/packages/configuration-builder/src/utils/useConfigurationExporter.ts
+++ b/packages/configuration-builder/src/utils/useConfigurationExporter.ts
@@ -1,5 +1,5 @@
 import { useConfiguratorStatusContext } from "../ConfiguratorStatusContext";
-import { ColorToken, colorTokenToRGBA as _colorTokenToRGBA } from "./paletteUtils";
+import { ColorToken, colorTokenToValue as _colorTokenToValue } from "./paletteUtils";
 
 function colorTokenToVarName(colorToken: ColorToken): string {
   const tokenPart = `${colorToken.colorKey.replace("-", "")}`;
@@ -11,14 +11,14 @@ function colorTokenToVarName(colorToken: ColorToken): string {
 
 export function useConfigurationExporter(): () => string {
   const { tokens, colors } = useConfiguratorStatusContext().theme;
-  const colorTokenToRGBA = _colorTokenToRGBA(colors);
+  const colorTokenToValue = _colorTokenToValue(colors);
   return () => {
     const prelude = `import { BentoTheme } from "@buildo/bento-design-system";`;
 
     const usedColors: Record<string, string> = {};
     Object.entries(tokens).forEach(([_, tokensSection]) => {
       Object.entries(tokensSection).forEach(([_, colorToken]) => {
-        const rgba = colorTokenToRGBA(colorToken);
+        const rgba = colorTokenToValue(colorToken);
         if (rgba) {
           usedColors[colorTokenToVarName(colorToken)] = rgba;
         }