ColorPicker

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

basic-demo

Usage#

import { ColorPicker } from '@primereact/ui/colorpicker';
<ColorPicker.Root>
    <ColorPicker.Area>
        <ColorPicker.AreaBackground />
        <ColorPicker.AreaThumb />
    </ColorPicker.Area>
    <ColorPicker.Slider>
        <ColorPicker.TransparencyGrid />
        <ColorPicker.SliderTrack />
        <ColorPicker.SliderThumb />
    </ColorPicker.Slider>
    <ColorPicker.Swatch>
        <ColorPicker.TransparencyGrid />
        <ColorPicker.SwatchBackground />
    </ColorPicker.Swatch>
    <ColorPicker.EyeDropper>
        <EyeDropperIcon />
    </ColorPicker.EyeDropper>
    <ColorPicker.Input />
</ColorPicker.Root>

Examples#

With Popover#

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

popover-demo
import { EyeDropperIcon } from '@primereact/icons';
import { ColorPicker } from '@primereact/ui/colorpicker';
import { Popover } from '@primereact/ui/popover';

function PopoverDemo() {
    return (
        <div className="flex items-center justify-center">
            <ColorPicker.Root defaultColor="#0099ff">
                <Popover.Root>
                    <Popover.Trigger>
                        <ColorPicker.Swatch>
                            <ColorPicker.TransparencyGrid />
                            <ColorPicker.SwatchBackground />
                        </ColorPicker.Swatch>
                    </Popover.Trigger>
                    <Popover.Portal>
                        <Popover.Positioner sideOffset={12} side="left" align="start">
                            <Popover.Content className="w-72 p-3 space-y-3">
                                <Popover.Arrow />
                                <ColorPicker.Area>
                                    <ColorPicker.AreaBackground />
                                    <ColorPicker.AreaThumb />
                                </ColorPicker.Area>
                                <ColorPicker.Slider>
                                    <ColorPicker.TransparencyGrid />
                                    <ColorPicker.SliderTrack />
                                    <ColorPicker.SliderThumb />
                                </ColorPicker.Slider>
                                <ColorPicker.Slider channel="alpha">
                                    <ColorPicker.TransparencyGrid />
                                    <ColorPicker.SliderTrack />
                                    <ColorPicker.SliderThumb />
                                </ColorPicker.Slider>
                                <div className="flex items-center gap-2">
                                    <ColorPicker.Input channel="hex" className="flex-1" />
                                    <ColorPicker.EyeDropper iconOnly severity="secondary" variant="outlined">
                                        <EyeDropperIcon />
                                    </ColorPicker.EyeDropper>
                                </div>
                            </Popover.Content>
                        </Popover.Positioner>
                    </Popover.Portal>
                </Popover.Root>
            </ColorPicker.Root>
        </div>
    );
}

export default PopoverDemo;

Vertical Slider#

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

vertical-slider-demo
import { ColorPicker } from '@primereact/ui/colorpicker';

function VerticalSliderDemo() {
    return (
        <div className="flex items-center justify-center">
            <ColorPicker.Root format="hsba">
                <div className="flex gap-4 max-w-md w-full mx-auto">
                    <ColorPicker.Area className="flex-1">
                        <ColorPicker.AreaBackground />
                        <ColorPicker.AreaThumb />
                    </ColorPicker.Area>
                    <ColorPicker.Slider orientation="vertical">
                        <ColorPicker.TransparencyGrid />
                        <ColorPicker.SliderTrack />
                        <ColorPicker.SliderThumb />
                    </ColorPicker.Slider>
                    <ColorPicker.Slider channel="saturation" orientation="vertical">
                        <ColorPicker.TransparencyGrid />
                        <ColorPicker.SliderTrack />
                        <ColorPicker.SliderThumb />
                    </ColorPicker.Slider>
                    <ColorPicker.Slider channel="brightness" orientation="vertical">
                        <ColorPicker.TransparencyGrid />
                        <ColorPicker.SliderTrack />
                        <ColorPicker.SliderThumb />
                    </ColorPicker.Slider>
                    <ColorPicker.Slider channel="alpha" orientation="vertical">
                        <ColorPicker.TransparencyGrid />
                        <ColorPicker.SliderTrack />
                        <ColorPicker.SliderThumb />
                    </ColorPicker.Slider>
                </div>
            </ColorPicker.Root>
        </div>
    );
}

export default VerticalSliderDemo;

Controlled#

Use the value and onColorChange props to control the color.

onValueChange: #000000
onValueChangeEnd: #000000
controlled-demo
'use client';
import { parseColor } from '@primereact/headless/colorpicker';
import { EyeDropperIcon } from '@primereact/icons';
import type { ColorInstance } from '@primereact/types/shared/colorpicker';
import { useColorPickerChangeEvent } from '@primereact/types/shared/colorpicker';
import { ColorPicker } from '@primereact/ui/colorpicker';
import * as React from 'react';

export default function ControlledDemo() {
    const [value, setValue] = React.useState<ColorInstance>(parseColor('#000000'));
    const [endValue, setEndValue] = React.useState<ColorInstance>(parseColor('#000000'));

    return (
        <div className="max-w-xs mx-auto space-y-3">
            <div className="text-center font-mono text-sm text-surface-500 mb-4">onValueChange: {value.toString('hex')}</div>
            <div className="text-center font-mono text-sm text-surface-500 mb-4">onValueChangeEnd: {endValue.toString('hex')}</div>
            <ColorPicker.Root
                value={value}
                onValueChange={(e: useColorPickerChangeEvent) => setValue(e.value)}
                onValueChangeEnd={(e: useColorPickerChangeEvent) => setEndValue(e.value)}
            >
                <ColorPicker.Area>
                    <ColorPicker.AreaBackground />
                    <ColorPicker.AreaThumb />
                </ColorPicker.Area>
                <div className="flex items-center gap-2">
                    <div className="flex-1 space-y-1 mr-1">
                        <ColorPicker.Slider>
                            <ColorPicker.TransparencyGrid />
                            <ColorPicker.SliderTrack />
                            <ColorPicker.SliderThumb />
                        </ColorPicker.Slider>
                        <ColorPicker.Slider channel="alpha">
                            <ColorPicker.TransparencyGrid />
                            <ColorPicker.SliderTrack />
                            <ColorPicker.SliderThumb />
                        </ColorPicker.Slider>
                    </div>
                    <ColorPicker.Swatch>
                        <ColorPicker.TransparencyGrid />
                        <ColorPicker.SwatchBackground />
                    </ColorPicker.Swatch>
                    <ColorPicker.EyeDropper iconOnly severity="secondary" variant="outlined">
                        <EyeDropperIcon />
                    </ColorPicker.EyeDropper>
                </div>
                <ColorPicker.Input fluid channel="hex" />
            </ColorPicker.Root>
        </div>
    );
}

Advanced#

CSS
advanced-demo
'use client';
import { ChevronDown } from '@primeicons/react';
import { EyeDropperIcon } from '@primereact/icons';
import type { ColorSpace } from '@primereact/types/shared/colorpicker';
import { SelectValueChangeEvent } from '@primereact/types/shared/select';
import { ColorPicker } from '@primereact/ui/colorpicker';
import { FloatLabel } from '@primereact/ui/floatlabel';
import { InputGroup } from '@primereact/ui/inputgroup';
import { Label } from '@primereact/ui/label';
import { Select } from '@primereact/ui/select';
import * as React from 'react';

const options = [
    { label: 'RGBA', value: 'rgba' },
    { label: 'HSBA', value: 'hsba' },
    { label: 'HSLA', value: 'hsla' },
    { label: 'OKLCHA', value: 'oklcha' }
];

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

    return (
        <div>
            <div className="max-w-xs mx-auto space-y-3">
                <Select.Root
                    value={format}
                    onValueChange={(e: SelectValueChangeEvent) => setFormat(e.value as ColorSpace)}
                    options={options}
                    optionLabel="label"
                    optionValue="value"
                    fluid
                >
                    <Select.Trigger>
                        <Select.Value placeholder="Select a format" />
                        <Select.Icon>
                            <ChevronDown />
                        </Select.Icon>
                    </Select.Trigger>
                    <Select.Portal>
                        <Select.Positioner>
                            <Select.Panel>
                                <Select.List>
                                    <Select.Options style={{ maxHeight: '14rem' }} />
                                </Select.List>
                            </Select.Panel>
                        </Select.Positioner>
                    </Select.Portal>
                </Select.Root>
                <ColorPicker.Root format={format}>
                    <ColorPicker.Area>
                        <ColorPicker.AreaBackground />
                        <ColorPicker.AreaThumb />
                    </ColorPicker.Area>
                    <ColorPicker.Slider>
                        <ColorPicker.TransparencyGrid />
                        <ColorPicker.SliderTrack />
                        <ColorPicker.SliderThumb />
                    </ColorPicker.Slider>
                    {format === 'rgba' && (
                        <>
                            <ColorPicker.Slider channel="red">
                                <ColorPicker.TransparencyGrid />
                                <ColorPicker.SliderTrack />
                                <ColorPicker.SliderThumb />
                            </ColorPicker.Slider>
                            <ColorPicker.Slider channel="green">
                                <ColorPicker.TransparencyGrid />
                                <ColorPicker.SliderTrack />
                                <ColorPicker.SliderThumb />
                            </ColorPicker.Slider>
                            <ColorPicker.Slider channel="blue">
                                <ColorPicker.TransparencyGrid />
                                <ColorPicker.SliderTrack />
                                <ColorPicker.SliderThumb />
                            </ColorPicker.Slider>
                        </>
                    )}
                    {format === 'hsba' && (
                        <>
                            <ColorPicker.Slider channel="saturation">
                                <ColorPicker.TransparencyGrid />
                                <ColorPicker.SliderTrack />
                                <ColorPicker.SliderThumb />
                            </ColorPicker.Slider>
                            <ColorPicker.Slider channel="brightness">
                                <ColorPicker.TransparencyGrid />
                                <ColorPicker.SliderTrack />
                                <ColorPicker.SliderThumb />
                            </ColorPicker.Slider>
                        </>
                    )}

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

                    <ColorPicker.Slider channel="alpha">
                        <ColorPicker.TransparencyGrid />
                        <ColorPicker.SliderTrack />
                        <ColorPicker.SliderThumb />
                    </ColorPicker.Slider>
                    <div className="flex gap-2">
                        <ColorPicker.Swatch>
                            <ColorPicker.TransparencyGrid />
                            <ColorPicker.SwatchBackground />
                        </ColorPicker.Swatch>
                        <ColorPicker.EyeDropper iconOnly severity="secondary" variant="outlined">
                            <EyeDropperIcon />
                        </ColorPicker.EyeDropper>
                        <ColorPicker.Input channel="hex" className="flex-1" />
                    </div>
                    <InputGroup.Root>
                        <FloatLabel variant="in">
                            <ColorPicker.Input channel="red" type="text" size="small" />
                            <Label htmlFor="in_label">Red</Label>
                        </FloatLabel>
                        <FloatLabel variant="in">
                            <ColorPicker.Input channel="green" type="text" size="small" />
                            <Label htmlFor="in_label">Green</Label>
                        </FloatLabel>
                        <FloatLabel variant="in">
                            <ColorPicker.Input channel="blue" type="text" size="small" />
                            <Label htmlFor="in_label">Blue</Label>
                        </FloatLabel>
                        <FloatLabel variant="in">
                            <ColorPicker.Input channel="alpha" type="text" size="small" />
                            <Label htmlFor="in_label">Alpha</Label>
                        </FloatLabel>
                    </InputGroup.Root>
                    <InputGroup.Root>
                        <FloatLabel variant="in">
                            <ColorPicker.Input channel="hue" type="text" size="small" />
                            <Label htmlFor="in_label">Hue</Label>
                        </FloatLabel>
                        <FloatLabel variant="in">
                            <ColorPicker.Input channel="saturation" type="text" size="small" />
                            <Label htmlFor="in_label">Saturation</Label>
                        </FloatLabel>
                        <FloatLabel variant="in">
                            <ColorPicker.Input channel="brightness" type="text" size="small" />
                            <Label htmlFor="in_label">Brightness</Label>
                        </FloatLabel>
                        <FloatLabel variant="in">
                            <ColorPicker.Input channel="alpha" type="text" size="small" />
                            <Label htmlFor="in_label">Alpha</Label>
                        </FloatLabel>
                    </InputGroup.Root>
                    <InputGroup.Root>
                        <FloatLabel variant="in">
                            <ColorPicker.Input channel="hue" type="text" size="small" />
                            <Label htmlFor="in_label">Hue</Label>
                        </FloatLabel>
                        <FloatLabel variant="in">
                            <ColorPicker.Input channel="saturation" type="text" size="small" />
                            <Label htmlFor="in_label">Saturation</Label>
                        </FloatLabel>
                        <FloatLabel variant="in">
                            <ColorPicker.Input channel="lightness" type="text" size="small" />
                            <Label htmlFor="in_label">Lightness</Label>
                        </FloatLabel>
                        <FloatLabel variant="in">
                            <ColorPicker.Input channel="alpha" type="text" size="small" />
                            <Label htmlFor="in_label">Alpha</Label>
                        </FloatLabel>
                    </InputGroup.Root>
                    <InputGroup.Root>
                        <FloatLabel variant="in">
                            <ColorPicker.Input channel="L" type="text" size="small" />
                            <Label htmlFor="in_label">Lightness</Label>
                        </FloatLabel>
                        <FloatLabel variant="in">
                            <ColorPicker.Input channel="C" type="text" size="small" />
                            <Label htmlFor="in_label">Chroma</Label>
                        </FloatLabel>
                        <FloatLabel variant="in">
                            <ColorPicker.Input channel="H" type="text" size="small" />
                            <Label htmlFor="in_label">Hue</Label>
                        </FloatLabel>
                        <FloatLabel variant="in">
                            <ColorPicker.Input channel="alpha" type="text" size="small" />
                            <Label htmlFor="in_label">Alpha</Label>
                        </FloatLabel>
                    </InputGroup.Root>

                    <InputGroup.Root>
                        <InputGroup.Addon>CSS</InputGroup.Addon>
                        <ColorPicker.Input channel="css" type="text" fluid />
                    </InputGroup.Root>
                </ColorPicker.Root>
            </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.10 on React by PrimeTek