Usage

import {
  ColorPicker,
  ColorArea,
  ColorSlider,
  ColorSwatch,
  ColorField,
  ColorSwatchPicker,
} from '@heroui/react';

Anatomy

The ColorPicker is a composable component that combines multiple color components:

import { ColorPicker, ColorArea, ColorSlider, ColorSwatch, Label } from '@heroui/react';

export default () => (
  <ColorPicker defaultValue="#0485F7">
    <ColorPicker.Trigger>
      <ColorSwatch />
      <Label>Pick a color</Label>
    </ColorPicker.Trigger>
    <ColorPicker.Popover>
      <ColorArea colorSpace="hsb" xChannel="saturation" yChannel="brightness">
        <ColorArea.Thumb />
      </ColorArea>
      <ColorSlider channel="hue" colorSpace="hsb">
        <ColorSlider.Track>
          <ColorSlider.Thumb />
        </ColorSlider.Track>
      </ColorSlider>
    </ColorPicker.Popover>
  </ColorPicker>
);

Examples

Controlled

Selected: #325578

With Swatches

With Fields

Use ColorField to allow users to edit individual color channel values with a Select to switch between color spaces.

With Sliders

Use multiple ColorSlider components to adjust each channel of a color value.

Customization

Tailwind CSS

Global CSS

To customize the ColorPicker component classes, you can use the @layer components directive. Learn more.

@layer components {
  .color-picker {
    @apply inline-flex;
  }

  .color-picker__trigger {
    @apply inline-flex items-center gap-4 rounded-lg;
  }

  .color-picker__popover {
    @apply p-4 rounded-xl;
  }
}

Styling Reference

HeroUI follows the BEM methodology to ensure component variants and states are reusable and easy to customize.

CSS Classes

The ColorPicker component uses these CSS classes (View source styles):

Base Classes

.color-picker - Base container
.color-picker__trigger - Trigger button
.color-picker__popover - Popover container

Interactive States

The component supports both CSS pseudo-classes and data attributes for flexibility:

Focus: :focus-visible or [data-focus-visible="true"]
Disabled: :disabled or [data-disabled="true"]

API Reference

ColorPicker

Inherits from React Aria ColorPicker.

Prop	Type	Default	Description
`value`	`string \| Color`	-	The current color value (controlled)
`defaultValue`	`string \| Color`	-	The default color value (uncontrolled)
`onChange`	`(color: Color) => void`	-	Handler called when the color changes
`children`	`React.ReactNode`	-	Content of the color picker (Trigger, Popover, etc.)
`className`	`string`	-	Additional CSS classes

ColorPicker.Trigger

Prop	Type	Default	Description
`children`	`React.ReactNode \| ((renderProps) => React.ReactNode)`	-	Trigger content or render prop
`className`	`string`	-	Additional CSS classes

ColorPicker.Popover

Prop	Type	Default	Description
`placement`	`Placement`	`"bottom left"`	Placement of the popover
`children`	`React.ReactNode`	-	Popover content
`className`	`string`	-	Additional CSS classes

Color

Represents a color value. See React Aria Color for full API.

Method	Description
`toString(format)`	Converts the color to a string in the given format (hex, rgb, hsl, hsb, css)
`toFormat(format)`	Converts the color to the given format and returns a new Color object
`getChannelValue(channel)`	Returns the numeric value for a given channel
`withChannelValue(channel, value)`	Sets the numeric value for a channel and returns a new Color

parseColor

import { parseColor } from 'react-aria-components';

// Parse from string
const color = parseColor('#ff0000');
const hslColor = parseColor('hsl(0, 100%, 50%)');

ColorArea

ColorSlider

ColorSwatch

ColorPicker

On this page