525

Color Picker

A composable color picker component.

Basic

The <ColorPicker/> component is built from small parts so you only render what you need. The sliders build on top of the bits-ui <Slider/> component.

Installation

Usage

Composition

Use the following composition to build a ColorPicker:

FormatSelect, ChannelInputs and AlphaInput are optional.

Popover

Wrap a Popover with <ColorPicker.Root/> and put the parts in <Popover.Content/>, so the picker keeps its state while the popover is closed. The trigger here paints its swatch from value, so the select leaves out hsb, which isn't a CSS color.

This example also adds a <ColorPicker.FormatSelect/> and joins <ColorPicker.ChannelInputs/> and <ColorPicker.AlphaInput/> into one row with the Button Group component. ChannelInputs shows one field per channel for rgb, hsl and hsb, and a single text input for hex. The grid-cols-4 class gives every number field the same width, and in a grid the hex input spans the three channel columns on its own.

While an AlphaInput is shown, the hex input leaves the alpha out. Typing a color without an alpha (e.g. #ff0000) keeps the current alpha; typing one with an alpha (e.g. #ff000080) sets it.

Formats

value accepts hex, rgb(), hsl() or hsb() and is written back in the chosen format. format is bindable, so a <ColorPicker.FormatSelect/> can change it. Pass formats to the select to offer fewer options.

hsb() isn't a CSS color, so browsers ignore it in a style. Use hex, rgb or hsl when you put value straight into CSS.

Disabled

API Reference

ColorPicker.

Root

Holds the color state and provides it to the other parts.

PropTypeDefault
ref? $bindable
HTMLDivElement null
value? $bindable
string #000000
format? $bindable
enum hex
disabled?
boolean false
children?
Snippet -
ColorPicker.

Area

The saturation and brightness square. Screen readers get one slider per axis. Arrow keys move by 1 (Shift by 10), Home/End set saturation, PageUp/PageDown change brightness by 10.

PropTypeDefault
ref? $bindable
HTMLDivElement null
class?
string -
label?
string Saturation and brightness
saturationLabel?
string Saturation
brightnessLabel?
string Brightness
getValueText?
function -
ColorPicker.

HueSlider

A slider for the hue, from 0 to 360.

PropTypeDefault
ref? $bindable
HTMLSpanElement null
class?
string -
thumbLabel?
string Hue
ColorPicker.

AlphaSlider

A slider for the transparency, from 0 to 100%.

PropTypeDefault
ref? $bindable
HTMLSpanElement null
class?
string -
thumbLabel?
string Alpha
ColorPicker.

Input

A text input for the color. Applies on Enter or blur, reverts invalid values and cancels on Escape. While an `AlphaInput` is shown it leaves the alpha out, and a typed color without an alpha keeps the current one.

PropTypeDefault
ref? $bindable
HTMLInputElement null
class?
string -
ColorPicker.

FormatSelect

A select that changes the bound `format` of the root (HEX, RGB, HSL or HSB).

PropTypeDefault
ref? $bindable
HTMLButtonElement null
class?
string -
formats?
ColorFormat[] ['hex', 'rgb', 'hsl', 'hsb']
ColorPicker.

AlphaInput

A text input for the transparency as a percentage. Arrow keys change it by 1 (Shift by 10). Applies on Enter or blur, reverts invalid values and cancels on Escape.

PropTypeDefault
ref? $bindable
HTMLInputElement null
class?
string -
ColorPicker.

ChannelInputs

One number input per channel of the current format (e.g. red, green and blue for rgb), or a single `Input` for hex. Renders no wrapper, so the inputs can be joined with a Button Group.

PropTypeDefault
class?
string -
getLabel?
function -