diff --git a/src/components/ui/ColorSwatch.tsx b/src/components/ui/ColorSwatch.tsx
new file mode 100644
index 0000000..72b25cd
--- /dev/null
+++ b/src/components/ui/ColorSwatch.tsx
@@ -0,0 +1,33 @@
+interface Props {
+  color: string | null; selected: boolean;
+  onClick: () => void; isRainbow?: boolean;
+}
+
+export function ColorSwatch({ color, selected, onClick, isRainbow }: Props) {
+  const isTransparent = color === null && !isRainbow;
+  return (
+    <button
+      onClick={onClick}
+      className="relative w-9 h-9 rounded-full flex-shrink-0 cursor-pointer transition-transform duration-100 hover:scale-110 focus:outline-none"
+      style={{
+        ...(isRainbow
+          ? { background: 'conic-gradient(red,yellow,lime,cyan,blue,magenta,red)' }
+          : isTransparent
+          ? { background: 'var(--bg-elevated)', border: '2px dashed var(--border-hover)' }
+          : { background: color! }),
+        ...(selected ? { outline: '2px solid #7C6FE0', outlineOffset: '2px' } : {}),
+      }}
+      title={isTransparent ? 'Default' : isRainbow ? 'Rainbow' : color!}
+    >
+      {selected && (
+        <span className="absolute inset-0 flex items-center justify-center">
+          <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
+            <path d="M2 7L5.5 10.5L12 3.5"
+              stroke={isTransparent ? '#7C6FE0' : 'white'}
+              strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
+          </svg>
+        </span>
+      )}
+    </button>
+  );
+}