Color Picker
Calcite Color Picker provides an easy way to change color, modify transparency, and save favorite colors.
Overview
Color Picker sliders can be used for general hue shifts, while hexadecimal (hex) and other channels like RGB can be used for more exact color choices. The ability to save colors helps keep the user experience more efficient.
Channels and features can be hidden with props in order to keep the Color Picker focused.
Usage
- Choosing initial color of an element
- Changing color or transparency of an element
- Ability to copy/paste hex, RGB, or other values
Sample
Accessibility
Keyboard navigation
| Key | Function |
|---|---|
Arrow down | Inside RGB or HSV inputs: decrease value by one (1) |
Arrow up | Inside RGB or HSV inputs: increase value by one (1) |
Shift and Arrow down | Inside RGB or HSV inputs: decrease value by ten (10) |
Shift and Arrow up | Inside RGB or HSV inputs: increase value by ten (10) |
Tab | Move focus to next item. If the currently focused item is the last item, the focus will leave the component |
Tab and Shift | Move focus to previous item. If the currently focused item is the first item, the focus will leave the component |
API reference
Properties
| Property | Attribute | Description | Type | Values |
|---|---|---|---|---|
| allowEmpty | allow-empty | When false, empty color (null) will be allowed as a value. Otherwise, a color value is always enforced by the component. When true, clearing the input and blurring will restore the last valid color set. When false, it will set it to empty. | truefalse | |
| appearance | appearance | specify the appearance - default (containing border), or minimal (no containing border) | default (default)minimal | |
| disabled | disabled | When true, disabled prevents user interaction. | truefalse | |
| format | format | The format of the value property. When "auto", the format will be inferred from `value` when set. | autohexhexahslhsl-csshslahsla-csshsvhsvargbrgb-cssrgbargba-css | |
| hideChannels | hide-channels | When true, hides the RGB/HSV channel inputs | truefalse | |
| hideHex | hide-hex | When true, hides the hex input | truefalse | |
| hideSaved | hide-saved | When true, hides the saved colors section | truefalse | |
| intlB | intl-b | Label used for the blue channel | "B" (default) | |
| intlBlue | intl-blue | Label used for the blue channel description | "Blue" (default) | |
| intlDeleteColor | intl-delete-color | Label used for the delete color button. | "Delete color" (default) | |
| intlG | intl-g | Label used for the green channel | "G" (default) | |
| intlGreen | intl-green | Label used for the green channel description | "Green" (default) | |
| intlH | intl-h | Label used for the hue channel | "H" (default) | |
| intlHex | intl-hex | Label used for the hex input | "Hex" (default) | |
| intlHsv | intl-hsv | Label used for the HSV mode | "HSV" (default) | |
| intlHue | intl-hue | Label used for the hue channel description | "Hue" (default) | |
| intlNoColor | intl-no-color | Label used for the hex input when there is no color selected. | "No color" (default) | |
| intlR | intl-r | Label used for the red channel | "R" (default) | |
| intlRed | intl-red | Label used for the red channel description | "Red" (default) | |
| intlRgb | intl-rgb | Label used for the RGB mode | "RGB" (default) | |
| intlS | intl-s | Label used for the saturation channel | "S" (default) | |
| intlSaturation | intl-saturation | Label used for the saturation channel description | "Saturation" (default) | |
| intlSaveColor | intl-save-color | Label used for the save color button. | "Save color" (default) | |
| intlSaved | intl-saved | Label used for the saved colors section | "Saved" (default) | |
| intlV | intl-v | Label used for the value channel | "V" (default) | |
| intlValue | intl-value | Label used for the | "Value" (default) | |
| scale | scale | The scale of the color picker. | lm (default)s | |
| storageId | storage-id | Storage ID for colors. | undefined | |
| value | value | The color value. This value can be either a {@link https ://developer.mozilla.org/en-US/docs/Web/CSS/color|CSS string} a RGB, HSL or HSV object. The type will be preserved as the color is updated. |
Events
| Name | Description | Detail |
|---|---|---|
| calciteColorPickerChange | Fires when the color value has changed. | any |
| calciteColorPickerInput | Fires as the color value changes. This is similar to the change event with the exception of dragging. When dragging the color field or hue slider thumb, this event fires as the thumb is moved. | any |
Methods
| Name | Description | Signature | Returns |
|---|---|---|---|
| setFocus | Sets focus on the component. | setFocus() => Promise<void> | Promise<void> |