Color Picker

A hex color picker with HSL, RGB, or HSV channel controls and optional preset swatches.

Installation

Copy the command below and run it in your terminal.

bunx @sivir-ui/svelte add color-picker

Usage

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

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

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

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

Examples

Default

Pick a color

Channel formats

HSL

RGB

HSV

With preset swatches

Choose

Anatomy

ColorPicker.Root - Controls color picker state.

ColorPicker.Trigger - Opens the color picker.

ColorPicker.Content - Renders color selection controls.