Color Picker
llms.txtExample
Inline Color Picker
Popover Color Picker
Usage
<!-- inline version --> <ColorPicker bind:rgb /> <!-- popover version --> <PopoverColorPicker bind:rgb />
Credits
- Adapted from svelte-color-select .
API Reference
ColorPicker
A full color picker with a saturation/value area, hue slider, and optional quick-select swatches. Supports RGB, OKLab, and OKHsv color spaces.
Property Type Description
rgb $bindable
object
The current color in RGB format (0-255). Default: —
oklab $bindable
object
The current color in OKLab format. Default: —
okhsv $bindable
object
The current color in OKHsv format. Default: —
onchange
function
Callback invoked when the color changes. Provides the color in all supported formats. Default: —
quickSelects $bindable
array
Quick-select color swatches displayed below the picker. Default:
[]class
string
Additional CSS classes to apply. Default: —
Property
rgb
oklab
okhsv
onchange
quickSelects
class
PopoverColorPicker
A color picker wrapped in a popover, triggered by a color swatch button.
Property Type Description
rgb $bindable
object
The current color in RGB format (0-255). Default: —
oklab $bindable
object
The current color in OKLab format. Default: —
okhsv $bindable
object
The current color in OKHsv format. Default: —
onchange
function
Callback invoked when the color changes. Default: —
quickSelects $bindable
array
Quick-select color swatches. Default:
[]side
enum
The preferred side of the trigger to render the popover. Default:
'bottom'sideOffset
number
The distance in pixels from the trigger. Default:
10class
string
Additional CSS classes to apply. Default: —
Property
rgb
oklab
okhsv
onchange
quickSelects
side
sideOffset
class