Documentation
Asgard
Getting started
Theming
Guides
Inputs & forms
Pickers
Data display
Layout & docking
Feedback & overlays
Navigation & chrome
Pickers
Choose a color, compact or full.
ColorPicker is a comprehensive color selection component with canvas picker, hue/alpha sliders, and swatch palettes.
Key features:
- Three modes:
simple(swatches),classic(canvas + sliders),advanced(harmony + contrast) - Format switching between HEX, RGB, and HSL
- Eyedropper tool, recent colors, and custom swatches
ColorButtoncompanion for toolbar/form integration
Loading preview…
When to use it
- A full color editor (inline ColorPicker): theme / brand / drawing tools
- An accent color in a settings row (ColorButton swatch + popover)
- Eyedropper sampling and recent-color history
- Color harmony suggestions (advanced mode)
Properties
| Prop | Type | Default | Description |
|---|---|---|---|
value | Color | — | The currently selected color as an internal HSLA Color type. |
onChange | (color: Color) => void | — | Callback fired when the selected color changes. The handler receives the new value directly, NOT a DOM event (write onChange={(v) => setX(v)}, not e.target.value). |
mode | 'simple' | 'classic' | 'advanced' | 'classic' | Controls the complexity of the picker UI. Simple shows swatches only; classic adds canvas and sliders; advanced adds harmony and contrast tools. |
format | 'hex' | 'rgb' | 'hsl' | 'hex' | The color format used for the text input display. |
showAlpha | boolean | true | Whether to show the alpha/opacity slider. |
showSwatches | boolean | true | Whether to display the color swatch palette. |
showEyedropper | boolean | true | Whether to show the eyedropper tool button for picking colors from the screen. |
showHarmony | boolean | false | When true, displays color harmony suggestions (complementary, triadic, etc.). |
Notes
- The Color type is an internal HSLA representation; use the provided utility functions to convert to/from hex and RGB.
- In advanced mode, harmony and contrast checker tools help ensure accessible color combinations.
- Recently selected colors are automatically persisted to localStorage and displayed in a recent colors row.
Presets