Color Picker

Edit an exact color through native, text, channel, and spatial controls.

Usage

Native

Use the browser color input while keeping the same exact color value as the text controls.

Use the browser color input while keeping the same exact color value as the text controls.

Accent color

Hue

HEX

System

#5b6df6

Alpha

Edit the alpha channel together with the visible color channels.

Edit the alpha channel together with the visible color channels.

Accent color

Hue

Alpha

HEX

System

#26c6a080

Controlled

Let the parent own the current value and apply accepted changes back to the component.

Let the parent own the current value and apply accepted changes back to the component.

Accent color

Hue

HEX

System

#5b6df6

API

Vue package: @sectile/vue/color-picker

Components

• ColorPickerRoot
• ColorPickerLabel
• ColorPickerControl
• ColorPickerNativeInput
• ColorPickerTextInput
• ColorPickerChannelInput
• ColorPickerCoordinateInput
• ColorPickerCoordinateSlider
• ColorPickerArea
• ColorPickerAreaThumb
• ColorPickerHueSlider
• ColorPickerAlphaSlider
• ColorPickerSwatch
• ColorPickerValueText
• ColorPickerFormatTrigger

Props

ColorPickerRootProps

allowAlpha

TypebooleanDefaulttrue

Whether the color value may include transparency.

alphaStep

TypenumberDefault17

Increment applied when the alpha channel changes.

as

TypePrimitiveAsDefault'div'

Element or component rendered for this part.

asChild

TypebooleanDefaultfalse

Whether to merge this part into its single child instead of rendering a wrapper.

channelStep

TypenumberDefault1

Increment applied when a color channel changes.

defaultDraft

Typestring | nullDefaultnull

Editable draft used for uncontrolled initial state.

defaultFormat

TypeColorFormatDefault'hex'

Initial uncontrolled color format.

defaultValue

TypestringDefault'#5b6df6'

Initial value used when the component owns its state.

disabled

TypebooleanDefaultfalse

Whether interaction is unavailable.

draft

Typestring | nullDefaultundefined

Controlled editable draft before commit.

form

TypestringDefaultundefined

ID of the native form associated with the control.

format

TypeColorFormatDefaultundefined

Controlled color format.

label

TypestringDefaultundefined

Accessible name announced for the control.

modelValue

TypestringDefaultundefined

Current value when state is controlled by the parent.

name

TypestringDefaultundefined

Name used for native form submission.

readonly

TypebooleanDefaultfalse

Whether the value can be inspected but not changed.

required

TypebooleanDefaultfalse

Whether the control must contain a valid value before submission.

ColorPickerPartProps

as

TypePrimitiveAsDefaultVaries by part

Element or component rendered for this part.

asChild

TypebooleanDefaultfalse

Whether to merge this part into its single child instead of rendering a wrapper.

ColorPickerChannelInputProps

as

TypePrimitiveAsDefault'input'

Element or component rendered for this part.

asChild

TypebooleanDefaultfalse

Whether to merge this part into its single child instead of rendering a wrapper.

channel

TypeColorChannelDefaultRequired

Color channel edited by this input.

ColorPickerFormatTriggerProps

as

TypePrimitiveAsDefault'button'

Element or component rendered for this part.

asChild

TypebooleanDefaultfalse

Whether to merge this part into its single child instead of rendering a wrapper.

format

TypeColorFormatDefaultRequired

Controlled color format.

ColorPickerCoordinateInputProps

as

TypePrimitiveAsDefaultundefined

Element or component rendered for this part.

asChild

TypebooleanDefaultundefined

Whether to merge this part into its single child instead of rendering a wrapper.

coordinate

TypeColorCoordinateDefaultRequired

Coordinate edited within the selected color model.

format

TypeColorModelDefaultRequired

Controlled color format.

ColorPickerCoordinateSliderProps

as

TypePrimitiveAsDefaultundefined

Element or component rendered for this part.

asChild

TypebooleanDefaultundefined

Whether to merge this part into its single child instead of rendering a wrapper.

coordinate

TypeColorCoordinateDefaultRequired

Coordinate edited within the selected color model.

format

TypeColorModelDefaultRequired

Controlled color format.

Slots

ColorPickerRootSlotProps

area

TypeColorAreaValue

Current two-dimensional color area state.

channel

TypeColorChannel

Current color channel.

coordinates

Typereadonly ColorCoordinateValue[]

Current coordinates in the active color model.

cssColor

Typestring

Current color serialized for CSS.

disabled

Typeboolean

Whether interaction is unavailable.

draft

Typestring | null

Current uncommitted input text.

format

TypeColorFormat

Current color format.

readonly

Typeboolean

Whether the value can be inspected but not changed.

text

Typestring

Formatted text for the current value.

value

TypeColorValue

Current value exposed by this contract.

Events

ColorPickerRoot

update:draft

Payloadstring | null

Emitted when the editable draft changes.

update:format

PayloadColorFormat

Emitted when the requested color format changes.

update:modelValue

Payloadstring

Emitted when the component requests a new controlled value.

Other types

ColorPickerValueChangeHandler

type ColorPickerValueChangeHandler = (value: string) => void

ColorPickerDraftChangeHandler

type ColorPickerDraftChangeHandler = (value: string | null) => void

ColorPickerFormatChangeHandler

type ColorPickerFormatChangeHandler = (value: ColorFormat) => void

ColorAreaValue

Name	Type	Required
x	number	Yes
y	number	Yes
hue	number	Yes
alpha	number	Yes

ColorChannel

type ColorChannel = 'red' | 'green' | 'blue' | 'alpha'

ColorCoordinate

type ColorCoordinate = ColorChannel | 'hue' | 'saturation' | 'lightness' | 'value' | 'cyan' | 'magenta' | 'yellow' | 'black' | 'chroma'

ColorCoordinateValue

Name	Type	Required
coordinate	ColorCoordinate	Yes
label	string	Yes
value	number	Yes
min	number	Yes
max	number	Yes
step	number	Yes
unit	'' | '%' | '°'	Yes

ColorFormat

type ColorFormat = 'hex' | 'rgb' | 'hsl' | 'hsv' | 'cmyk' | 'oklch'

ColorModel

type ColorModel = Exclude<ColorFormat, 'hex'>

ColorPickerPolicies

Name	Type	Required
allowAlpha	boolean	—
channelStep	number	—
alphaStep	number	—

ColorValue

type ColorValue = Rgba8

Parts

Shared scope: [data-scope="color-picker"]. Combine it with a part selector to keep styles local to this component.

Part	Selector	Role	Extra attributes
root	[data-part="root"]	Defines the component boundary and owns its composed parts.	—
label	[data-part="label"]	Labels the component control.	—
control	[data-part="control"]	Groups the primary interactive controls.	—
native-input	[data-part="native-input"]	Keeps the native form control available for submission and platform behavior.	—
text-input	[data-part="text-input"]	Accepts a formatted text representation of the value.	—
channel-input	[data-part="channel-input"]	Edits one color channel numerically.	—
coordinate-input	[data-part="coordinate-input"]	Edits one coordinate of the current value.	—
coordinate-slider	[data-part="coordinate-slider"]	Adjusts one coordinate over a bounded range.	—
area	[data-part="area"]	Provides the two-dimensional interaction surface.	—
area-thumb	[data-part="area-thumb"]	Marks and controls the selected point in the area.	—
hue-slider	[data-part="hue-slider"]	Adjusts the color hue.	—
alpha-slider	[data-part="alpha-slider"]	Adjusts color opacity.	—
swatch	[data-part="swatch"]	Previews the selected color.	—
value-text	[data-part="value-text"]	Displays the formatted value as text.	—
format-trigger	[data-part="format-trigger"]	Changes the active value format.	—

Keyboard interaction

Key	Behavior
Arrow keys	Adjust the active color coordinate or slider.
Enter	Commit a typed color value.
Escape	Cancel the typed draft and restore the accepted color.

Accessibility

Text inputs and sliders expose labels, ranges, current values, and channel purpose without relying on color alone.