diff --git a/src/components/page/theming/ColorGenerator/index.tsx b/src/components/page/theming/ColorGenerator/index.tsx
index 66e8ffd1485..7bc86599a37 100644
--- a/src/components/page/theming/ColorGenerator/index.tsx
+++ b/src/components/page/theming/ColorGenerator/index.tsx
@@ -43,6 +43,7 @@ const ColorGenerator = (props) => {
           const { tint, shade, value } = color;
           const nameCap = name[0].toUpperCase() + name.substring(1);
 
+          const formattedValue = value.charAt(0) === '#' ? value : '#' + value;
           const isOpen = activeColor === name ? true : false;
 
           return (
@@ -52,13 +53,13 @@ const ColorGenerator = (props) => {
             >
               <div className={styles.titleRow}>
                 <div className={styles.titleRowStart}>
-                  <ColorDot color={value} />
+                  <ColorDot color={formattedValue} />
                   {nameCap}
                 </div>
                 <div className={styles.titleRowEnd}>
                   <ColorInput
                     onClick={(ev) => ev.stopPropagation()}
-                    color={value}
+                    color={formattedValue}
                     setColor={(color) =>
                       setColors((colors) => {
                         colors[name] = generateColor(color);