基本完成ColorPicker组件的功能。

src/components/ColorPicker.module.css

@@ -0,0 +1,19 @@
+@layer components {
+  .color_picker {
+    max-width: calc(var(--spacing) * 125);
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    gap: var(--spacing-m);
+    .color_preview {
+      aspect-ratio: 4 / 1;
+    }
+    .color_code {
+      padding: var(--spacing-s) var(--spacing-xs);
+      text-align: right;
+      font-size: var(--font-size-xs);
+      line-height: var(--font-size-xs);
+      text-transform: uppercase;
+    }
+  }
+}

src/components/ColorPicker.tsx

@@ -0,0 +1,32 @@
+import { isEqual } from 'lodash-es';
+import { useState } from 'react';
+import styles from './ColorPicker.module.css';
+import { HSegmentedControl } from './HSegmentedControl';
+import { HslAssemble } from './HslAsssemble';
+import { RGBAssemble } from './RGBAssemble';
+
+export function ColorPicker() {
+  const [pickMode, setMode] = useState<'rgb' | 'hsl' | 'oklch'>('rgb');
+  const [selectedColor, setSelectedColor] = useState<string>('000000');
+
+  return (
+    <div className={styles.color_picker}>
+      <div className={styles.color_preview} style={{ backgroundColor: `#${selectedColor}` }} />
+      <div className={styles.color_code}>#{selectedColor}</div>
+      <HSegmentedControl
+        options={[
+          { label: 'RGB', value: 'rgb' },
+          { label: 'HSL', value: 'hsl' },
+        ]}
+        value={pickMode}
+        onChange={(value) => setMode(value as 'rgb' | 'hsl' | 'oklch')}
+      />
+      {isEqual(pickMode, 'rgb') && (
+        <RGBAssemble color={selectedColor} onChange={(c) => setSelectedColor(c)} />
+      )}
+      {isEqual(pickMode, 'hsl') && (
+        <HslAssemble color={selectedColor} onChange={(c) => setSelectedColor(c)} />
+      )}
+    </div>
+  );
+}