Color picker
@xui/color-pickerA color picker — the swatch trigger opens a panel with a saturation/value square, hue slider, optional alpha slider, a channel input row and preset swatches. value is a two-way bindable hex string; the input row switches between HEX, HSL and LCH via the format selector.
Install
pnpm add @xui/color-picker Add the barrel to a standalone component's imports:
import { XuiColorPickerImports } from '@xui/color-picker';
@Component({
imports: [XuiColorPickerImports],
// …
})Examples
Basic
Loading preview…
<div class="flex flex-col gap-4">
<xui-color-picker [(value)]="color" [presets]="['#f5222d','#fa8c16','#52c41a','#1677ff','#722ed1']" />
<div class="flex items-center gap-2">
<span class="border-border h-8 w-16 rounded border" [style.background]="color"></span>
<span class="text-foreground-muted text-sm">{{ color }}</span>
</div>
</div>With alpha
Loading preview…
<div class="flex flex-col gap-4">
<xui-color-picker [(value)]="color" showAlpha />
<span class="text-foreground-muted text-sm">{{ color }}</span>
</div>Input formats
Loading preview…
<div class="flex gap-8">
<div class="flex flex-col gap-2">
<span class="text-foreground text-sm font-medium">HEX</span>
<xui-color-picker [(value)]="hexColor" format="hex" />
</div>
<div class="flex flex-col gap-2">
<span class="text-foreground text-sm font-medium">HSL</span>
<xui-color-picker [(value)]="hslColor" format="hsl" />
</div>
<div class="flex flex-col gap-2">
<span class="text-foreground text-sm font-medium">LCH</span>
<xui-color-picker [(value)]="lchColor" format="lch" />
</div>
</div>API
A color picker: a swatch trigger opens a panel with a saturation/value square, a hue slider, an optional alpha slider, a hex field and preset swatches. value is a two-way bindable hex string (#RRGGBB / #RRGGBBAA).
Inputs
classClassValueExtra classes, merged into the component's own rather than replacing them.''valuestringThe selected colour as a hex string — #RRGGBB, or #RRGGBBAA when showAlpha is on. Two-way bindable with [(value)].'#1677FF'showAlphabooleanAdd an opacity slider and carry the alpha channel in value.falsedisabledbooleanBlock interaction and dim the trigger. The panel cannot be opened.falsepresetsstring[]Hex colours offered as one-click swatches under the picker. Empty hides the row.[]formatXuiColorFormatWhich channel model the input row edits: hex, hsl or lch. Two-way bindable.'hex'