diff --git a/src/page-components/wheels/ColorColumn.tsx b/src/page-components/wheels/ColorColumn.tsx
index aa415f6..52aa6a6 100644
--- a/src/page-components/wheels/ColorColumn.tsx
+++ b/src/page-components/wheels/ColorColumn.tsx
@@ -15,7 +15,9 @@ function ColorBlock({ dimmed, color, isRoot = false }: ColorBlockProps) {
   const copyColor = useCopyColor();
 
   return (
-    <div className={styles.color_block} onClick={() => copyColor(color)}>
+    <div
+      className={styles.color_block}
+      onClick={() => copyColor(color.startsWith('#') ? color : `#${color}`)}>
       <div className={styles.bg} style={{ backgroundColor: `#${color}` }} />
       <div className={cx(styles.dim_overlay, dimmed && styles.show_overlay)} />
       <div className={cx(isRoot && styles.active)} />
diff --git a/src/pages/Wheels.tsx b/src/pages/Wheels.tsx
index 84043d4..68394d5 100644
--- a/src/pages/Wheels.tsx
+++ b/src/pages/Wheels.tsx
@@ -28,6 +28,22 @@ export function Wheels() {
               <h5>Basic color</h5>
               <ColorPicker color={selectedColor} onSelect={(color) => setSelectedColor(color)} />
             </div>
+            <div className={styles.mode_navigation}>
+              <h5>Color selection method</h5>
+              <VSegmentedControl
+                onChange={setSelectedMode}
+                options={[
+                  { label: 'Complementary', value: 'complementary' },
+                  { label: 'Analogous', value: 'analogous' },
+                  { label: 'Analogous with Complementary', value: 'analogous_with_complementary' },
+                  { label: 'Triadic', value: 'triadic' },
+                  { label: 'Split Complementary', value: 'split_complementary' },
+                  { label: 'Tetradic', value: 'tetradic' },
+                  { label: 'Flip Tetradic', value: 'flip_tetradic' },
+                  { label: 'Square', value: 'square' },
+                ]}
+              />
+            </div>
             <div>
               <h5>Series Setting</h5>
               <LabeledPicker
@@ -48,22 +64,6 @@ export function Wheels() {
                 onChange={setSteps}
               />
             </div>
-            <div className={styles.mode_navigation}>
-              <h5>Color selection method</h5>
-              <VSegmentedControl
-                onChange={setSelectedMode}
-                options={[
-                  { label: 'Complementary', value: 'complementary' },
-                  { label: 'Analogous', value: 'analogous' },
-                  { label: 'Analogous with Complementary', value: 'analogous_with_complementary' },
-                  { label: 'Triadic', value: 'triadic' },
-                  { label: 'Split Complementary', value: 'split_complementary' },
-                  { label: 'Tetradic', value: 'tetradic' },
-                  { label: 'Flip Tetradic', value: 'flip_tetradic' },
-                  { label: 'Square', value: 'square' },
-                ]}
-              />
-            </div>
           </aside>
           <div className={styles.wheel_side}>
             <ColorWheel