Color Picker

Example

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: 10

class

string

Additional CSS classes to apply. Default: —

Property

rgb

oklab

okhsv

onchange

quickSelects

side

sideOffset

class