Color Picker

A component for selecting and customizing colors.

Label

Anatomy

Usage

<script>
  import {ColorPicker} from 'ui-ingredients';
  import {DropperIcon} from '$lib/icons';

  let presets = [
    'hsl(10, 81%, 59%)',
    'hsl(60, 81%, 59%)',
    'hsl(100, 81%, 59%)',
    'hsl(175, 81%, 59%)',
    'hsl(190, 81%, 59%)',
    'hsl(205, 81%, 59%)',
    'hsl(220, 81%, 59%)',
    'hsl(250, 81%, 59%)',
    'hsl(280, 81%, 59%)',
    'hsl(350, 81%, 59%)',
  ];

  /** @type {import('ui-ingredients').Color} */
  let value = $state(ColorPicker.parse('red'));
</script>

<ColorPicker.Root
  {value}
  onValueChange={(detail) => {
    value = detail.value;
  }}
>
  {#snippet children(context)}
    <ColorPicker.Label>Label</ColorPicker.Label>
    <ColorPicker.Control>
      <ColorPicker.ChannelInput channel="hex" />
      <ColorPicker.Trigger>
        <ColorPicker.Swatch value={context.value} />
      </ColorPicker.Trigger>
    </ColorPicker.Control>

    <ColorPicker.Positioner>
      <ColorPicker.Content>
        <ColorPicker.Area>
          <ColorPicker.AreaBackground />
          <ColorPicker.AreaThumb />
        </ColorPicker.Area>

        <ColorPicker.EyeDropperTrigger>
          <DropperIcon />
        </ColorPicker.EyeDropperTrigger>

        <ColorPicker.ChannelSlider channel="hue">
          <ColorPicker.ChannelSliderTrack />
          <ColorPicker.ChannelSliderThumb />
        </ColorPicker.ChannelSlider>

        <ColorPicker.ChannelSlider channel="alpha">
          <ColorPicker.TransparencyGrid size="8px" />
          <ColorPicker.ChannelSliderTrack />
          <ColorPicker.ChannelSliderThumb />
        </ColorPicker.ChannelSlider>

        <ColorPicker.ChannelInput channel="hex" />
        <ColorPicker.ChannelInput channel="alpha" />

        <ColorPicker.SwatchGroup>
          {#each presets as color}
            <ColorPicker.SwatchTrigger value={color}>
              <ColorPicker.Swatch value={color} />
            </ColorPicker.SwatchTrigger>
          {/each}
        </ColorPicker.SwatchGroup>
      </ColorPicker.Content>
    </ColorPicker.Positioner>
  {/snippet}
</ColorPicker.Root>

API Reference

Root

Prop	Default	Description
`closeOnSelect`	`false`	`boolean` Whether to close the color picker when a swatch is selected
`defaultFormat`	`"rgba"`	`ColorFormat` The initial color format when rendered. Use when you don't need to control the color format of the color picker.
`defaultOpen`		`boolean` The initial open state of the color picker when rendered. Use when you don't need to control the open state of the color picker.
`defaultValue`	`#000000`	`Color` The initial color value when rendered. Use when you don't need to control the color value of the color picker.
`disabled`		`boolean` Whether the color picker is disabled
`format`		`ColorFormat` The controlled color format to use
`id`		`string` The unique identifier of the machine.
`ids`		`{ root?: string; control?: string; trigger?: string; label?: string; input?: string; hiddenInput?: string; content?: string; area?: string; areaGradient?: string; positioner?: string; formatSelect?: string; areaThumb?: string; channelInput(id: string)?: string; channelSliderTrack(id: ColorChannel)?: string; }` The ids of the elements in the color picker. Useful for composition.
`initialFocusEl`		`() => HTMLElement` The initial focus element when the color picker is opened.
`invalid`		`boolean` Whether the color picker is invalid
`keepMounted`		`boolean` Whether to keep the component mounted after exit.
`lazyMount`		`boolean` Whether to enable lazy mounting.
`name`		`string` The name for the form input
`onFocusOutside`		`(event: FocusOutsideEvent) => void` Function called when the focus is moved outside the component
`onFormatChange`		`(details: FormatChangeDetails) => void` Function called when the color format changes
`onInteractOutside`		`(event: InteractOutsideEvent) => void` Function called when an interaction happens outside the component
`onOpenChange`		`(details: OpenChangeDetails) => void` Handler that is called when the user opens or closes the color picker.
`onPointerDownOutside`		`(event: PointerDownOutsideEvent) => void` Function called when the pointer is pressed down outside the component
`onValueChange`		`(details: ValueChangeDetails) => void` Handler that is called when the value changes, as the user drags.
`onValueChangeEnd`		`(details: ValueChangeDetails) => void` Handler that is called when the user stops dragging.
`open`		`boolean` The controlled open state of the color picker
`openAutoFocus`	`true`	`boolean` Whether to auto focus the color picker when it is opened
`positioning`		`PositioningOptions` The positioning options for the color picker
`readOnly`		`boolean` Whether the color picker is read-only
`required`		`boolean` Whether the color picker is required
`value`		`Color` The controlled color value of the color picker
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-disabled`	Present when disabled
`data-invalid`	Present when invalid
`data-part`	root
`data-readonly`	Present when read-only
`data-scope`	color-picker

Area

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-disabled`	Present when disabled
`data-invalid`	Present when invalid
`data-part`	area
`data-readonly`	Present when read-only
`data-scope`	color-picker

AreaBackground

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-disabled`	Present when disabled
`data-invalid`	Present when invalid
`data-part`	area-background
`data-readonly`	Present when read-only
`data-scope`	color-picker

AreaThumb

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-disabled`	Present when disabled
`data-invalid`	Present when invalid
`data-part`	area-thumb
`data-readonly`	Present when read-only
`data-scope`	color-picker

ChannelInput

Prop	Default	Description
`channel`		`ExtendedColorChannel`
`orientation`		`Orientation`
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-channel`	The color channel of the channelinput
`data-disabled`	Present when disabled
`data-invalid`	Present when invalid
`data-part`	channel-input
`data-readonly`	Present when read-only
`data-scope`	color-picker

ChannelSlider

Prop	Default	Description
`channel`		`ColorChannel`
`orientation`		`Orientation`
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-channel`	The color channel of the channelslider
`data-orientation`	The orientation of the channelslider
`data-part`	channel-slider
`data-scope`	color-picker

ChannelSliderLabel

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-channel`	The color channel of the channelsliderlabel
`data-part`	channel-slider-label
`data-scope`	color-picker

ChannelSliderThumb

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-channel`	The color channel of the channelsliderthumb
`data-disabled`	Present when disabled
`data-orientation`	The orientation of the channelsliderthumb
`data-part`	channel-slider-thumb
`data-scope`	color-picker

ChannelSliderTrack

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-channel`	The color channel of the channelslidertrack
`data-orientation`	The orientation of the channelslidertrack
`data-part`	channel-slider-track
`data-scope`	color-picker

ChannelSliderValueText

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-channel`	The color channel of the channelslidervaluetext
`data-part`	channel-slider-value-text
`data-scope`	color-picker

Content

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-part`	content
`data-placement`	The placement of the content
`data-scope`	color-picker
`data-state`	"open" \| "closed"

Control

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-disabled`	Present when disabled
`data-focus`	Present when focused
`data-invalid`	Present when invalid
`data-part`	control
`data-readonly`	Present when read-only
`data-scope`	color-picker
`data-state`	"open" \| "closed"

EyeDropperTrigger

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-disabled`	Present when disabled
`data-invalid`	Present when invalid
`data-part`	eye-dropper-trigger
`data-readonly`	Present when read-only
`data-scope`	color-picker

FormatSelect

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

FormatTrigger

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

HiddenInput

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Label

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-disabled`	Present when disabled
`data-focus`	Present when focused
`data-invalid`	Present when invalid
`data-part`	label
`data-readonly`	Present when read-only
`data-scope`	color-picker

Positioner

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Swatch

Prop	Default	Description
`respectAlpha`		`boolean` Whether to respect the alpha channel of the color.
`value`		`string \| Color` The color value of the swatch.
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-part`	swatch
`data-scope`	color-picker
`data-state`	"checked" \| "unchecked"
`data-value`	The value of the item

SwatchGroup

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

SwatchIndicator

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

SwatchTrigger

Prop	Default	Description
`disabled`		`boolean` Whether the swatch is disabled.
`value`		`string \| Color` The color value of the swatch.
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-disabled`	Present when disabled
`data-part`	swatch-trigger
`data-scope`	color-picker
`data-state`	"checked" \| "unchecked"
`data-value`	The value of the item

TransparencyGrid

Prop	Default	Description
`size`		`string`
`asChild`		`Snippet` Render a different element.

Trigger

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-disabled`	Present when disabled
`data-focus`	Present when focused
`data-invalid`	Present when invalid
`data-part`	trigger
`data-placement`	The placement of the trigger
`data-readonly`	Present when read-only
`data-scope`	color-picker
`data-state`	"open" \| "closed"

ValueSwatch

Prop	Default	Description
`respectAlpha`		`boolean`
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-part`	swatch
`data-scope`	color-picker
`data-state`	"checked" \| "unchecked"
`data-value`	The value of the item

ValueText

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-disabled`	Present when disabled
`data-focus`	Present when focused
`data-part`	value-text
`data-scope`	color-picker

View

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Accessibility

Keyboard Support

Key	Description
Enter	When focus is on the trigger, opens the color picker When focus is on a trigger of a swatch, selects the color (and closes the color picker) When focus is on the input or channel inputs, selects the color
ArrowLeft	When focus is on the color area, decreases the hue value of the color When focus is on the channel sliders, decreases the value of the channel
ArrowRight	When focus is on the color area, increases the hue value of the color When focus is on the channel sliders, increases the value of the channel
ArrowUp	When focus is on the color area, increases the saturation value of the color When focus is on the channel sliders, increases the value of the channel
ArrowDown	When focus is on the color area, decreases the saturation value of the color When focus is on the channel sliders, decreases the value of the channel
Esc	Closes the color picker and moves focus to the trigger