ColorPicker
v1.0.1NewUpdated 18 Jul 2026Dependency-free HSV color picker with a 2D saturation/brightness area, hue slider, optional alpha slider (checkerboard), hex + RGB(A) inputs, preset swatches and an eyedropper button when the browser supports window.EyeD
Preview
Live · 11 stories▸Why this is recommendedcolorcolourpickerswatch+6
The default, out-of-the-box ColorPicker.
- ✓Brand / theme colour settings
- ✓Invoice or label template colours
- ✓Tag and calendar colour assignment
- ✓Chart series colour overrides
- 2D saturation/brightness area with pointer drag + arrow keys
- Hue slider (0–360°)
- Optional alpha slider with checkerboard track
- Hex + R/G/B (+ A) inputs with draft-and-commit editing
- Preset swatches with accessible labels + aria-pressed
- Eyedropper (feature-detected, SSR-safe)
- Inline panel or popover swatch trigger
- Controlled + uncontrolled (hex in, hex/rgba out)
- Full keyboard operability, polite value announcements
- Sizes sm / md / lg
- i18n: labels prop overrides every built-in string (slider aria + valuetext templates, captions, announcements); numbers format via LocaleProvider
- ✕Choosing from a small fixed palette only (render preset swatch buttons instead)
- ✕Gradient editing
Install
Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.
Usage
Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.
Props
valueControlled colour — hex or rgba() string
—defaultValueInitial colour (uncontrolled)
—onValueChangeEmits hex, or rgba() when alpha < 1
—variantInline panel or swatch button + popover
—sizePanel / trigger sizing
—showAlphaShow alpha slider + A input
—presetsPreset swatches (value + optional label)
—showEyeDropperHide the eyedropper even when supported
—disabledDisable all controls
—labelsOverride every built-in UI string — slider names + valuetext templates, input captions, eyedropper, live announcement (i18n). Merged over DEFAULT_COLOR_PICKER_LABELS.
—