diff --git a/src/page-components/wheels/ColorColumn.tsx b/src/page-components/wheels/ColorColumn.tsx
index 46824c4..aa415f6 100644
--- a/src/page-components/wheels/ColorColumn.tsx
+++ b/src/page-components/wheels/ColorColumn.tsx
@@ -27,19 +27,21 @@ type ColorWheelProps = {
   actived: boolean;
   rotate: number;
   rootColor: string;
+  tones: number;
+  step: number;
 };
 
-export function ColorColumn({ actived, rotate, rootColor }: ColorWheelProps) {
+export function ColorColumn({ actived, rotate, rootColor, tones, step }: ColorWheelProps) {
   const { colorFn } = useColorFunction();
   const colorSeries = useMemo(() => {
     try {
-      const colors = colorFn?.series(rootColor, 4, 0.16);
+      const colors = colorFn?.series(rootColor, tones, step / 100);
       return (colors ?? Array.from({ length: 9 }, () => rootColor)).reverse();
     } catch (e) {
       console.error('[Generate Color Series]', e);
     }
     return Array.from({ length: 9 }, () => rootColor);
-  }, [rootColor]);
+  }, [rootColor, tones, step]);
 
   return (
     <div
diff --git a/src/page-components/wheels/ColorWheel.tsx b/src/page-components/wheels/ColorWheel.tsx
index 3efaaea..94ced24 100644
--- a/src/page-components/wheels/ColorWheel.tsx
+++ b/src/page-components/wheels/ColorWheel.tsx
@@ -16,6 +16,8 @@ type ColorWheelProps = {
     | 'tetradic'
     | 'flip_tetradic'
     | 'square';
+  tones?: number;
+  step?: number;
 };
 
 const wheelRotates = [0, 30, 60, 90, 120, 150, 180, 210, 240, 270, 300, 330];
@@ -33,6 +35,8 @@ const highlightSeries = {
 export function ColorWheel({
   originColor = '000000',
   highlightMode = 'complementary',
+  tones = 4,
+  step = 10,
 }: ColorWheelProps) {
   const { colorFn } = useColorFunction();
   const wheelColors = useMemo(() => {
@@ -58,6 +62,8 @@ export function ColorWheel({
               rootColor={color}
               rotate={rotate}
               actived={includes(highlightSeries[highlightMode], rotate)}
+              tones={tones}
+              step={step}
             />
           ))}
         </div>
diff --git a/src/pages/Wheels.tsx b/src/pages/Wheels.tsx
index 1ae852c..e9ccdcc 100644
--- a/src/pages/Wheels.tsx
+++ b/src/pages/Wheels.tsx
@@ -12,7 +12,7 @@ export function Wheels() {
   const [selectedColor, setSelectedColor] = useAtom(currentPickedColor);
   const [selectedMode, setSelectedMode] = useState('complementary');
   const [steps, setSteps] = useState(10);
-  const [tones, setTones] = useState(4);
+  const [tones, setTones] = useState(3);
 
   return (
     <div className={cx('workspace', styles.wheels_workspace)}>
@@ -64,7 +64,12 @@ export function Wheels() {
           </div>
         </aside>
         <div className={styles.wheel_side}>
-          <ColorWheel originColor={selectedColor} highlightMode={selectedMode} />
+          <ColorWheel
+            originColor={selectedColor}
+            highlightMode={selectedMode}
+            tones={tones}
+            step={steps}
+          />
         </div>
       </section>
     </div>