ColorPicker
├── ColorPickerControl
│ └── InputGroup
│ ├── ColorPickerTrigger
│ │ └── ColorPickerSwatchPreview
│ └── ColorPickerInput
└── ColorPickerContent
    ├── ColorPickerArea
    │ └── ColorPickerAreaThumb
    └── ColorPickerView
        └── ColorPickerSlider

Usage#

import {
  ColorPicker,
  ColorPickerInput,
} from "@/components/ui/color-picker";

<ColorPicker>
  <ColorPickerInput asChild channel="hex">
    <Input />
  </ColorPickerInput>
</ColorPicker>

Controlled#

Use the value and onValueChange props to programmatically control the color picker's state.

PreviewCode

#EB5E41

States#

Invalid#

PreviewCode

Color

Please enter a valid hex color

Disabled#

PreviewCode

Examples#

With Field#

PreviewCode

Color

Enter your brand's primary color

Channel Editing#

PreviewCode

RGB

HSB

HSL

Hex

With Swatch#

Input with ColorPickerSwatchPreview showing the current color alongside the hex input.

PreviewCode

With Popover#

An input with trigger and popover content for area, hue, and alpha selection.

PreviewCode

Compact#

Inspired by Figma's color input.

PreviewCode

Color picker with trigger and popover content.

Anatomy#

ColorPicker
├── ColorPickerControl
│ └── ColorPickerTrigger
└── ColorPickerContent
    ├── ColorPickerArea
    │ └── ColorPickerAreaThumb
    ├── ColorPickerView
    │ ├── ColorPickerEyeDropperTrigger
    │ └── ColorPickerSlider
    │ └── ColorPickerTransparencyGrid
    └── ColorPickerSwatchGroup
        └── ColorPickerSwatchTrigger
            └── ColorPickerSwatch

Usage#

import {
  ColorPicker,
  ColorPickerArea,
  ColorPickerAreaThumb,
  ColorPickerContent,
  ColorPickerEyeDropperTrigger,
  ColorPickerSlider,
  ColorPickerTrigger,
  ColorPickerTransparencyGrid,
  ColorPickerView,
} from "@/components/ui/color-picker";

<ColorPicker>
  <ColorPickerTrigger />
  <ColorPickerContent>
    <ColorPickerArea>
      <ColorPickerAreaThumb />
    </ColorPickerArea>
    <ColorPickerView>
      <ColorPickerEyeDropperTrigger />
      <ColorPickerSlider channel="hue" />
      <ColorPickerSlider channel="alpha">
        <ColorPickerTransparencyGrid />
      </ColorPickerSlider>
    </ColorPickerView>
  </ColorPickerContent>
</ColorPicker>

States#

Disabled#

Set disabled to prevent user interaction.

PreviewCode

Pick as color

Examples#

With Eye Dropper#

PreviewCode

With Channel Editing#

Popover with area, sliders, and input fields for editing red, green, and blue values.

PreviewCode

Pick a color

With Only Sliders#

Popover with hue, saturation, lightness, and alpha sliders only, no color area.

PreviewCode

Pick a color

With Swatch Picker#

Popover with preset color swatches for quick selection.

PreviewCode

Pick a color

Color Swatch Picker#

Set inline on ColorPicker so swatches render without a popover.

Anatomy#

ColorPicker
└── ColorPickerSwatchGroup
    └── ColorPickerSwatchTrigger
        └── ColorPickerSwatch
            └── ColorPickerSwatchIndicator

Usage#

import {
  ColorPicker,
  ColorPickerSwatchTrigger,
  ColorPickerSwatchGroup,
  ColorPickerSwatch,
  ColorPickerSwatchIndicator,
} from "@/components/ui/color-picker";

<ColorPicker>
  <ColorPickerSwatchGroup>
    <ColorPickerSwatchTrigger value="#0485F7">
      <ColorPickerSwatch value="#0485F7">
          <ColorPickerSwatchIndicator />
      </ColorPickerSwatch>
    </ColorPickerSwatchTrigger>
  </ColorPickerSwatchGroup>
</ColorPicker>

Controlled#

Use the value and onValueChange props to programmatically control the swatch picker's state.

PreviewCode

#0485F7

States#

Disabled#

Set disabled to prevent user interaction.

PreviewCode

Examples#

Custom Size#

Customize swatch size using the size-* on ColorPickerSwatchTrigger.

PreviewCode

Custom Radius#

Override the default rounded style on ColorPickerSwatchTrigger using the rounded-* utility class.

PreviewCode

Custom Indicator#

Replace the default check icon with a custom indicator via the children of ColorPickerSwatchIndicator.

PreviewCode

Area#

Set inline on ColorPicker for a standalone color area.

Anatomy#

ColorPicker
└── ColorPickerArea
    └── ColorPickerAreaThumb

Usage#

import {
  ColorPicker,
  ColorPickerArea,
  ColorPickerAreaThumb,
} from "@/components/ui/color-picker";

<ColorPicker>
  <ColorPickerArea>
    <ColorPickerAreaThumb />
  </ColorPickerArea>
</ColorPicker>

Examples#

Color Channels#

PreviewCode

With Dots#

PreviewCode

Slider#

Set inline on ColorPicker for standalone sliders. Wrap multiple sliders in ColorPickerView.

Anatomy#

ColorPicker
└── ColorPickerView
    └── ColorPickerSlider
        └── ColorPickerTransparencyGrid

Usage#

import {
  ColorPicker,
  ColorPickerSlider,
} from "@/components/ui/color-picker";

<ColorPicker>
  <ColorPickerSlider channel="hue" />
</ColorPicker>

Controlled#

PreviewCode

rgba(82, 65, 235, 1)

States#

Disabled#

PreviewCode

Examples#

Alpha Channel#

PreviewCode

HSL Channels#

PreviewCode

HSBA Channels#

PreviewCode

RGB Channels#

PreviewCode

Vertical#

PreviewCode

Custom spacing#

Use [--space:--spacing("value")] on ColorPickerContent to adjust internal spacing.

Default spacing is --spacing(3).

PreviewCode

You can use breakpoint utilities to change the internal spacing at different screen sizes.

md:[--space:--spacing(6)] lg:[--space:--spacing(8)]

API Reference#

ColorPicker#

Root element of the color picker.

Prop	Type	Default
`value`	`string`	-
`defaultValue`	`string`	-
`onValueChange`	`(details: ColorPickerValueChangeDetails) => void`	-
`disabled`	`boolean`	`false`
`format`	`"hex"	"hexa"
`inline`	`boolean`	`false`
`positioning`	`PositioningOptions`	`{ placement: "top-start" }`
`lazyMount`	`boolean`	`true`
`unmountOnExit`	`boolean`	`true`
`className`	`string`	-

ColorPickerTrigger#

Button or element that opens the color picker popover.

Prop	Type	Default
`className`	`string`	-
`asChild`	`boolean`	`false`

ColorPickerContent#

Holds the color picker popover. Displayed in a portal.

Prop	Type	Default
`className`	`string`	-

Attribute	Default
`--space`	`--spacing(3)`

ColorPickerControl#

Container for grouping control elements such as area, sliders, and inputs.

Prop	Type	Default
`className`	`string`	-

ColorPickerView#

Container for sliders and inputs. Can specify format for child value display.

Prop	Type	Default
`format`	`"hex"	"hexa"
`className`	`string`	-

ColorPickerArea#

Two-dimensional color selection area.

Prop	Type	Default
`showDots`	`boolean`	`false`
`xChannel`	`"hue"	"saturation"
`yChannel`	`"hue"	"saturation"
`className`	`string`	-

ColorPickerAreaThumb#

Draggable thumb within the color area.

Prop	Type	Default
`className`	`string`	-

ColorPickerSlider#

Slider for adjusting a color channel.

Prop	Type	Default
`channel`	`"hex"	"hexa"
`orientation`	`"horizontal"	"vertical"`
`className`	`string`	-

ColorPickerTransparencyGrid#

Checkerboard pattern for transparency. Shown as child of ColorPickerSlider when editing alpha.

Prop	Type	Default
`className`	`string`	-

ColorPickerEyeDropperTrigger#

Button that activates the native Eye Dropper API to sample colors from the screen.

Prop	Type	Default
`variant`	`ButtonProps["variant"]`	`"outline"`
`size`	`ButtonProps["size"]`	`"icon-md"`
`children`	`ReactNode`	`Pipette`
`className`	`string`	-

ColorPickerInput#

Input for displaying and editing a color channel value. Use asChild with a custom input.

Prop	Type	Default
`channel`	`"hex"	"hexa"
`asChild`	`boolean`	`false`

ColorPickerSwatchPreview#

Compact swatch that displays the current color. Use inside an input group for input mode.

Prop	Type	Default
`className`	`string`	-

ColorPickerSwatchGroup#

Container for swatch triggers in swatch picker mode.

Prop	Type	Default
`className`	`string`	-

ColorPickerSwatchTrigger#

Button that selects a color when clicked. Wraps ColorPickerSwatch and optionally ColorPickerSwatchIndicator.

Prop	Type	Default
`value`	`string`	-
`className`	`string`	-

ColorPickerSwatch#

Color swatch display. Use as a child of ColorPickerSwatchTrigger.

Prop	Type	Default
`value`	`string`	-
`className`	`string`	-

ColorPickerSwatchIndicator#

Check mark or custom icon shown when a swatch is selected. Pass children to customize.

Prop	Type	Default
`children`	`ReactNode`	`CheckIcon`
`className`	`string`	-

ColorPickerValue#

Displays the current color as formatted text.

Prop	Type	Default
`format`	`"hex"	"hexa"
`className`	`string`	-

ColorPickerValueSwatch#

Displays the current color as a swatch. Use for standalone value preview.

Prop	Type	Default
`className`	`string`	-

parseColor#

Exported utility to parse color strings. Use for programmatic color handling.

For the complete list of props and additional subcomponents, see the Ark UI Color Picker documentation.

[

Collapsible ](/docs/components/collapsible)[

Combobox ](/docs/components/combobox)

On This Page

Installation Modes Input Anatomy Usage Controlled States Invalid Disabled Examples With Field Channel Editing With Swatch With Popover Compact Popover Anatomy Usage States Disabled Examples With Eye Dropper With Channel Editing With Only Sliders With Swatch Picker Color Swatch Picker Anatomy Usage Controlled States Disabled Examples Custom Size Custom Radius Custom Indicator Area Anatomy Usage Examples Color Channels With Dots Slider Anatomy Usage Controlled States Disabled Examples Alpha Channel HSL Channels HSBA Channels RGB Channels Vertical Custom spacing API Reference ColorPicker ColorPickerTrigger ColorPickerContent ColorPickerControl ColorPickerView ColorPickerArea ColorPickerAreaThumb ColorPickerSlider ColorPickerTransparencyGrid ColorPickerEyeDropperTrigger ColorPickerInput ColorPickerSwatchPreview ColorPickerSwatchGroup ColorPickerSwatchTrigger ColorPickerSwatch ColorPickerSwatchIndicator ColorPickerValue ColorPickerValueSwatch parseColor