The iOS 26 system color picker: Grid, Spectrum and Sliders, an Opacity slider and saved colors, and the color well that opens it in a popover or, on a phone, a sheet.

import { ColorPicker, ColorWell } from "@plexui/vue/components/ColorPicker";

A color well shows a color and opens the system color picker, where people choose a color from a grid, a spectrum or sliders, set its opacity and save colors they use again, as in iOS 26. Use ColorWell for a setting that is a color; use ColorPicker on its own to put the picker in a surface of your own.

Examples

Color well

Sizes and states

Picker

Opacity

#be38f3

Without opacity

Red

Green

Blue

Hex Color #

API

ColorWell

Prop	Type	Default	Description
`value`	`string \| null`	—	The controlled color, `#rrggbb` or `#rrggbbaa`; bind with v-model:value. `null` shows the well with no color
`default-value`	`string \| null`	`null`	The color when it is initially rendered
`size`	`"sm" \| "lg"`	`"sm"`	28px or 36px
`title`	`string`	`"Colors"`	The title of the picker
`supports-eyedropper`	`boolean`	`true`	Shows the eyedropper where the browser has the EyeDropper API
`disabled`	`boolean`	`false`	Prevents opening the picker
`name`	`string`	—	Submits the color with the owning form
`aria-label`	`string`	`"Color"`	Accessible name of the well
`aria-labelledby`	`string`	—	The `id` of the visible label of the well

The well also takes the picker props supports-alpha, mode, default-mode, swatches and default-swatches.

Events: update:value and change with the color the picker chose; update:mode and modeChange, update:swatches and swatchesChange from the picker.

ColorPicker

Prop	Type	Default	Description
`value`	`string`	—	The controlled color, `#rrggbb` or `#rrggbbaa`; bind with v-model:value
`default-value`	`string`	`"#000000"`	The color when it is initially rendered
`supports-alpha`	`boolean`	`true`	Shows the Opacity slider
`mode`	`"grid" \| "spectrum" \| "sliders"`	—	The controlled way to choose a color; bind with v-model:mode
`default-mode`	`"grid" \| "spectrum" \| "sliders"`	`"grid"`	The way to choose a color when it is initially rendered
`swatches`	`string[]`	—	The controlled saved colors; bind with v-model:swatches
`default-swatches`	`string[]`	`[]`	The saved colors when it is initially rendered
`aria-label`	`string`	`"Colors"`	Accessible name of the picker

Events: update:value and change with the next color, #rrggbb, or #rrggbbaa when it is not opaque; update:mode and modeChange when another way is chosen; update:swatches and swatchesChange after Add saves the current color or Delete removes one.

The well is a button, described by its color. In the picker, Grid and the saved colors are radio groups: the arrow keys move and choose, Home and End go to the ends of a row in Grid and to the first and last saved color. Spectrum is a slider: Up and Down change the hue, Left and Right the lightness, by 1%, or 10% with Shift or Page Up and Page Down. The Opacity and channel sliders are sliders, and their fields take a typed value on Enter or when they lose focus.

Styling

ColorPicker and ColorWell read these component tokens. Override them at any scope to restyle them:

--color-picker-width: the picker's column (default 264px, the full width of the sheet on a phone)
--color-picker-body-radius: the corner of the grid and the spectrum (default var(--radius-xl), 18px on a phone)
--color-picker-selection-color: the ring of the selected cell, swatch, knob and loupe (default #fff)
--color-picker-track-height and --color-picker-knob-size: the sliders (default 28px and 24px, 40px and 36px on a phone)
--color-picker-field-background: the fields and Add (default var(--color-background-secondary-soft-alpha), var(--alpha-12) on a phone)
--color-picker-separator-color: the line over the saved colors (default var(--color-border), var(--alpha-25) on a phone)
--color-picker-swatch-size: a saved color (default 24px, 30px on a phone)
--color-well-size-sm and --color-well-size-lg: the well (default 28px and 36px)
--color-well-rainbow: the ring of the well (the kit's angular gradient)

Color Picker