ColorPicker

ColorPicker is a component that allows the user to select a color.

example

Installation#

npx shadcn@latest add @primereact/colorpicker

Usage#

import { ColorPicker } from 'primereact/colorpicker';

<ColorPicker>
    <ColorPicker.Area />
    <ColorPicker.Slider channel="hue" />
    <ColorPicker.Input channel="hex" />
    <ColorPicker.Swatch />
    <ColorPicker.EyeDropper />
 
    {/* depending on the style, add following components */}
    <ColorPicker.AreaBackground />
    <ColorPicker.AreaThumb />
    <ColorPicker.SliderTrack />
    <ColorPicker.SliderThumb />
    <ColorPicker.SwatchBackground />
    <ColorPicker.TransparencyGrid />
</ColorPicker>

Examples#

Basic#

Use the format prop to change the color space. The channel prop of ColorPicker.Slider and ColorPicker.Input can be used to select the channel to control.

example

'use client';
import {
    ColorPicker,
    ColorPickerArea,
    ColorPickerEyeDropper,
    ColorPickerInput,
    ColorPickerSlider,
    ColorPickerSwatch
} from '@/components/ui/colorpicker';
import type { ColorSpace } from '@primereact/types/shared/colorpicker';
import * as React from 'react';

export default function Example() {
    const [format, setFormat] = React.useState<ColorSpace | 'hex'>('hex');

    return (
        <div>
            <div className="max-w-sm space-y-4">
                <ColorPicker format={format === 'hex' ? 'rgba' : format}>
                    <ColorPickerArea />
                    <div className="flex items-center gap-4">
                        <div className="flex-1 space-y-1">
                            <ColorPickerSlider />
                            <ColorPickerSlider channel="alpha" />
                        </div>
                        <div className="flex items-center gap-2">
                            <ColorPickerSwatch />
                            <ColorPickerEyeDropper />
                        </div>
                    </div>
                    <div className="flex gap-2">
                        <select value={format} onChange={(e) => setFormat(e.target.value as ColorSpace)}>
                            <option value="hex">HEX</option>
                            <option value="rgba">RGBA</option>
                            <option value="hsba">HSBA</option>
                            <option value="hsla">HSLA</option>
                            <option value="oklcha">OKLCHA</option>
                        </select>
                        <div className="flex gap-2 flex-1">
                            {format === 'hex' && <ColorPickerInput fluid channel="hex" />}
                            {format === 'oklcha' && <ColorPickerInput fluid channel="css" />}
                            {format === 'rgba' && (
                                <>
                                    <ColorPickerInput fluid channel="red" />
                                    <ColorPickerInput fluid channel="green" />
                                    <ColorPickerInput fluid channel="blue" />
                                </>
                            )}
                            {format === 'hsba' && (
                                <>
                                    <ColorPickerInput fluid channel="hue" />
                                    <ColorPickerInput fluid channel="saturation" />
                                    <ColorPickerInput fluid channel="brightness" />
                                </>
                            )}
                            {format === 'hsla' && (
                                <>
                                    <ColorPickerInput fluid channel="hue" />
                                    <ColorPickerInput fluid channel="saturation" />
                                    <ColorPickerInput fluid channel="lightness" />
                                </>
                            )}
                            <ColorPickerInput fluid channel="alpha" className="max-w-20" />
                        </div>
                    </div>
                </ColorPicker>
            </div>
        </div>
    );
}

Vertical Slider#

Use the orientation prop to change the orientation of the slider.

vertical-slider-demo

import { ColorPicker, ColorPickerArea, ColorPickerSlider } from '@/components/ui/colorpicker';

function VerticalSliderDemo() {
    return (
        <div>
            <ColorPicker format="hsba">
                <div className="flex gap-4">
                    <ColorPickerArea className="max-w-xs flex-1" />
                    <ColorPickerSlider orientation="vertical" className="h-auto" />
                    <ColorPickerSlider channel="saturation" orientation="vertical" />
                    <ColorPickerSlider channel="brightness" orientation="vertical" />
                    <ColorPickerSlider channel="alpha" orientation="vertical" />
                </div>
            </ColorPicker>
        </div>
    );
}

export default VerticalSliderDemo;

Controlled#

Use the value and onColorChange props to control the color.

controlled-demo

'use client';
import {
    ColorPicker,
    ColorPickerArea,
    ColorPickerEyeDropper,
    ColorPickerInput,
    ColorPickerSlider,
    ColorPickerSwatch
} from '@/components/ui/colorpicker';
import { parseColor } from '@primereact/headless/colorpicker';
import type { ColorInstance, ColorSpace } from '@primereact/types/shared/colorpicker';
import { useColorPickerChangeEvent } from '@primereact/types/shared/colorpicker';
import * as React from 'react';

export default function ControlledDemo() {
    const [format, setFormat] = React.useState<ColorSpace | 'hex'>('hex');
    const [value, setValue] = React.useState<ColorInstance>(parseColor('#000000').toFormat(format === 'hex' ? 'rgba' : format));

    return (
        <div>
            <div className="max-w-sm space-y-4">
                <ColorPicker
                    format={format === 'hex' ? 'rgba' : format}
                    onValueChange={(e: useColorPickerChangeEvent) => {
                        setValue(e.value);
                    }}
                    value={value}
                >
                    <ColorPickerArea />
                    <div className="flex items-center gap-4">
                        <div className="flex-1 space-y-1">
                            <ColorPickerSlider />
                            <ColorPickerSlider channel="alpha" />
                        </div>
                        <div className="flex items-center gap-2">
                            <ColorPickerSwatch />
                            <ColorPickerEyeDropper />
                        </div>
                    </div>
                    <div className="flex gap-2">
                        <select value={format} onChange={(e) => setFormat(e.target.value as ColorSpace)}>
                            <option value="hex">HEX</option>
                            <option value="rgba">RGBA</option>
                            <option value="hsba">HSBA</option>
                            <option value="hsla">HSLA</option>
                        </select>
                        <div className="flex gap-2 flex-1">
                            {format === 'hex' && <ColorPickerInput fluid channel="hex" />}
                            {format === 'rgba' && (
                                <>
                                    <ColorPickerInput fluid channel="red" />
                                    <ColorPickerInput fluid channel="green" />
                                    <ColorPickerInput fluid channel="blue" />
                                </>
                            )}
                            {format === 'hsba' && (
                                <>
                                    <ColorPickerInput fluid channel="hue" />
                                    <ColorPickerInput fluid channel="saturation" />
                                    <ColorPickerInput fluid channel="brightness" />
                                </>
                            )}
                            {format === 'hsla' && (
                                <>
                                    <ColorPickerInput fluid channel="hue" />
                                    <ColorPickerInput fluid channel="saturation" />
                                    <ColorPickerInput fluid channel="lightness" />
                                </>
                            )}
                            <ColorPickerInput fluid channel="alpha" />
                        </div>
                    </div>
                </ColorPicker>
            </div>
        </div>
    );
}

Advanced#

RGBAHSBAHSLAOKLCHA

advanced-demo

'use client';
import {
    ColorPicker,
    ColorPickerArea,
    ColorPickerEyeDropper,
    ColorPickerInput,
    ColorPickerSlider,
    ColorPickerSwatch
} from '@/components/ui/colorpicker';
import type { ColorSpace } from '@primereact/types/shared/colorpicker';
import * as React from 'react';

export default function AdvancedDemo() {
    const [format, setFormat] = React.useState<ColorSpace>('hsla');

    return (
        <div>
            <div className="max-w-md space-y-4">
                <select value={format} onChange={(e) => setFormat(e.target.value as ColorSpace)}>
                    <option value="rgba">RGBA</option>
                    <option value="hsba">HSBA</option>
                    <option value="hsla">HSLA</option>
                    <option value="oklcha">OKLCHA</option>
                </select>
                <ColorPicker format={format}>
                    <ColorPickerArea />
                    <ColorPickerSlider />
                    {format === 'rgba' && (
                        <>
                            <ColorPickerSlider channel="red" />
                            <ColorPickerSlider channel="green" />
                            <ColorPickerSlider channel="blue" />
                        </>
                    )}
                    {format === 'hsba' && (
                        <>
                            <ColorPickerSlider channel="saturation" />
                            <ColorPickerSlider channel="brightness" />
                        </>
                    )}

                    {format === 'hsla' && (
                        <>
                            <ColorPickerSlider channel="saturation" />
                            <ColorPickerSlider channel="lightness" />
                        </>
                    )}

                    <ColorPickerSlider channel="alpha" />
                    <div className="flex gap-2">
                        <ColorPickerSwatch />
                        <ColorPickerEyeDropper />
                        <div className="flex-1">
                            <ColorPickerInput fluid channel="hex" />
                        </div>
                    </div>
                    <div className="grid grid-cols-5 gap-2 items-center">
                        <span>RGBA</span>
                        <ColorPickerInput fluid channel="red" />
                        <ColorPickerInput fluid channel="green" />
                        <ColorPickerInput fluid channel="blue" />
                        <ColorPickerInput fluid channel="alpha" />

                        <span>HSBA</span>
                        <ColorPickerInput fluid channel="hue" />
                        <ColorPickerInput fluid channel="saturation" />
                        <ColorPickerInput fluid channel="brightness" />
                        <ColorPickerInput fluid channel="alpha" />

                        <span>HSLA</span>
                        <ColorPickerInput fluid channel="hue" />
                        <ColorPickerInput fluid channel="saturation" />
                        <ColorPickerInput fluid channel="lightness" />
                        <ColorPickerInput fluid channel="alpha" />

                        <span>OKLCHA</span>
                        <ColorPickerInput fluid channel="L" />
                        <ColorPickerInput fluid channel="C" />
                        <ColorPickerInput fluid channel="H" />
                        <ColorPickerInput fluid channel="alpha" />
                    </div>
                    <div className="flex gap-2">
                        <ColorPickerInput fluid channel="css" />
                    </div>
                </ColorPicker>
            </div>
        </div>
    );
}

colorManager#

Color class#

The Color class is the base class for all color classes. It provides the basic functionality for all color classes.

clone(): Clones the color.
toString(format): Converts the color to a string.
toFormat(format): Converts the color to a specific format.
toJSON(): Converts the color to a JSON object.
getChannelRange(channel): Returns the range of the channel.
getFormat(): Returns the format of the color.
getChannels(): Returns the channels of the color.
getChannelValue(channel): Returns the value of the channel.
getColorAxes(xyChannels): Returns the axes of the color.
incChannelValue(channel, step): Increments the value of the channel by the step.
decChannelValue(channel, step): Decrements the value of the channel by the step.
withChannelValue(channel, value): Returns a new color with the value of the channel changed.

Accessibility#

ColorPickerArea#

aria-label is used to describe the component. aria-roledescription is used to describe the role of the component. aria-valuemin, aria-valuemax, aria-valuenow, aria-valuetext are used to describe the value of the component.

Keyboard Support#

Key	Function
`tab`	Moves focus to the area thumb.
`right arrow`	Moves the area thumb to the right.
`left arrow`	Moves the area thumb to the left.
`up arrow`	Moves the area thumb to the up.
`down arrow`	Moves the area thumb to the down.

ColorPickerSlider#

aria-label is used to describe the component. aria-valuemin, aria-valuemax, aria-valuenow, aria-valuetext are used to describe the value of the component.

Keyboard Support#

Key	Function
`tab`	Moves focus to the slider thumb.
`up arrow` \|\| `left arrow`	Decrements the slider thumb.
`down arrow` \|\| `right arrow`	Increments the slider thumb.

ColorPicker

Installation#

Usage#

Examples#

Basic#

Vertical Slider#

Controlled#

Advanced#

colorManager#

Color class#

Accessibility#

ColorPickerArea#

Screen Reader Support#

Keyboard Support#

ColorPickerSlider#

Screen Reader Support#

Keyboard Support#