Color Picker
A colour picker with a saturation/value area, hue and alpha sliders, hex/rgb/hsl
inputs and preset swatches. Use variant="swatch"
for a predefined palette only.
Spectrum
html
| 1 | <nana-color-picker value="#3b82f6" format="hex" alpha></nana-color-picker> |
Input formats
format="hex"
format="rgb"
format="hsl"
Swatch only
html
| 1 | <nana-color-picker |
| 2 | variant="swatch" |
| 3 | value="#ef4444" |
| 4 | swatches="#ef4444,#f59e0b,#10b981,#3b82f6,#6366f1,#8b5cf6,#ec4899" |
| 5 | ></nana-color-picker> |
Live (read the value)
ts
| 1 | const picker = document.querySelector('nana-color-picker'); |
| 2 | picker.addEventListener('nana-change', (e) => { |
| 3 | document.body.style.setProperty('--brand', e.detail.value); |
| 4 | }); |
Import
ts
| 1 | import "@nana-tec/ui-components/color-picker"; |
Events
| Event | Detail |
|---|---|
nana-change | { value: string } |
Props
Attribute Type Default Description valuestring#3b82f6Current colour (hex; 8-digit when alpha < 1) formathex | rgb | hslhexWhich numeric inputs to show variantspectrum | swatchspectrumPicker layout alphabooleanfalseShow an opacity slider swatchesstringpresetComma-separated preset colours disabledbooleanfalseDisable interaction