Docs Components Examples
Twitter GitHub
Components
Color picker

Color Picker

A component that allows users to select a color from a predefined set.

API Reference
Figma
Feedback

Usage

import { PipetteIcon } from 'lucide-react'
import { HStack, Stack } from 'styled-system/jsx'
import * as ColorPicker from '~/components/ui/color-picker'
import { IconButton } from '~/components/ui/icon-button'
import { Input } from '~/components/ui/input'
import { Text } from '~/components/ui/text'

export const Demo = (props: ColorPicker.RootProps) => {
  return (
    <ColorPicker.Root {...props}>
      {(api) => (
        <>
          <ColorPicker.Label>Color Picker</ColorPicker.Label>
          <ColorPicker.Control>
            <ColorPicker.ChannelInput channel="hex" asChild>
              <Input />
            </ColorPicker.ChannelInput>
            <ColorPicker.Trigger asChild>
              <IconButton variant="outline">
                <ColorPicker.Swatch value={api.value} />
              </IconButton>
            </ColorPicker.Trigger>
          </ColorPicker.Control>
          <ColorPicker.Positioner>
            <ColorPicker.Content>
              <Stack gap="3">
                <ColorPicker.Area>
                  <ColorPicker.AreaBackground />
                  <ColorPicker.AreaThumb />
                </ColorPicker.Area>
                <HStack gap="3">
                  <ColorPicker.EyeDropperTrigger asChild>
                    <IconButton size="xs" variant="outline" aria-label="Pick a color">
                      <PipetteIcon />
                    </IconButton>
                  </ColorPicker.EyeDropperTrigger>
                  <Stack gap="2" flex="1">
                    <ColorPicker.ChannelSlider channel="hue">
                      <ColorPicker.ChannelSliderTrack />
                      <ColorPicker.ChannelSliderThumb />
                    </ColorPicker.ChannelSlider>
                    <ColorPicker.ChannelSlider channel="alpha">
                      <ColorPicker.TransparencyGrid size="8px" />
                      <ColorPicker.ChannelSliderTrack />
                      <ColorPicker.ChannelSliderThumb />
                    </ColorPicker.ChannelSlider>
                  </Stack>
                </HStack>
                <HStack>
                  <ColorPicker.ChannelInput channel="hex" asChild>
                    <Input size="2xs" />
                  </ColorPicker.ChannelInput>
                  <ColorPicker.ChannelInput channel="alpha" asChild>
                    <Input size="2xs" />
                  </ColorPicker.ChannelInput>
                </HStack>
                <Stack gap="1.5">
                  <Text size="xs" fontWeight="medium" color="fg.default">
                    Saved Colors
                  </Text>
                  <ColorPicker.SwatchGroup>
                    {presets.map((color, id) => (
                      <ColorPicker.SwatchTrigger key={id} value={color}>
                        <ColorPicker.Swatch value={color} />
                      </ColorPicker.SwatchTrigger>
                    ))}
                  </ColorPicker.SwatchGroup>
                </Stack>
              </Stack>
            </ColorPicker.Content>
          </ColorPicker.Positioner>
        </>
      )}
    </ColorPicker.Root>
  )
}

const 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%)',
]

Installation

Insert code snippet into your project. Update import paths as needed.

import { ColorPicker } from '@ark-ui/react/color-picker'
import type { ComponentProps } from 'react'
import { tv } from 'tailwind-variants'
import { createStyleContext } from '~/lib/create-style-context'

const styles = tv(
  {
    base: 'colorPicker',
    slots: {
      root: 'colorPicker__root',
      label: 'colorPicker__label',
      control: 'colorPicker__control',
      trigger: 'colorPicker__trigger',
      positioner: 'colorPicker__positioner',
      content: 'colorPicker__content',
      area: 'colorPicker__area',
      areaThumb: 'colorPicker__areaThumb',
      areaBackground: 'colorPicker__areaBackground',
      channelSlider: 'colorPicker__channelSlider',
      channelSliderTrack: 'colorPicker__channelSliderTrack',
      channelSliderThumb: 'colorPicker__channelSliderThumb',
      channelInput: 'colorPicker__channelInput',
      transparencyGrid: 'colorPicker__transparencyGrid',
      swatchGroup: 'colorPicker__swatchGroup',
      swatchTrigger: 'colorPicker__swatchTrigger',
      swatchIndicator: 'colorPicker__swatchIndicator',
      swatch: 'colorPicker__swatch',
      eyeDropperTrigger: 'colorPicker__eyeDropperTrigger',
      formatTrigger: 'colorPicker__formatTrigger',
      formatSelect: 'colorPicker__formatSelect',
      valueText: 'colorPicker__valueText',
      view: 'colorPicker__view',
    },
    variants: {},
  },
  { twMerge: false },
)
const { withProvider, withContext } = createStyleContext(styles)

export const Root = withProvider(ColorPicker.Root, 'root')
export const Area = withContext(ColorPicker.Area, 'area')
export const AreaBackground = withContext(ColorPicker.AreaBackground, 'areaBackground')
export const AreaThumb = withContext(ColorPicker.AreaThumb, 'areaThumb')
export const ChannelInput = withContext(ColorPicker.ChannelInput, 'channelInput')
export const ChannelSlider = withContext(ColorPicker.ChannelSlider, 'channelSlider')
export const ChannelSliderThumb = withContext(ColorPicker.ChannelSliderThumb, 'channelSliderThumb')
export const ChannelSliderTrack = withContext(ColorPicker.ChannelSliderTrack, 'channelSliderTrack')
export const Content = withContext(ColorPicker.Content, 'content')
export const Control = withContext(ColorPicker.Control, 'control')
export const EyeDropperTrigger = withContext(ColorPicker.EyeDropperTrigger, 'eyeDropperTrigger')
export const FormatSelect = withContext(ColorPicker.FormatSelect, 'formatSelect')
export const FormatTrigger = withContext(ColorPicker.FormatTrigger, 'formatTrigger')
export const Label = withContext(ColorPicker.Label, 'label')
export const Positioner = withContext(ColorPicker.Positioner, 'positioner')
export const Swatch = withContext(ColorPicker.Swatch, 'swatch')
export const SwatchGroup = withContext(ColorPicker.SwatchGroup, 'swatchGroup')
export const SwatchIndicator = withContext(ColorPicker.SwatchIndicator, 'swatchIndicator')
export const SwatchTrigger = withContext(ColorPicker.SwatchTrigger, 'swatchTrigger')
export const TransparencyGrid = withContext(ColorPicker.TransparencyGrid, 'transparencyGrid')
export const Trigger = withContext(ColorPicker.Trigger, 'trigger')
export const ValueText = withContext(ColorPicker.ValueText, 'valueText')
export const View = withContext(ColorPicker.View, 'view')

export type RootProps = ComponentProps<typeof Root>
export interface AreaProps extends ComponentProps<typeof Area> {}
export interface AreaBackgroundProps extends ComponentProps<typeof AreaBackground> {}
export interface AreaThumbProps extends ComponentProps<typeof AreaThumb> {}
export interface ChannelInputProps extends ComponentProps<typeof ChannelInput> {}
export interface ChannelSliderProps extends ComponentProps<typeof ChannelSlider> {}
export interface ChannelSliderThumbProps extends ComponentProps<typeof ChannelSliderThumb> {}
export interface ChannelSliderTrackProps extends ComponentProps<typeof ChannelSliderTrack> {}
export interface ContentProps extends ComponentProps<typeof Content> {}
export interface ControlProps extends ComponentProps<typeof Control> {}
export interface EyeDropperTriggerProps extends ComponentProps<typeof EyeDropperTrigger> {}
export interface FormatSelectProps extends ComponentProps<typeof FormatSelect> {}
export interface FormatTriggerProps extends ComponentProps<typeof FormatTrigger> {}
export interface LabelProps extends ComponentProps<typeof Label> {}
export interface PositionerProps extends ComponentProps<typeof Positioner> {}
export interface SwatchProps extends ComponentProps<typeof Swatch> {}
export interface SwatchGroupProps extends ComponentProps<typeof SwatchGroup> {}
export interface SwatchIndicatorProps extends ComponentProps<typeof SwatchIndicator> {}
export interface SwatchTriggerProps extends ComponentProps<typeof SwatchTrigger> {}
export interface TransparencyGridProps extends ComponentProps<typeof TransparencyGrid> {}
export interface TriggerProps extends ComponentProps<typeof Trigger> {}
export interface ValueTextProps extends ComponentProps<typeof ValueText> {}
export interface ViewProps extends ComponentProps<typeof View> {}

Previous

Collapsible

Next

Combobox

On this page