Most forms require color selection but reinventing the wheel means baking hex input, live preview swatches, preset menus, and keyboard accessibility from scratch. Without a built-in primitive, teams copy-paste partial solutions, miss a11y requirements, or lock themselves into a single picker library that bleeds dependencies across the entire app.

ColorPicker is a controlled component with value, defaultValue, and onChange callback. It pairs a visual color swatch button with the selected hex value displayed as uppercase text. Supports presets (array of hex strings), size variants (sm/md/lg), variant options (outline/filled), and disabled state. The root element carries data-react-fancy-color-picker for stable agent targeting.

Import from @particle-academy/react-fancy, then render <ColorPicker value={color} onChange={setColor} presets={["#3b82f6", "#ef4444"]} size="md" />. Click the swatch to open the native color picker; agents read/write the color via the stable data-react-fancy-color-picker handle and the hex value in the onChange callback.