ColorPicker

Pick a color with an area, channel sliders, inputs, swatches and the eye dropper.

Popover

Type a hex value, or open the panel: drag the area and sliders, or use the arrow keys. formatTrigger adds a button beside the format select that steps through RGBA, HSLA and HSBA.

value: #3b82f6; open: false; changes: 0; ends: 0; format: rgba; outside: 0; focus outside: 0

Code

<ColorPicker value={state.accent} open={state.open} formatTrigger attrs={{ "aria-label": "Accent color" }}
             onValueChange={() => state.changes++} onValueChangeEnd={() => state.ends++} />

Usage

import { ColorPicker } from "@elements/ui/color-picker";

<ColorPicker value={theme.accent} attrs={{ "aria-label": "Accent color" }} />
<ColorPicker value={brush.color} inline swatches={["#ef4444", "#22c55e", "#3b82f6"]} />

Examples

Inline with swatches

inline renders the panel in the page. Swatches set the color; the checked one shows a mark. disabledSwatches turns single swatches off.

#22c55e

Code

<ColorPicker value={state.brush} inline swatches={SWATCHES} disabledSwatches={["#ec4899"]} />

Swatches only

closeOnSelect closes the popover when a swatch is picked; channelInputs={false} hides the inputs. openAutoFocus={false} leaves focus on the trigger when the panel opens.

#f97316

Code

<ColorPicker value={state.swatch} swatches={SWATCHES} closeOnSelect openAutoFocus={false} channelInputs={false} />

Value formats

valueFormat sets how value is written; format sets which channels the inputs show.

rgba(59, 130, 246, 1) / hsla(217, 91%, 60%, 1) / hsba(217, 76%, 96%, 1)

Code

<ColorPicker value={state.rgba} valueFormat="rgba" format="rgba" />
<ColorPicker value={state.hsla} valueFormat="hsla" format="hsla" />
<ColorPicker value={state.hsba} valueFormat="hsba" format="hsba" />

Swatch, grid and input options

swatchRespectAlpha={false} and valueSwatchRespectAlpha={false} draw the swatches without their alpha; gridSize sets the transparency grid's cell size; channelOrientation stacks the channel inputs.

#3b82f680

Code

<ColorPicker value={state.color} inline swatches={["#ef444480", "#22c55e80", "#3b82f680"]}
             swatchRespectAlpha={false} valueSwatchRespectAlpha={false}
             gridSize="4px" channelOrientation="vertical" formatSelect={false} formatTrigger />

Area and hue only

alpha, eyeDropper and channelInputs turn parts off.

Code

<ColorPicker value={state.plain} inline alpha={false} eyeDropper={false} channelInputs={false} />

Area channels

xChannel and yChannel pick what the area runs along: hue by saturation with a brightness slider, or red by green with a blue slider.

#3b82f6

#40a080

Code

<ColorPicker value={state.tint} inline xChannel="hue" yChannel="saturation" sliders={["brightness"]} />
<ColorPicker value={state.mix} inline format="rgba" xChannel="red" yChannel="green" sliders={["blue"]} />

Initial focus

initialFocus takes a selector inside the panel to focus when it opens: here the hex input, for typing a value straight away.

#8b5cf6

Code

<ColorPicker value={state.color} initialFocus=".color-picker-hex" />

Sliders only

sliders takes any channel. Red, green and blue sliders with their values, and the color as text.

#5dd016

Code

<ColorPicker value={state.rgb} inline format="rgba" area={false}
             sliders={["red", "green", "blue"]} sliderLabels valueText
             eyeDropper={false} channelInputs={false} />

Vertical sliders

orientation="vertical" stands the sliders up; ArrowUp raises a channel. valueTextFormat writes the text in another format.

hsla(258, 90%, 66%, 1)

Code

<ColorPicker value={state.levels} inline format="hsba" area={false} orientation="vertical"
             sliders={["hue", "saturation", "brightness", "alpha"]} sliderLabels
             valueText valueTextFormat="hsla" eyeDropper={false} channelInputs={false} />

Input only

trigger={false} leaves the control: the value swatch, the hex input and the eye dropper, with no panel.

Color

A hex value, such as #1e40af.

#eb5e41

Code

<Field label="Color" description="A hex value, such as #1e40af.">
  <ColorPicker value={state.typed} trigger={false} />
</Field>

Swatches, no area

area={false} and sliders={[]} leave a panel of swatches; valueText names the pick.

#eb5e41

Code

<ColorPicker value={state.label} inline area={false} sliders={[]} eyeDropper={false}
             channelInputs={false} valueText swatches={["red", "pink", "orange", "purple"]} />

Inside a dialog

The panel opens in the top layer above a modal dialog. The first Escape closes the panel, the second the dialog.

Code

<Dialog title="Choose a color" description="The picker opens above the dialog.">
  <Button slot="trigger">Open dialog</Button>
  <ColorPicker value={state.color} />
  <DialogFooter>
    <DialogClose><Button>Done</Button></DialogClose>
  </DialogFooter>
</Dialog>

Disabled, read-only and invalid

Neither disabled nor read-only changes the color. invalid marks the control, the input and the panel parts.

Code

<ColorPicker value={state.color} disabled />
<ColorPicker value={state.color} readonly />
<ColorPicker value={state.color} invalid />

In a form

name submits the value; reset restores it.

Code

<form onsubmit={(e) => save(e)}>
  <Field label="Brand color">
    <ColorPicker value={state.brand} name="brand" required />
  </Field>
  <Button type="reset">Reset</Button>
  <Button type="submit" variant="primary">Save</Button>
</form>

Right to left

Under rtl the area and sliders run right to left.

Code

<div dir="rtl"><ColorPicker value={state.color} inline /></div>

Reference ColorPicker in the manual Every part, attribute, slot, key and data attribute.