A color picker with a saturation and brightness pad, hue and opacity sliders, a HEX, RGB and HSL field and swatches. It shows the original next to the new color and grades contrast against your background with WCAG AA and AAA.
npx shadcn@latest add https://hyperblur.dev/r/input-color-picker.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/input-color-picker.tsx.
import { InputColorPicker } from "@/components/hyperblur/input-color-picker"
<InputColorPicker defaultValue="#7c5cff" contrastWith="#ffffff" onChange={(hex) => setBrand(hex)} />| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | "Brand color" | Label above the picker. Pass an empty string to hide it. |
| value | string | Controlled color as hex, rgb() or hsl(). Pair with onChange. | |
| defaultValue | string | "#2f7bff" | Initial color when uncontrolled. |
| onChange | (hex: string) => void | Called with the color as #rrggbb, or #rrggbbaa when opacity is below 100%. | |
| swatches | string[] | 8 colors | Preset colors under the field. |
| alpha | boolean | true | Show the opacity slider and include alpha in the output. |
| contrastWith | string | "#0a0a0a" | Background used for the contrast ratio and the Aa sample. |