增加颜色对比功能。

src/pages/Compare.module.css

@@ -0,0 +1,18 @@
+@layer pages {
+  .compare_workspace {
+    flex-direction: column;
+  }
+  .compare_content {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    gap: var(--spacing-l);
+    .compare_column {
+      display: flex;
+      flex-direction: column;
+      gap: var(--spacing-s);
+      font-size: var(--font-size-s);
+    }
+  }
+}

src/pages/Compare.tsx

@@ -0,0 +1,44 @@
+import cx from 'clsx';
+import { useState } from 'react';
+import { ColorPicker } from '../components/ColorPicker';
+import { ScrollArea } from '../components/ScrollArea';
+import { HCTCompare } from '../page-components/color-compare/HCTCompare';
+import { HSLCompare } from '../page-components/color-compare/HSLCompare';
+import { OklchCompare } from '../page-components/color-compare/OKLCHCompare';
+import { RGBCompare } from '../page-components/color-compare/RGBCompare';
+import styles from './Compare.module.css';
+
+export function ColorCompare() {
+  const [basicColor, setBasicColor] = useState('000000');
+  const [compareColor, setCompareColor] = useState('000000');
+
+  return (
+    <div className={cx('workspace', styles.compare_workspace)}>
+      <header>
+        <h3>Color Compare</h3>
+        <p>
+          Compare the properties of two colors and find the associated patterns of color change.
+        </p>
+      </header>
+      <ScrollArea enableY>
+        <div className={styles.compare_content}>
+          <div className={styles.compare_column}>
+            <h5>Basic Color</h5>
+            <ColorPicker color={basicColor} onSelect={setBasicColor} />
+          </div>
+          <div className={styles.compare_column}>
+            <h5>Compare Color</h5>
+            <ColorPicker color={compareColor} onSelect={setCompareColor} />
+          </div>
+          <div className={styles.compare_column}>
+            <h5>Compare Result</h5>
+            <RGBCompare basic={basicColor} compare={compareColor} />
+            <HSLCompare basic={basicColor} compare={compareColor} />
+            <HCTCompare basic={basicColor} compare={compareColor} />
+            <OklchCompare basic={basicColor} compare={compareColor} />
+          </div>
+        </div>
+      </ScrollArea>
+    </div>
+  );
+}