Color Picker

Usage

import { ColorPicker } from "@chakra-ui/react"

<ColorPicker.Root>
  <ColorPicker.HiddenInput />
  <ColorPicker.Label />
  <ColorPicker.Control>
    <ColorPicker.Input />
    <ColorPicker.Trigger />
  </ColorPicker.Control>
  <ColorPicker.Positioner>
    <ColorPicker.Content>
      <ColorPicker.Area />
      <ColorPicker.EyeDropper />
      <ColorPicker.Sliders />
      <ColorPicker.SwatchGroup>
        <ColorPicker.SwatchTrigger>
          <ColorPicker.Swatch />
        </ColorPicker.SwatchTrigger>
      </ColorPicker.SwatchGroup>
    </ColorPicker.Content>
  </ColorPicker.Positioner>
</ColorPicker.Root>

Shortcuts

ColorPicker.ChannelSlider

This component renders the slider track, thumb and transparency grid.

<ColorPicker.ChannelSlider />

is the same as:

<ColorPicker.ChannelSlider>
  <ColorPickerTransparencyGrid />
  <ColorPickerChannelSliderTrack />
  <ColorPickerChannelSliderThumb />
</ColorPicker.ChannelSlider>

ColorPicker.Sliders

This is a shortcut component for the hue and alpha sliders:

<Stack>
  <ColorPickerChannelSlider channel="hue" />
  <ColorPickerChannelSlider channel="alpha" />
</Stack>

ColorPicker.Area

This component renders the color area thumb and background.

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

is the same as:

<ColorPicker.Area />

ColorPicker.EyeDropper

This is a shortcut component for:

<ColorPicker.EyeDropperTrigger asChild>
  <IconButton>
    <LuPipette />
  </IconButton>
</ColorPicker.EyeDropperTrigger>

Examples

Sizes

Use the size prop to change the size of the color picker.

Variants

Use the variant prop to change the visual style of the color picker. Values can be either outline or subtle.

Input Only

Combine the ColorPicker.ValueSwatch and the ColorPicker.EyeDropper on the InputGroup to render a color picker that contains only an input.

Swatch Only

Use the ColorPicker.SwatchGroup and ColorPicker.SwatchTrigger to render only the color swatches.

Trigger Only

Compose the color picker to initially show only a trigger using the ColorPicker.ValueSwatch and ColorPicker.ValueText.

Trigger Inside Input

Compose the color picker to trigger in input using the InputGroup and ColorPickerInput.

Controlled

Use the value and onValueChange props to control the state of the color picker.

Store

An alternative way to control the color picker is to use the RootProvider component and the useColorPicker store hook.

This way you can access the color picker state and methods from outside the color picker.

Change End

Use the onValueChangeEnd to listen to when the user finishes selecting a color, rather than while they are scrubbing or dragging through the color area.

Channel Slider

Combine the ColorPickerChannelSliders and the format prop to add the different color channels to the color picker.

Hook Form

Here's an example of how to integrate the color picker with react-hook-form.

Inline

Here's an example of how to display an inline version of the color picker.

Open From Dialog

To use the color picker within a dialog, avoid portalling the ColorPicker.Positioner to the document's body.

Disabled

Pass the disabled prop to disable the color picker.

Channel Input

Use the ChannelFormat.Select and ColorPicker.ChannelInput to create a color picker that allows users to select their preferred channel.

Fit Content

Pass the data-fit-content attribute to the ColorPicker.Trigger to make it fit the content.

ReadOnly

Use the readOnly prop to make the color picker component read-only.

Save Swatch

Here's an example of how to save a selected color as a swatch.

Swatches

Here's an example of how to combine the color picker with pre-defined swatches.

Swatch and Input

Here's how to compose a swatch with an input.

Swatch and Trigger

Here's how to compose a swatch with a trigger.

Guide

Getting the hex code

Use the onValueChange callback to get the color value. The value object has a toString() method that accepts different format options.

<ColorPicker.Root
  onValueChange={(details) => {
    console.log(details.value.toString("hex")) // "#ff0000"
    console.log(details.value.toString("hexa")) // "#ff0000ff" (with alpha)
    console.log(details.value.toString("rgb")) // "rgb(255, 0, 0)"
    console.log(details.value.toString("css")) // CSS color string
  }}
>
</ColorPicker.Root>

You can also access it from the store:

const picker = useColorPicker() // or useColorPickerContext()
const hexValue = picker.value.toString("hex") // "#ff0000"

The same toString() method is available when using parseColor:

import { parseColor } from "@chakra-ui/react"

const color = parseColor("#ff0000")
console.log(color.toString("hex")) // "#ff0000"
console.log(color.toString("rgba")) // "rgba(255, 0, 0, 1)"

Props

Root

Explorer

Explore the Color Picker component parts interactively. Click on parts in the sidebar to highlight them in the preview.