Usage #
Examples #
Basic #
InputColor is a composable color picker with area, slider, swatch, and input sub-components.
With Popover #
InputColor can be used inside a Popover, with a color swatch as the trigger.
Vertical Slider #
Sliders support vertical orientation, displayed alongside the color area.
Controlled #
Demonstrates tracking color value changes during interaction and when interaction ends.
Advanced #
Advanced color picker with per-format channel sliders, input groups for RGBA, HSBA, HSLA, OKLCH channels, and a CSS output.
Forms #
InputColor integrates seamlessly with the PrimeVue Forms library.
Color Manager #
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.
- getSpaceAxes(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.
- setChannelValue(channel, value): Returns a new color with the value of the channel changed.
Accessibility #
InputColorArea
Screen Reader
The area handle has role="slider" with aria-roledescription="2d slider". It includes aria-label describing the two axes (e.g., "saturation and brightness"), aria-valuemin, aria-valuemax, aria-valuenow, and aria-valuetext describing the current channel values.
Keyboard Support
| Key | Function |
|---|---|
| tab | Moves focus to the area handle. |
| right arrow | Moves the area handle to the right. |
| left arrow | Moves the area handle to the left. |
| up arrow | Moves the area handle up. |
| down arrow | Moves the area handle down. |
InputColorSlider
Screen Reader
The slider handle has role="slider" with aria-label, aria-valuemin, aria-valuemax, aria-valuenow, and aria-valuetext describing the current channel value.
Keyboard Support
| Key | Function |
|---|---|
| tab | Moves focus to the slider handle. |
| up arrowleft arrow | Decrements the slider value. |
| down arrowright arrow | Increments the slider value. |