Color Picker
A component that allows users to select a color from a color picker.
Saved Colors
Anatomy
To set up the color picker correctly, you’ll need to understand its anatomy and how we name its parts.
Each part includes a
data-partattribute to help identify them in the DOM.
Examples
Learn how to use the ColorPicker component in your project. Let’s take a look
at the most basic example
import { ColorPicker } from '@ark-ui/react'
export const Basic = () => {
return (
<ColorPicker.Root defaultValue="#eb5e41">
<ColorPicker.Label>Color</ColorPicker.Label>
<ColorPicker.Control>
<ColorPicker.ChannelInput channel="hex" />
<ColorPicker.ChannelInput channel="alpha" />
<ColorPicker.ValueText />
<ColorPicker.Trigger>
<ColorPicker.TransparencyGrid />
<ColorPicker.Context>
{(colorPicker) => <ColorPicker.Swatch value={colorPicker.value} />}
</ColorPicker.Context>
</ColorPicker.Trigger>
</ColorPicker.Control>
<ColorPicker.Positioner>
<ColorPicker.Content>
<ColorPicker.FormatTrigger>Toggle ColorFormat</ColorPicker.FormatTrigger>
<ColorPicker.FormatSelect />
<ColorPicker.Area>
<ColorPicker.AreaBackground />
<ColorPicker.AreaThumb />
</ColorPicker.Area>
<ColorPicker.ChannelSlider channel="hue">
<ColorPicker.ChannelSliderTrack />
<ColorPicker.ChannelSliderThumb />
</ColorPicker.ChannelSlider>
<ColorPicker.ChannelSlider channel="alpha">
<ColorPicker.TransparencyGrid />
<ColorPicker.ChannelSliderTrack />
<ColorPicker.ChannelSliderThumb />
</ColorPicker.ChannelSlider>
<ColorPicker.SwatchGroup>
<ColorPicker.SwatchTrigger value="red">
<ColorPicker.Swatch value="red">
<ColorPicker.SwatchIndicator>✓</ColorPicker.SwatchIndicator>
</ColorPicker.Swatch>
</ColorPicker.SwatchTrigger>
<ColorPicker.SwatchTrigger value="blue">
<ColorPicker.Swatch value="blue">
<ColorPicker.SwatchIndicator>✓</ColorPicker.SwatchIndicator>
</ColorPicker.Swatch>
</ColorPicker.SwatchTrigger>
<ColorPicker.SwatchTrigger value="green">
<ColorPicker.Swatch value="green">
<ColorPicker.SwatchIndicator>✓</ColorPicker.SwatchIndicator>
</ColorPicker.Swatch>
</ColorPicker.SwatchTrigger>
</ColorPicker.SwatchGroup>
<ColorPicker.View format="rgba">
<ColorPicker.ChannelInput channel="hex" />
<ColorPicker.ChannelInput channel="alpha" />
</ColorPicker.View>
<ColorPicker.View format="hsla">
<ColorPicker.ChannelInput channel="hue" />
<ColorPicker.ChannelInput channel="saturation" />
<ColorPicker.ChannelInput channel="lightness" />
</ColorPicker.View>
<ColorPicker.EyeDropperTrigger>Pick color</ColorPicker.EyeDropperTrigger>
</ColorPicker.Content>
</ColorPicker.Positioner>
</ColorPicker.Root>
)
}
import { ColorPicker } from '@ark-ui/solid'
export const Basic = () => {
return (
<ColorPicker.Root value="#eb5e41">
<ColorPicker.Context>
{(api) => (
<>
<ColorPicker.Label>Color</ColorPicker.Label>
<ColorPicker.Control>
<ColorPicker.ChannelInput channel="hex" />
<ColorPicker.ChannelInput channel="alpha" />
<ColorPicker.ValueText />
<ColorPicker.Trigger>
<ColorPicker.TransparencyGrid />
<ColorPicker.Swatch value={api().value} />
</ColorPicker.Trigger>
</ColorPicker.Control>
<ColorPicker.Positioner>
<ColorPicker.Content>
<ColorPicker.FormatTrigger>Toggle ColorFormat</ColorPicker.FormatTrigger>
<ColorPicker.FormatSelect />
<ColorPicker.Area>
<ColorPicker.AreaBackground />
<ColorPicker.AreaThumb />
</ColorPicker.Area>
<ColorPicker.ChannelSlider channel="hue">
<ColorPicker.ChannelSliderTrack />
<ColorPicker.ChannelSliderThumb />
</ColorPicker.ChannelSlider>
<ColorPicker.ChannelSlider channel="alpha">
<ColorPicker.TransparencyGrid />
<ColorPicker.ChannelSliderTrack />
<ColorPicker.ChannelSliderThumb />
</ColorPicker.ChannelSlider>
<ColorPicker.SwatchGroup>
<ColorPicker.SwatchTrigger value="red">
<ColorPicker.Swatch value="red">
<ColorPicker.SwatchIndicator>✓</ColorPicker.SwatchIndicator>
</ColorPicker.Swatch>
</ColorPicker.SwatchTrigger>
<ColorPicker.SwatchTrigger value="blue">
<ColorPicker.Swatch value="blue">
<ColorPicker.SwatchIndicator>✓</ColorPicker.SwatchIndicator>
</ColorPicker.Swatch>
</ColorPicker.SwatchTrigger>
<ColorPicker.SwatchTrigger value="green">
<ColorPicker.Swatch value="green">
<ColorPicker.SwatchIndicator>✓</ColorPicker.SwatchIndicator>
</ColorPicker.Swatch>
</ColorPicker.SwatchTrigger>
</ColorPicker.SwatchGroup>
<ColorPicker.View format="rgba">
<ColorPicker.ChannelInput channel="hex" />
<ColorPicker.ChannelInput channel="alpha" />
</ColorPicker.View>
<ColorPicker.View format="hsla">
<ColorPicker.ChannelInput channel="hue" />
<ColorPicker.ChannelInput channel="saturation" />
<ColorPicker.ChannelInput channel="lightness" />
</ColorPicker.View>
<ColorPicker.EyeDropperTrigger>Pick color</ColorPicker.EyeDropperTrigger>
</ColorPicker.Content>
</ColorPicker.Positioner>
</>
)}
</ColorPicker.Context>
</ColorPicker.Root>
)
}
<script setup lang="ts">
import { ColorPicker } from '@ark-ui/vue'
</script>
<template>
<ColorPicker.Root defaultValue="#ff00ff">
<ColorPicker.Label>Color</ColorPicker.Label>
<ColorPicker.Control>
<ColorPicker.ChannelInput channel="hex" />
<ColorPicker.ChannelInput channel="alpha" />
<ColorPicker.ValueText />
<ColorPicker.Trigger>
<ColorPicker.TransparencyGrid />
<ColorPicker.Context v-slot="api">
<ColorPicker.Swatch :value="api.value" />
</ColorPicker.Context>
</ColorPicker.Trigger>
</ColorPicker.Control>
<ColorPicker.Positioner>
<ColorPicker.Content>
<ColorPicker.FormatTrigger>Toggle ColorFormat</ColorPicker.FormatTrigger>
<ColorPicker.FormatSelect />
<ColorPicker.Area>
<ColorPicker.AreaBackground />
<ColorPicker.AreaThumb />
</ColorPicker.Area>
<ColorPicker.ChannelSlider channel="hue">
<ColorPicker.ChannelSliderTrack />
<ColorPicker.ChannelSliderThumb />
</ColorPicker.ChannelSlider>
<ColorPicker.ChannelSlider channel="alpha">
<ColorPicker.TransparencyGrid />
<ColorPicker.ChannelSliderTrack />
<ColorPicker.ChannelSliderThumb />
</ColorPicker.ChannelSlider>
<ColorPicker.SwatchGroup>
<ColorPicker.SwatchTrigger value="red">
<ColorPicker.Swatch value="red">
<ColorPicker.SwatchIndicator>✓</ColorPicker.SwatchIndicator>
</ColorPicker.Swatch>
</ColorPicker.SwatchTrigger>
<ColorPicker.SwatchTrigger value="blue">
<ColorPicker.Swatch value="blue">
<ColorPicker.SwatchIndicator>✓</ColorPicker.SwatchIndicator>
</ColorPicker.Swatch>
</ColorPicker.SwatchTrigger>
<ColorPicker.SwatchTrigger value="green">
<ColorPicker.Swatch value="green">
<ColorPicker.SwatchIndicator>✓</ColorPicker.SwatchIndicator>
</ColorPicker.Swatch>
</ColorPicker.SwatchTrigger>
</ColorPicker.SwatchGroup>
<ColorPicker.View format="rgba">
<ColorPicker.ChannelInput channel="hex" />
<ColorPicker.ChannelInput channel="alpha" />
</ColorPicker.View>
<ColorPicker.View format="hsla">
<ColorPicker.ChannelInput channel="hue" />
<ColorPicker.ChannelInput channel="saturation" />
<ColorPicker.ChannelInput channel="lightness" />
</ColorPicker.View>
<ColorPicker.EyeDropperTrigger>Pick color</ColorPicker.EyeDropperTrigger>
</ColorPicker.Content>
</ColorPicker.Positioner>
</ColorPicker.Root>
</template>
Controlled Color Picker
To create a controlled Color Picker component, manage the state of the current
color using the value prop and update it when the onValueChange or
onValueChangeEnd event handler is called:
import { useState } from 'react'
import { ColorPicker } from '@ark-ui/react'
export const Controlled = () => {
const [currentValue, setCurrentValue] = useState('hsl(20, 100%, 50%)')
return (
<ColorPicker.Root
format="hsla"
value={currentValue}
onValueChange={(details) => setCurrentValue(details.valueAsString)}
onValueChangeEnd={(details) => console.log(details.valueAsString)}
>
<ColorPicker.Context>
{(colorPicker) => (
<>
<ColorPicker.Label>Color</ColorPicker.Label>
<ColorPicker.Control>
<ColorPicker.ChannelInput channel="hex" />
<ColorPicker.ChannelInput channel="alpha" />
<ColorPicker.ValueText />
<ColorPicker.Trigger>
<ColorPicker.TransparencyGrid />
<ColorPicker.Swatch value={colorPicker.value} />
</ColorPicker.Trigger>
</ColorPicker.Control>
<ColorPicker.Positioner>
<ColorPicker.Content>
<ColorPicker.Area>
<ColorPicker.AreaBackground />
<ColorPicker.AreaThumb />
</ColorPicker.Area>
<ColorPicker.ChannelSlider channel="hue">
<ColorPicker.ChannelSliderTrack />
<ColorPicker.ChannelSliderThumb />
</ColorPicker.ChannelSlider>
<ColorPicker.ChannelSlider channel="alpha">
<ColorPicker.TransparencyGrid />
<ColorPicker.ChannelSliderTrack />
<ColorPicker.ChannelSliderThumb />
</ColorPicker.ChannelSlider>
<ColorPicker.SwatchGroup>
<ColorPicker.SwatchTrigger value="red">
<ColorPicker.Swatch value="red">
<ColorPicker.SwatchIndicator>✓</ColorPicker.SwatchIndicator>
</ColorPicker.Swatch>
</ColorPicker.SwatchTrigger>
<ColorPicker.SwatchTrigger value="blue">
<ColorPicker.Swatch value="blue">
<ColorPicker.SwatchIndicator>✓</ColorPicker.SwatchIndicator>
</ColorPicker.Swatch>
</ColorPicker.SwatchTrigger>
<ColorPicker.SwatchTrigger value="green">
<ColorPicker.Swatch value="green">
<ColorPicker.SwatchIndicator>✓</ColorPicker.SwatchIndicator>
</ColorPicker.Swatch>
</ColorPicker.SwatchTrigger>
</ColorPicker.SwatchGroup>
<ColorPicker.View format="rgba">
<ColorPicker.ChannelInput channel="hex" />
<ColorPicker.ChannelInput channel="alpha" />
</ColorPicker.View>
<ColorPicker.View format="hsla">
<ColorPicker.ChannelInput channel="hue" />
<ColorPicker.ChannelInput channel="saturation" />
<ColorPicker.ChannelInput channel="lightness" />
</ColorPicker.View>
<ColorPicker.EyeDropperTrigger>Pick color</ColorPicker.EyeDropperTrigger>
</ColorPicker.Content>
</ColorPicker.Positioner>
</>
)}
</ColorPicker.Context>
</ColorPicker.Root>
)
}
import { createSignal } from 'solid-js'
import { ColorPicker } from '@ark-ui/solid'
export const Controlled = () => {
const [currentValue, setCurrentValue] = createSignal('hsl(0, 100%, 50%)')
return (
<ColorPicker.Root
value={currentValue()}
onValueChange={(details) => setCurrentValue(details.valueAsString)}
onValueChangeEnd={(details) => console.log(details.valueAsString)}
>
<ColorPicker.Context>
{(api) => (
<>
<ColorPicker.Label>Color</ColorPicker.Label>
<ColorPicker.Control>
<ColorPicker.ChannelInput channel="hex" />
<ColorPicker.ChannelInput channel="alpha" />
<ColorPicker.ValueText />
<ColorPicker.Trigger>
<ColorPicker.TransparencyGrid />
<ColorPicker.Swatch value={api().value} />
</ColorPicker.Trigger>
</ColorPicker.Control>
<ColorPicker.Positioner>
<ColorPicker.Content>
<ColorPicker.Area>
<ColorPicker.AreaBackground />
<ColorPicker.AreaThumb />
</ColorPicker.Area>
<ColorPicker.ChannelSlider channel="hue">
<ColorPicker.ChannelSliderTrack />
<ColorPicker.ChannelSliderThumb />
</ColorPicker.ChannelSlider>
<ColorPicker.ChannelSlider channel="alpha">
<ColorPicker.TransparencyGrid />
<ColorPicker.ChannelSliderTrack />
<ColorPicker.ChannelSliderThumb />
</ColorPicker.ChannelSlider>
<ColorPicker.SwatchGroup>
<ColorPicker.SwatchTrigger value="red">
<ColorPicker.Swatch value="red">
<ColorPicker.SwatchIndicator>✓</ColorPicker.SwatchIndicator>
</ColorPicker.Swatch>
</ColorPicker.SwatchTrigger>
<ColorPicker.SwatchTrigger value="blue">
<ColorPicker.Swatch value="blue">
<ColorPicker.SwatchIndicator>✓</ColorPicker.SwatchIndicator>
</ColorPicker.Swatch>
</ColorPicker.SwatchTrigger>
<ColorPicker.SwatchTrigger value="green">
<ColorPicker.Swatch value="green">
<ColorPicker.SwatchIndicator>✓</ColorPicker.SwatchIndicator>
</ColorPicker.Swatch>
</ColorPicker.SwatchTrigger>
</ColorPicker.SwatchGroup>
<ColorPicker.View format="rgba">
<ColorPicker.ChannelInput channel="hex" />
<ColorPicker.ChannelInput channel="alpha" />
</ColorPicker.View>
<ColorPicker.View format="hsla">
<ColorPicker.ChannelInput channel="hue" />
<ColorPicker.ChannelInput channel="saturation" />
<ColorPicker.ChannelInput channel="lightness" />
</ColorPicker.View>
<ColorPicker.EyeDropperTrigger>Pick color</ColorPicker.EyeDropperTrigger>
</ColorPicker.Content>
</ColorPicker.Positioner>
</>
)}
</ColorPicker.Context>
</ColorPicker.Root>
)
}
<script setup lang="ts">
import { ref } from 'vue'
import { ColorPicker } from '@ark-ui/vue'
const value = ref('hsl(20, 100%, 50%)')
</script>
<template>
<ColorPicker.Root format="hsla" v-model="value">
<ColorPicker.Label>Color</ColorPicker.Label>
<ColorPicker.Control>
<ColorPicker.ChannelInput channel="hex" />
<ColorPicker.ChannelInput channel="alpha" />
<ColorPicker.ValueText />
<ColorPicker.Trigger>
<ColorPicker.TransparencyGrid />
<ColorPicker.Context v-slot="api">
<ColorPicker.Swatch :value="api.value" />
</ColorPicker.Context>
</ColorPicker.Trigger>
</ColorPicker.Control>
<ColorPicker.Positioner>
<ColorPicker.Content>
<ColorPicker.Area>
<ColorPicker.AreaBackground />
<ColorPicker.AreaThumb />
</ColorPicker.Area>
<ColorPicker.ChannelSlider channel="hue">
<ColorPicker.ChannelSliderTrack />
<ColorPicker.ChannelSliderThumb />
</ColorPicker.ChannelSlider>
<ColorPicker.ChannelSlider channel="alpha">
<ColorPicker.TransparencyGrid />
<ColorPicker.ChannelSliderTrack />
<ColorPicker.ChannelSliderThumb />
</ColorPicker.ChannelSlider>
<ColorPicker.SwatchGroup>
<ColorPicker.SwatchTrigger value="red">
<ColorPicker.Swatch value="red">
<ColorPicker.SwatchIndicator>✓</ColorPicker.SwatchIndicator>
</ColorPicker.Swatch>
</ColorPicker.SwatchTrigger>
<ColorPicker.SwatchTrigger value="blue">
<ColorPicker.Swatch value="blue">
<ColorPicker.SwatchIndicator>✓</ColorPicker.SwatchIndicator>
</ColorPicker.Swatch>
</ColorPicker.SwatchTrigger>
<ColorPicker.SwatchTrigger value="green">
<ColorPicker.Swatch value="green">
<ColorPicker.SwatchIndicator>✓</ColorPicker.SwatchIndicator>
</ColorPicker.Swatch>
</ColorPicker.SwatchTrigger>
</ColorPicker.SwatchGroup>
<ColorPicker.View format="rgba">
<ColorPicker.ChannelInput channel="hex" />
<ColorPicker.ChannelInput channel="alpha" />
</ColorPicker.View>
<ColorPicker.View format="hsla">
<ColorPicker.ChannelInput channel="hue" />
<ColorPicker.ChannelInput channel="saturation" />
<ColorPicker.ChannelInput channel="lightness" />
</ColorPicker.View>
<ColorPicker.EyeDropperTrigger>Pick color</ColorPicker.EyeDropperTrigger>
</ColorPicker.Content>
</ColorPicker.Positioner>
</ColorPicker.Root>
</template>
API Reference
Root
| Prop | Type | Default |
|---|---|---|
asChildRender as a different element type. | boolean | |
closeOnSelectWhether to close the color picker when a swatch is selected | boolean | |
defaultOpenThe initial open state of the color picker when it is first rendered.
Use when you do not need to control its open state. | boolean | |
defaultValueThe initial value of the color picker when it is first rendered.
Use when you do not need to control the state of the color picker. | string | |
disabledWhether the color picker is disabled | boolean | |
formatThe color format to use | ColorFormat | |
idThe unique identifier of the machine. | string | |
idsThe ids of the elements in the color picker. Useful for composition. | Partial<{
root: string
control: string
trigger: string
label: string
input: string
content: string
area: string
areaGradient: string
areaThumb: string
channelInput(id: string): string
channelSliderTrack(id: ColorChannel): string
channelSliderThumb(id: ColorChannel): string
}> | |
initialFocusElThe initial focus element when the color picker is opened. | HTMLElement | (() => MaybeElement) | |
lazyMountWhether to enable lazy mounting | boolean | false |
nameThe name for the form input | string | |
onExitCompleteFunction called when the animation ends in the closed state. | () => void | |
onFocusOutsideFunction called when the focus is moved outside the component | (event: FocusOutsideEvent) => void | |
onFormatChangeFunction called when the color format changes | (details: FormatChangeDetails) => void | |
onInteractOutsideFunction called when an interaction happens outside the component | (event: InteractOutsideEvent) => void | |
onOpenChangeHandler that is called when the user opens or closes the color picker. | (details: OpenChangeDetails) => void | |
onPointerDownOutsideFunction called when the pointer is pressed down outside the component | (event: PointerDownOutsideEvent) => void | |
onValueChangeHandler that is called when the value changes, as the user drags. | (details: ValueChangeDetails) => void | |
onValueChangeEndHandler that is called when the user stops dragging. | (details: ValueChangeDetails) => void | |
openWhether the color picker is open | boolean | |
positioningThe positioning options for the color picker | PositioningOptions | |
presentWhether the node is present (controlled by the user) | boolean | |
readOnlyWhether the color picker is read-only | boolean | |
unmountOnExitWhether to unmount on exit. | boolean | false |
valueThe current value of the color picker. | string |
AreaBackground
| Prop | Type | Default |
|---|---|---|
asChildRender as a different element type. | boolean |
Area
| Prop | Type | Default |
|---|---|---|
asChildRender as a different element type. | boolean | |
xChannel | ColorChannel | |
yChannel | ColorChannel |
AreaThumb
| Prop | Type | Default |
|---|---|---|
asChildRender as a different element type. | boolean |
ChannelInput
| Prop | Type | Default |
|---|---|---|
channel | ExtendedColorChannel | |
asChildRender as a different element type. | boolean | |
orientation | Orientation |
ChannelSlider
| Prop | Type | Default |
|---|---|---|
channel | ColorChannel | |
asChildRender as a different element type. | boolean | |
orientation | Orientation |
ChannelSliderThumb
| Prop | Type | Default |
|---|---|---|
asChildRender as a different element type. | boolean |
ChannelSliderTrack
| Prop | Type | Default |
|---|---|---|
asChildRender as a different element type. | boolean |
Content
| Prop | Type | Default |
|---|---|---|
asChildRender as a different element type. | boolean |
Control
| Prop | Type | Default |
|---|---|---|
asChildRender as a different element type. | boolean |
EyeDropperTrigger
| Prop | Type | Default |
|---|---|---|
asChildRender as a different element type. | boolean |
FormatSelect
| Prop | Type | Default |
|---|---|---|
asChildRender as a different element type. | boolean |
FormatTrigger
| Prop | Type | Default |
|---|---|---|
asChildRender as a different element type. | boolean |
Label
| Prop | Type | Default |
|---|---|---|
asChildRender as a different element type. | boolean |
Positioner
| Prop | Type | Default |
|---|---|---|
asChildRender as a different element type. | boolean |
SwatchGroup
| Prop | Type | Default |
|---|---|---|
asChildRender as a different element type. | boolean |
SwatchIndicator
| Prop | Type | Default |
|---|---|---|
asChildRender as a different element type. | boolean |
Swatch
| Prop | Type | Default |
|---|---|---|
valueThe color value | string | Color | |
asChildRender as a different element type. | boolean | |
respectAlphaWhether to include the alpha channel in the color | boolean |
SwatchTrigger
| Prop | Type | Default |
|---|---|---|
valueThe color value | string | Color | |
asChildRender as a different element type. | boolean | |
disabledWhether the swatch trigger is disabled | boolean |
TransparencyGrid
| Prop | Type | Default |
|---|---|---|
asChildRender as a different element type. | boolean | |
size | string |
Trigger
| Prop | Type | Default |
|---|---|---|
asChildRender as a different element type. | boolean |
ValueText
| Prop | Type | Default |
|---|---|---|
asChildRender as a different element type. | boolean |
View
| Prop | Type | Default |
|---|---|---|
format | ColorFormat | |
asChildRender as a different element type. | boolean |
Previous
CollapsibleNext
Combobox