ColorPicker
colorpickerSelects colors through saturation and hue controls with HEX, RGB, or HSL output.
Usage
Basic usage
Drag and drop color palette + text input, use defaultValue as the initial color if not controlled.
tsx
<ColorPicker defaultValue="#3b82f6" />Output format
defaultFormat determines the callback and input box format: hex / rgb / hsl.
tsx
<>
<ColorPicker defaultValue="#22c55e" defaultFormat="rgb" />
<ColorPicker defaultValue="#8b5cf6" defaultFormat="hsl" />
</>Simplification: Hide switcher/input box
showFormatSwitcher / showInput Turn off non-essential parts, leaving only the color plate.
tsx
<>
<ColorPicker defaultValue="#ef4444" showFormatSwitcher={false} />
<ColorPicker defaultValue="#06b6d4" showInput={false} />
</>Disabled
disabled Overlay + Shield interaction.
tsx
<ColorPicker defaultValue="#3b82f6" disabled />When to use
Use ColorPicker when users need to choose any color from a saturation panel and switch output among HEX, RGB, and HSL. For a small set of presets, use the lighter ColorSwatchPicker.
Import
ts
import { ColorPicker, parseColor, rgbToHex, rgbToHsl, formatColor } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| value | string | — | Controlled color values. Accepts hex / rgb() / hsl() strings, and the internal unified specification is that hex is the single source of truth. |
| defaultValue | string | "#3b82f6" | uncontrolled initial value |
| format | "hex" | "rgb" | "hsl" | — | Controlled output/display format, input will enter the format controlled mode |
| defaultFormat | "hex" | "rgb" | "hsl" | "hex" | uncontrolled initial format |
| disabled | boolean | false | Disabled: Overlay + Shield interaction |
| showInput | boolean | true | Whether to display text input |
| showFormatSwitcher | boolean | true | Whether to display the HEX/RGB/HSL format switcher |
| className | string | — | Additional class name for the outer shell. |
Events
| Event | Type | Description |
|---|---|---|
| onValueChange | (value: string) => void | Change callback, the parameter is a string of currently selected format; switching formats will also trigger |
| onFormatChange | (format: ColorFormat) => void | Format switching callback |
Usage guidelines
onValueChangereturns a string in the active format (hex, rgb, or hsl), and changing the format also emits a value. Do not assume callbacks always return hex. Hex remains the internal source of truth.- A controlled
valuemay be any supported hex,rgb(), orhsl()string. The component normalizes it to hex for rendering and converts it back to the selected format when emitting changes.
Related
SecretField · Combobox · Listbox · Mentions · InputOTP · Rating
Playground
#3b82f6<ColorPicker defaultValue="#3b82f6" />