Color
ColorPicker picks any color: a saturation / brightness area, hue and opacity bars, and HEX / RGB / HSL inputs.
swatches shows preset colors with SwatchPicker, and the one matching the current color is marked. The value is hex ("#rrggbb", or "#rrggbbaa" with alpha below 100% opacity); onValueChange also gets rgb / hsl / hsv. The color tracks always run left → right, RTL included. Put it in a Popover for a color field.Import
Install from npm, copy the source into your project with @yugen-ui/cli or the shadcn CLI, or import directly when working in this repo.
// npm install yugen-uiimport { ColorPicker, parseColor, type ColorPickerChangeData } from "yugen-ui";Variants
Each tile is a standalone example: hover to copy, or press Code to see the source.
Opacity (alpha)
Adds an opacity bar and input; the value becomes 8-digit hex.
In a Popover
A button showing the current color opens the ColorPicker.
Usage
- Add
swatcheswith your brand colors for quick, consistent picks. - Show the color code next to the button that opens the picker, not just a swatch.
- Check contrast when a color people pick is used for text.
- Don't use ColorPicker for a few fixed colors. Use SwatchPicker.
- Don't turn on
alphawhere the color can't be transparent.
Props
| Prop · Type | Default | Description |
|---|---|---|
| value / defaultValuestring | Default: — | Selected color: hex, rgb() or hsl(). defaultValue is black by default. |
| onValueChange(value: string, data: ColorPickerChangeData) => void | Default: — | value is hex; data holds hex, rgb, hsl and hsv. |
| alphaboolean | Default: false | Shows the opacity bar and input. |
| swatches(string | { color: string; label?: string })[] | Default: — | Preset colors, shown with SwatchPicker. |
| defaultFormat"hex" | "rgb" | "hsl" | Default: "hex" | Initial format of the inputs. |
| eyeDropperboolean | Default: true | Button that picks a color from the screen, where the browser supports it. |
| disabledboolean | Default: false | Disables the whole picker. |
| refRef<HTMLDivElement> | Default: — | Points to the outer element. |
| parseColor | Default: — | Reads hex, rgb() and hsl() into { r, g, b, a }. |
Messages
Text built into the component: labels, aria-labels, screen reader announcements.
English by default. Change it with the messages prop of YugenProvider, by the namespace below; messagesVi has the Vietnamese set. See Interface language.
messages.colorPicker
| Key · Type | Default (English) | messagesVi |
|---|---|---|
| areastring aria-label của vùng chọn độ bão hoà / độ sáng. | Default (English)"Saturation and brightness" | messagesVi"Độ bão hoà và độ sáng" |
| areaValue(saturation: number, brightness: number) => string Giá trị đọc cho trình đọc màn hình (phần trăm). | Default (English)(saturation, brightness) => `Saturation ${saturation}%, brightness ${brightness}%` | messagesVi(saturation, brightness) => `Độ bão hoà ${saturation}%, độ sáng ${brightness}%` |
| huestring | Default (English)"Hue" | messagesVi"Sắc độ" |
| alphastring Thanh và ô độ đục (alpha). | Default (English)"Opacity" | messagesVi"Độ đục" |
| formatstring aria-label ô chọn định dạng (HEX / RGB / HSL). | Default (English)"Color format" | messagesVi"Định dạng màu" |
| hexstring | Default (English)"Hex" | messagesVi"Hex" |
| redstring | Default (English)"Red" | messagesVi"Đỏ" |
| greenstring | Default (English)"Green" | messagesVi"Xanh lá" |
| bluestring | Default (English)"Blue" | messagesVi"Xanh dương" |
| saturationstring | Default (English)"Saturation" | messagesVi"Bão hoà" |
| lightnessstring | Default (English)"Lightness" | messagesVi"Độ sáng" |
| eyeDropperstring Nút lấy màu trên màn hình (EyeDropper). | Default (English)"Pick a color from the screen" | messagesVi"Lấy màu trên màn hình" |
| swatchesstring Nhãn nhóm màu có sẵn ( | Default (English)"Preset colors" | messagesVi"Màu có sẵn" |