ColorPicker

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

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.

basic-demo.tsx
'use client';

import type { ColorSpace } from '@primereact/types/shared/colorpicker';
import { ColorPicker } from 'primereact/colorpicker';
import * as React from 'react';

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

    return (
        <div>
            <div className="max-w-sm space-y-4">
                <ColorPicker format={format === 'hex' ? 'rgba' : format}>
                    <ColorPicker.Area />
                    <div className="flex items-center gap-4">
                        <div className="flex-1 space-y-1">
                            <ColorPicker.Slider />
                            <ColorPicker.Slider channel="alpha" />
                        </div>
                        <div className="flex items-center gap-2">
                            <ColorPicker.Swatch />
                            <ColorPicker.EyeDropper />
                        </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' && <ColorPicker.Input fluid channel="hex" />}
                            {format === 'oklcha' && <ColorPicker.Input fluid channel="css" />}
                            {format === 'rgba' && (
                                <>
                                    <ColorPicker.Input fluid channel="red" />
                                    <ColorPicker.Input fluid channel="green" />
                                    <ColorPicker.Input fluid channel="blue" />
                                </>
                            )}
                            {format === 'hsba' && (
                                <>
                                    <ColorPicker.Input fluid channel="hue" />
                                    <ColorPicker.Input fluid channel="saturation" />
                                    <ColorPicker.Input fluid channel="brightness" />
                                </>
                            )}
                            {format === 'hsla' && (
                                <>
                                    <ColorPicker.Input fluid channel="hue" />
                                    <ColorPicker.Input fluid channel="saturation" />
                                    <ColorPicker.Input fluid channel="lightness" />
                                </>
                            )}
                            <ColorPicker.Input fluid channel="alpha" className="max-w-20" />
                        </div>
                    </div>
                </ColorPicker>
            </div>
        </div>
    );
}

With Popover#

Use the ColorPicker inside a Popover to put the ColorPicker to the top of the component.

popover-demo.tsx
'use client';

import { ColorPicker } from 'primereact/colorpicker';
import { Popover } from 'primereact/popover';

function PopoverDemo() {
    return (
        <div>
            <ColorPicker defaultColor="#0099ff">
                <Popover>
                    <Popover.Trigger unstyled>
                        <ColorPicker.Swatch />
                    </Popover.Trigger>
                    <Popover.Portal>
                        <Popover.Content className="min-w-72 w-full">
                            <div className="w-full space-y-3">
                                <ColorPicker.Area />
                                <div className="flex items-center gap-4">
                                    <div className="flex-1 space-y-1">
                                        <ColorPicker.Slider />
                                        <ColorPicker.Slider channel="alpha" />
                                    </div>
                                    <ColorPicker.EyeDropper />
                                </div>
                                <ColorPicker.Input fluid channel="hex" />
                            </div>
                        </Popover.Content>
                    </Popover.Portal>
                </Popover>
            </ColorPicker>
        </div>
    );
}

export default PopoverDemo;

Vertical Slider#

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

vertical-slider-demo.tsx
'use client';

import { ColorPicker } from 'primereact/colorpicker';

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

export default VerticalSliderDemo;

Controlled#

Use the value and onColorChange props to control the color.

controlled-demo.tsx
'use client';

import { parseColor } from '@primereact/headless/colorpicker';
import type { ColorInstance, ColorSpace } from '@primereact/types/shared/colorpicker';
import { useColorPickerChangeEvent } from '@primereact/types/shared/colorpicker';
import { ColorPicker } from 'primereact/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}
                >
                    <ColorPicker.Area />
                    <div className="flex items-center gap-4">
                        <div className="flex-1 space-y-1">
                            <ColorPicker.Slider />
                            <ColorPicker.Slider channel="alpha" />
                        </div>
                        <div className="flex items-center gap-2">
                            <ColorPicker.Swatch />
                            <ColorPicker.EyeDropper />
                        </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' && <ColorPicker.Input fluid channel="hex" />}
                            {format === 'rgba' && (
                                <>
                                    <ColorPicker.Input fluid channel="red" />
                                    <ColorPicker.Input fluid channel="green" />
                                    <ColorPicker.Input fluid channel="blue" />
                                </>
                            )}
                            {format === 'hsba' && (
                                <>
                                    <ColorPicker.Input fluid channel="hue" />
                                    <ColorPicker.Input fluid channel="saturation" />
                                    <ColorPicker.Input fluid channel="brightness" />
                                </>
                            )}
                            {format === 'hsla' && (
                                <>
                                    <ColorPicker.Input fluid channel="hue" />
                                    <ColorPicker.Input fluid channel="saturation" />
                                    <ColorPicker.Input fluid channel="lightness" />
                                </>
                            )}
                            <ColorPicker.Input fluid channel="alpha" />
                        </div>
                    </div>
                </ColorPicker>
            </div>
        </div>
    );
}

Advanced#

RGBAHSBAHSLAOKLCHA
advanced-demo.tsx
'use client';

import type { ColorSpace } from '@primereact/types/shared/colorpicker';
import { ColorPicker } from 'primereact/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}>
                    <ColorPicker.Area />
                    <ColorPicker.Slider />
                    {format === 'rgba' && (
                        <>
                            <ColorPicker.Slider channel="red" />
                            <ColorPicker.Slider channel="green" />
                            <ColorPicker.Slider channel="blue" />
                        </>
                    )}
                    {format === 'hsba' && (
                        <>
                            <ColorPicker.Slider channel="saturation" />
                            <ColorPicker.Slider channel="brightness" />
                        </>
                    )}

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

                    <ColorPicker.Slider channel="alpha" />
                    <div className="flex gap-2">
                        <ColorPicker.Swatch />
                        <ColorPicker.EyeDropper />
                        <div className="flex-1">
                            <ColorPicker.Input fluid channel="hex" />
                        </div>
                    </div>
                    <div className="grid grid-cols-5 gap-2 items-center">
                        <span>RGBA</span>
                        <ColorPicker.Input fluid channel="red" />
                        <ColorPicker.Input fluid channel="green" />
                        <ColorPicker.Input fluid channel="blue" />
                        <ColorPicker.Input fluid channel="alpha" />

                        <span>HSBA</span>
                        <ColorPicker.Input fluid channel="hue" />
                        <ColorPicker.Input fluid channel="saturation" />
                        <ColorPicker.Input fluid channel="brightness" />
                        <ColorPicker.Input fluid channel="alpha" />

                        <span>HSLA</span>
                        <ColorPicker.Input fluid channel="hue" />
                        <ColorPicker.Input fluid channel="saturation" />
                        <ColorPicker.Input fluid channel="lightness" />
                        <ColorPicker.Input fluid channel="alpha" />

                        <span>OKLCHA</span>
                        <ColorPicker.Input fluid channel="L" />
                        <ColorPicker.Input fluid channel="C" />
                        <ColorPicker.Input fluid channel="H" />
                        <ColorPicker.Input fluid channel="alpha" />
                    </div>
                    <div className="flex gap-2">
                        <ColorPicker.Input 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#

Screen Reader Support#

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#

KeyFunction
tabMoves focus to the area thumb.
right arrowMoves the area thumb to the right.
left arrowMoves the area thumb to the left.
up arrowMoves the area thumb to the up.
down arrowMoves the area thumb to the down.

ColorPickerSlider#

Screen Reader Support#

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#

KeyFunction
tabMoves focus to the slider thumb.
up arrow || left arrowDecrements the slider thumb.
down arrow || right arrowIncrements the slider thumb.
PrimeReact 11.0.0-alpha.8 on React by PrimeTek