Components

ColorPicker

A complete color picker component with hue, saturation, and alpha controls

Features

  • Compound Components: Modular design with sub-components
  • Eye Dropper: Built-in screen color picker (where supported)
  • Touch & Mouse Support: Works on all devices
  • Color Formats: Supports hex, rgb, rgba, hsl, hsla, hsv, hsva

Basic Usage

Color Values

HEX#ff6b9c
RGB255, 107, 156
HSL340°, 100%, 71%
HSV340°, 58%, 100%
Alpha100%
import { ColorPicker, useColorState } from 'react-beautiful-color';
import { Pipette } from 'lucide-react';

export function BasicColorPickerExample() {
const [{ colorInput, colorState }, setColor] = useColorState({ type: 'hex', value: '#ff6b9d' });

return (
<div className="flex w-full items-center justify-center py-10">
  <ColorPicker
      color={colorInput}
      onChange={setColor}
      className="border-fd-border rounded-2xl border bg-white shadow-lg dark:bg-black/200"
  >
    <ColorPicker.Saturation className="mb-3 flex-1" />
      <div className="flex items-center gap-3 p-3 pt-0">
        <ColorPicker.EyeDropper className="hover:bg-black/10 dark:hover:bg-white/10">
          <Pipette
            size={20}
            className="dark:text-white"
          />
        </ColorPicker.EyeDropper>
          <div className="flex flex-1 flex-col gap-3">
            <ColorPicker.Hue className="h-4" />
            <ColorPicker.Alpha className="h-4" />
          </div>
      </div>
  </ColorPicker>

  <div className="mt-20 ml-8 flex min-w-64 flex-col">
    <div className="bg-card mb-4 rounded-lg border p-4">
      <h4 className="text-card-foreground mb-3 text-sm font-semibold">Color Values</h4>
      <div className="space-y-3">
        <div className="flex items-center justify-between">
          <span className="text-muted-foreground text-sm font-medium">HEX</span>
          <code className="bg-muted rounded px-2 py-1 font-mono text-sm">{colorState.hex}</code>
        </div>
        <div className="flex items-center justify-between">
          <span className="text-muted-foreground text-sm font-medium">RGB</span>
          <code className="bg-muted rounded px-2 py-1 font-mono text-sm">
            {colorState.rgb.r}, {colorState.rgb.g}, {colorState.rgb.b}
          </code>
        </div>
        <div className="flex items-center justify-between">
          <span className="text-muted-foreground text-sm font-medium">HSL</span>
          <code className="bg-muted rounded px-2 py-1 font-mono text-sm">
            {colorState.hsl.h}°, {colorState.hsl.s}%, {colorState.hsl.l}%
          </code>
        </div>
        <div className="flex items-center justify-between">
          <span className="text-muted-foreground text-sm font-medium">HSV</span>
          <code className="bg-muted rounded px-2 py-1 font-mono text-sm">
            {colorState.hsv.h}°, {colorState.hsv.s}%, {colorState.hsv.v}%
          </code>
        </div>
        <div className="flex items-center justify-between">
          <span className="text-muted-foreground text-sm font-medium">Alpha</span>
          <code className="bg-muted rounded px-2 py-1 font-mono text-sm">{Math.round(colorState.alpha * 100)}%</code>
        </div>
      </div>
    </div>

    <div className="flex items-center justify-center">
      <div
        className="border-border h-16 w-32 rounded-lg border-2 shadow-sm"
        style={{
          backgroundColor: 'rgba(' + colorState.rgb.r + ', ' + colorState.rgb.g + ', ' + colorState.rgb.b + ', ' + colorState.alpha + ')',
          ...(colorState.alpha < 1 && {
            backgroundImage:
              'url(\'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill-opacity=".1"><rect x="8" width="8" height="8"/><rect y="8" width="8" height="8"/></svg>\')',
            backgroundSize: '16px 16px',
          }),
        }}
      />
    </div>
  </div>
</div>
);
}
import { ColorPicker, Color } from 'react-beautiful-color';
import { Pipette } from 'lucide-react';

export function BasicColorPickerExampleUseState() {
    const [color, setColor] = useState(new Color({ type: 'hex', value: '#ff6b9d' }));

    const rgba = color.getRgba();
    const hex = color.getHex();
    const hsl = color.getHsl();
    const hsv = color.getHsv();

    return (
        <div className="flex w-full items-center justify-center py-10">
            <ColorPicker
                color={color}
                onChange={setColor}
                className="border-fd-border rounded-2xl border bg-white shadow-lg dark:bg-black/200"
            >
                <ColorPicker.Saturation className="mb-3 flex-1" />

                <div className="flex items-center gap-3 p-3 pt-0">
                    <ColorPicker.EyeDropper className="hover:bg-black/10 dark:hover:bg-white/10">
                        <Pipette
                        size={20}
                        className="dark:text-white"
                        />
                    </ColorPicker.EyeDropper>

                    <div className="flex flex-1 flex-col gap-3">
                        <ColorPicker.Hue className="h-4" />
                        <ColorPicker.Alpha className="h-4" />
                    </div>
                </div>
            </ColorPicker>

            <div className="mt-20 ml-8 flex min-w-64 flex-col">
                <div className="bg-card mb-4 rounded-lg border p-4">
                    <h4 className="text-card-foreground mb-3 text-sm font-semibold">Color Values</h4>
                    <div className="space-y-3">
                        <div className="flex items-center justify-between">
                            <span className="text-muted-foreground text-sm font-medium">HEX</span>
                            <code className="bg-muted rounded px-2 py-1 font-mono text-sm">{hex}</code>
                        </div>
                        <div className="flex items-center justify-between">
                            <span className="text-muted-foreground text-sm font-medium">RGB</span>
                            <code className="bg-muted rounded px-2 py-1 font-mono text-sm">
                            {rgba.r}, {rgba.g}, {rgba.b}
                        </code>
                        </div>
                            <div className="flex items-center justify-between">
                            <span className="text-muted-foreground text-sm font-medium">HSL</span>
                            <code className="bg-muted rounded px-2 py-1 font-mono text-sm">
                            {hsl.h}°, {hsl.s}%, {hsl.l}%
                        </code>
                        </div>
                            <div className="flex items-center justify-between">
                            <span className="text-muted-foreground text-sm font-medium">HSV</span>
                            <code className="bg-muted rounded px-2 py-1 font-mono text-sm">
                            {hsv.h}°, {hsv.s}%, {hsv.v}%
                        </code>
                        </div>
                            <div className="flex items-center justify-between">
                            <span className="text-muted-foreground text-sm font-medium">Alpha</span>
                            <code className="bg-muted rounded px-2 py-1 font-mono text-sm">{Math.round(rgba.a * 100)}%</code>
                        </div>
                    </div>
                </div>

                <div className="flex items-center justify-center">
                    <div
                        className="border-border h-16 w-32 rounded-lg border-2 shadow-sm"
                        style={{
                        backgroundColor: 'rgba(' + rgba.r + ', ' + rgba.g + ', ' + rgba.b + ', ' + rgba.a + ')',
                        ...(rgba.a < 1 && {
                            backgroundImage:
                            'url(\'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill-opacity=".1"><rect x="8" width="8" height="8"/><rect y="8" width="8" height="8"/></svg>\')',
                            backgroundSize: '16px 16px',
                        }),
                        }}
                    />
                </div>
            </div>
        </div>
    );
}

Props

PropTypeDefaultDescription
defaultColorColorInput | Color-Initial color value
colorColorInput | Color-Color value
onChange(color: Color) => void-Callback fired when color changes
classNamestring-Additional CSS classes

Color Input Format

The ColorInput type supports multiple color formats:

// Hex color input
const hexColor = { type: 'hex', value: '#ff6b9d' };
// RGB color input
const rgbColor = { type: 'rgb', r: 255, g: 107, b: 157 };

// RGBA color input (with alpha)
const rgbaColor = { type: 'rgba', r: 255, g: 107, b: 157, a: 0.8 };
// HSL color input
const hslColor = { type: 'hsl', h: 334, s: 100, l: 71 };

// HSLA color input (with alpha)
const hslaColor = { type: 'hsla', h: 334, s: 100, l: 71, a: 0.8 };
// HSV color input
const hsvColor = { type: 'hsv', h: 334, s: 58, v: 100 };

// HSVA color input (with alpha)
const hsvaColor = { type: 'hsva', h: 334, s: 58, v: 100, a: 0.8 };

Sub-Components

ColorPicker.Saturation

The saturation and brightness selection area.

<ColorPicker.Saturation className="mb-3 flex-1" />

ColorPicker.Hue

The hue selection slider.

  <ColorPicker.Hue className="h-4" />

ColorPicker.Alpha

The alpha/transparency selection slider.

<ColorPicker.Alpha className="h-4" />

ColorPicker.EyeDropper

Button to activate the browser's eye dropper tool. The button is not rendered if the user's browser doesn't support it.

<ColorPicker.EyeDropper>
  {/* Icon content */}
</ColorPicker.EyeDropper>

Alpha

A transparency slider component for controlling color opacity

EyeDropper

Pick colors from anywhere on the screen using the browser's native eye dropper tool