ColorPicker
Demonstration and configuration of the Radzen Blazor ColorPicker component.
In this demo a T-shirt SVG changes color based on the color picker selection, with toggles to show/hide HSV picker, RGBA picker, Predefined colors, and OK button, and Change event logging selected colors to console.
Choose T-Shirt color
Hex
R
G
B
A
Console log
Keyboard Navigation link
The following keys or key combinations provide a way for users to navigate and interact with Radzen Blazor ColorPicker component.
| Press this key | To do this |
|---|---|
| Tab | Navigate to a ColorPicker. |
| Tab in an opened ColorPicker popup | Navigate forward across available pickers or predefined colors. |
| Shift + Tab in an opened ColorPicker popup | Navigate backward across available pickers or predefined colors. |
| Space or Enter | Open the ColorPicker popup and focus the first available item in the popup. |
| Space or Enter on a focused Predefined color in the ColorPicker | Select the color and close the ColorPicker popup. |
| Arrow keys on a focused Saturation picker | Change color's saturation. |
| Left/Right arrow keys on a focused Hue picker | Change color's hue. |
| Left/Right arrow keys on a focused Alpha picker | Change color's opacity. |
| Up/Down arrow keys in a focused RGBA input | Change color's RGBA values. |
| Esc | Close the ColorPicker popup. |
Radzen Blazor Components, © 2018-2025 Radzen.
Source Code licensed under
MIT