Color Picker
Enhanced color picker component with multiple formats, smooth animations, and intuitive controls. Perfect for theme customization and design tools.
Pro features
What the Pro version adds to this component.
HSV Colour Field
Pick saturation and brightness on a two-dimensional field, with separate hue and opacity strips — far more precise than a single native swatch
Keyboard Operable
Arrow keys move one step, Shift ten, Home/End jump to the bounds. Each field is a labelled slider that announces its value to screen readers
Opacity Support
The alpha strip feeds the value back out: onChange emits #RRGGBBAA whenever opacity is below 100%, and plain #RRGGBB when fully opaque
Hex Input & Presets
Type a hex value directly, copy the current colour to the clipboard, reset to the initial value, or pick from a preset palette you define
Installation
Install via CLI
npx @moontra/moonui-cli add color-pickerUsage
Basic Usage
Pro Usage
Examples
Simple Swatch Picker
SimpleColorPicker renders a flat preset grid with no popover — the fastest choice when a small, fixed palette is enough
Gradient Picker
GradientPicker edits a start colour, an end colour and an angle together, and returns them as a single object
Basic Color Picker
Simple color picker with hex format.
Different Sizes and Shapes
Color pickers with various sizes and shapes.
Custom Presets & Opacity
Provide your own preset swatches, enable the opacity slider, and hide the copy button.
Color Palette
Grid of color pickers for creating palettes.
HSV Picker with Opacity
Saturation/brightness field, hue strip and an alpha strip. When opacity drops below 100%, onChange emits 8-digit hex (#RRGGBBAA).
Fully Keyboard Operable
Every field is reachable with Tab and driven by the arrow keys — hold Shift for ten steps, Home/End jump to the bounds. Each field exposes role="slider" with an aria-valuetext screen readers can announce.
Custom Presets, No Alpha
Swap the preset palette for your brand colours and hide the opacity strip when the output must stay fully opaque.