ColorPicker
Canvas-based colour selection with saturation/brightness gradient, hue strip, optional opacity slider, hex/RGB/HSL format tabs, and preset swatches.
Popup Mode (Default)
Click the trigger to open the picker panel.
Inline with Opacity
Rendered inline with opacity slider and HSL format.
Preset Swatches
Popup with a grid of preset brand colours.
Small Size
Compact variant in RGB format.
Live Preview (onInput)
Drag across the palette — the preview box updates in real time via onInput. The committed value updates on release via onChange.
Drag to preview
Label Option
Built-in label rendered above the picker.
Disabled Popup
Trigger shows cursor:not-allowed, click does nothing.
Disabled Inline
Entire picker at half opacity with no interactions.