Color Picker
Let people choose a brand color, a label color, or a chart series by eye, by hex, or from your presets.
Installation
You can add the color picker using our CLI or manually:
Dark mode ready - this component follows BoardUI semantic tokens automatically. Set up theme switching.
The CLI copies the component source (with its internal dependencies) into your project and installs any required npm packages.
npx boardui@latest add color-pickerUsing a shared UI package or custom import aliases? Configure your installation paths before running the CLI. Copy-paste examples use the default imports.
Color well
Where space is tight, ColorWell shows the color as a round swatch and opens the same editor in a popover. Size the swatch with wellClassName.
import { ColorWell } from "@/components/base/color-picker/color-picker";
<ColorWell aria-label="Bug color" value={color} onChange={setColor} swatches={presets} wellClassName="size-6"/>Opacity
showAlpha adds an opacity rail over a checkerboard, so a translucent color reads as translucent. Read the value back with color.getChannelValue("alpha"), or as CSS with color.toString("css").
const [color, setColor] = useState(parseColor("rgba(99, 102, 241, 0.6)"));
<ColorPicker value={color} onChange={setColor} showAlpha />Right-to-left
Inside DirectionProvider, the rails run from the right and the swatch moves to the right of the hex field, which stays left to right.
import { DirectionProvider } from "@/components/foundations/direction/direction";
<DirectionProvider locale="ar"> <ColorPicker defaultValue="#22c55e" /> <ColorWell aria-label="لون العلامة" defaultValue="#f97316" /></DirectionProvider>Keyboard and accessibility
Tab moves through the field, the hue rail, the opacity rail, the hex field, and the presets. Arrow keys nudge saturation and brightness in the field and the hue on the rail, and Shift with an arrow takes a bigger step. The hex field takes any CSS color and commits on Enter or when it loses focus. Each control is announced with its channel and value.