Color Picker
A component that allows users to select a color from a color picker.
Preview Component
Please note, the API of this component is currently in a preview phase and is subject to change.
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'
const Basic = () => {
return (
<ColorPicker.Root defaultValue="#eb5e41">
{(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.Root>
)
}
import { ColorPicker } from '@ark-ui/solid'
const Basic = () => {
return (
<ColorPicker.Root value="#eb5e41">
{(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.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 #default="api" :modelValue="'#eb5e41'">
<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.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 { ColorPicker } from '@ark-ui/react'
import { useState } from 'react'
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)}
>
{(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.Root>
)
}
import { ColorPicker } from '@ark-ui/solid'
import { createSignal } from 'solid-js'
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)}
>
{(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.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
#default="api"
format="hsla"
v-model="value"
@value-change="(details) => (value = details.valueAsString)"
@value-change-end="(details) => console.log(details.valueAsString)"
>
<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.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 | |
defaultValueThe initial value of the color picker. | string | |
dirThe direction of the color picker | 'ltr' | 'rtl' | |
disabledWhether the color picker is disabled | boolean | |
formatThe color format to use | ColorFormat | |
getRootNodeA root node to correctly resolve document in custom environments. E.x.: Iframes, Electron. | () => Node | ShadowRoot | Document | |
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 |
Area
| Prop | Type | Default |
|---|---|---|
asChildRender as a different element type. | boolean | |
xChannel | ColorChannel | |
yChannel | ColorChannel |
View
| Prop | Type | Default |
|---|---|---|
format | ColorFormat | |
asChildRender as a different element type. | boolean |
Label
| 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 |
Content
| Prop | Type | Default |
|---|---|---|
asChildRender as a different element type. | boolean |
Control
| Prop | Type | Default |
|---|---|---|
asChildRender as a different element type. | boolean |
Trigger
| Prop | Type | Default |
|---|---|---|
asChildRender as a different element type. | boolean |
AreaThumb
| Prop | Type | Default |
|---|---|---|
asChildRender as a different element type. | boolean |
ValueText
| 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 |
ChannelInput
| Prop | Type | Default |
|---|---|---|
channel | ExtendedColorChannel | |
asChildRender as a different element type. | boolean | |
orientation | Orientation |
FormatSelect
| Prop | Type | Default |
|---|---|---|
asChildRender as a different element type. | boolean |
ChannelSlider
| Prop | Type | Default |
|---|---|---|
channel | ColorChannel | |
asChildRender as a different element type. | boolean | |
orientation | Orientation |
FormatTrigger
| Prop | Type | Default |
|---|---|---|
asChildRender as a different element type. | boolean |
SwatchTrigger
| Prop | Type | Default |
|---|---|---|
valueThe color value | string | Color | |
asChildRender as a different element type. | boolean | |
disabledWhether the swatch trigger is disabled | boolean |
AreaBackground
| Prop | Type | Default |
|---|---|---|
asChildRender as a different element type. | boolean |
SwatchIndicator
| Prop | Type | Default |
|---|---|---|
asChildRender as a different element type. | boolean |
TransparencyGrid
| Prop | Type | Default |
|---|---|---|
asChildRender as a different element type. | boolean | |
size | string |
EyeDropperTrigger
| Prop | Type | Default |
|---|---|---|
asChildRender as a different element type. | boolean |
ChannelSliderThumb
| Prop | Type | Default |
|---|---|---|
asChildRender as a different element type. | boolean |
ChannelSliderTrack
| Prop | Type | Default |
|---|---|---|
asChildRender as a different element type. | boolean |