diff --git a/website/src/components/ColorGenerator/index.tsx b/website/src/components/ColorGenerator/index.tsx
index d972988208dd..9cbb4ef885dc 100644
--- a/website/src/components/ColorGenerator/index.tsx
+++ b/website/src/components/ColorGenerator/index.tsx
@@ -91,7 +91,10 @@ function ColorGenerator() {
           className={styles.input}
           defaultValue={baseColor}
           onChange={(event) => {
-            const colorValue = event.target.value;
+            // Replace all the prefix '#' with an empty string.
+            // For example, '#ccc' -> 'ccc', '##ccc' -> 'ccc'
+            const colorValue = event.target.value.replace(/^#+/, '');
+
             try {
               Color('#' + colorValue);
               setBaseColor(colorValue);