Studio
2

Color Picker

Installation

pnpm dlx @mielui/svelte add color-picker

Usage

Compose the Color Picker from its Root , Trigger , and Content parts:

The hex field and every color channel have accessible names. Channel sliders provide a keyboard alternative to the pointer plane. Set the root label to name the trigger.

Hue adjustments preserve zero saturation. Increase saturation to reveal the selected hue.

import * as ColorPicker from '$lib/mielui/components/color-picker';

let value = $state('#5e6ad2');

<ColorPicker.Root value={value} onValueChange={(v) => (value = v)} format="hsl">
	<ColorPicker.Trigger />
	<ColorPicker.Content />
</ColorPicker.Root>

Examples

Custom composition

Content defaults to Plane, Preview, Hue, HexInput, Channels, and Presets. Supply children to omit, reorder, or style those same parts. Every part reads one shared color state from Root. Here, presets come first and the plane and hue strip are omitted. Channels uses the Root format; Presets uses its options.

Default

Channel formats

With preset swatches

Glass surface

Set surface="glass" on ColorPicker.Content for a translucent background with blur. Solid remains the default. The glass surface keeps an opaque fallback when backdrop filtering is unavailable and respects reduced-transparency preferences.

Keep edits connected

Bind value when another part of the form needs the selected color. The custom composition places presets before the channel controls; the trigger, preview, and inputs still share the same value. Give each picker a distinct label when several appear together.

API reference

ColorPicker.Root

Controls color picker state.

Prop Type Default
label string | undefined —
value Bindable string | undefined ''
onValueChange ((value: string) => void) | undefined —
options ColorOption[] | undefined []
format ColorFormat | undefined 'hsl'
children Snippet<[]> | undefined —
class string | undefined —

ColorPicker.Channels

ColorPicker.Content

Renders color selection controls.

Prop Type Default
class (string & (ClassValue | null)) | undefined —
tabindex number | undefined —
role "none" | "alertdialog" | "dialog" | "listbox" | "menu" | undefined —
surface "solid" | "glass" | undefined —
surfaceClass string | undefined

Classes for the inset surface (where children live) — padding, layout, background overrides. The `class` prop styles the outer Panel frame.

 —
allowClickOutside boolean | undefined —
dismissLayer boolean | undefined

Render the full-viewport dismiss layer under the panel while open. Defaults to `true`. Set to `false` for triggers that must stay clickable while open (e.g. an input-style combobox trigger); outside pointer dismissal still applies via `allowClickOutside`.

 —
portal boolean | undefined —
refElement VirtualElement | undefined —
focusTrap boolean | undefined

Trap Tab focus inside the panel while open. Defaults to `true`.

 —
lockScroll boolean | undefined

Lock document scrolling while the panel is open. Defaults to `true`.

 —
children Snippet<[]> | undefined —

ColorPicker.HexInput

ColorPicker.Hue

ColorPicker.Plane

ColorPicker.Presets

ColorPicker.Preview

ColorPicker.Trigger

Opens the color picker.

Prop Type Default
variant "secondary" | "ghost" | "outline" | undefined

Trigger style -- matches Button variants. Defaults to outlined.

 'outline'
class string | undefined —