Color Picker provides a workflow 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 such as 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 properties to keep the workflow focused.
Usage
- Choosing an initial color of an element
- Changing color or transparency of an element
- Ability to copy/paste Hex, RGB, HSV, or other values
Sample
Keyboard navigation
| Key | Function |
|---|---|
Arrow down | When focused on the Hex, RGB, or HSV inputs decreases the value by one (1). |
Arrow up | When focused on the Hex, RGB, or HSV inputs increases the value by one (1). |
Shift and Arrow down | When focused on the Hex, RGB, or HSV inputs decreases the value by ten (10). |
Shift and Arrow up | When focused on the Hex, RGB, or HSV inputs increases the value by ten (10). |
Tab | Moves focus to the next focusable element. If the currently focused element is the last element, focus will leave the component. |
Tab and Shift | Moves focus to the previous focusable element. If the currently focused element is the first element, focus will leave the component. |
API reference
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
| allowEmpty | allow-empty | clearable insteadnull) will be allowed as a value.
When not present, a color value is enforced, and clearing the input or blurring will restore the last valid value. | boolean | false |
| alphaChannel | alpha-channel | When present, the component will allow updates to the color's alpha value. | boolean | false |
| channelsDisabled | channels-disabled | When present, hides the RGB/HSV channel inputs. | boolean | false |
| clearable | clearable | When present, an empty color (null) will be allowed as a value.
When not present, a color value is enforced, and clearing the input or blurring will restore the last valid value. | boolean | false |
| disabled | disabled | When present, interaction is prevented and the component is displayed with lower opacity. | boolean | false |
| fieldDisabled | field-disabled | When present, hides the color field. | boolean | false |
| format | format | The format of value.
When "auto", the format will be inferred from value when set. | "auto" | "hex" | "hexa" | "hsl" | "hsl-css" | "hsla" | "hsla-css" | "hsv" | "hsva" | "rgb" | "rgb-css" | "rgba" | "rgba-css" | "auto" |
| hexDisabled | hex-disabled | When present, hides the hex input. | boolean | false |
| messageOverrides | Use this property to override individual strings used by the component. | Record<string, unknown> | ||
| numberingSystem | numbering-system | Specifies the Unicode numeral system used by the component for localization. | "arab" | "arabext" | "latn" | |
| savedDisabled | saved-disabled | When present, hides the saved colors section. | boolean | false |
| scale | scale | Specifies the size of the component. | "l" | "m" | "s" | "m" |
| storageId | storage-id | Specifies the storage ID for colors. | string | |
| value | value | The component's value, where the value can be a CSS color string, or a RGB, HSL or HSV object. The type will be preserved as the color is updated. | (HSL & ObjectWithAlpha) | (HSV & ObjectWithAlpha) | (RGB & ObjectWithAlpha) | HSL | HSV | RGB | string |
Styles
| Name | Description |
|---|---|
| --calcite-color-picker-background-color | Specifies the component's background color. |
| --calcite-color-picker-border-color | Specifies the component's border color. |
| --calcite-color-picker-corner-radius | Specifies the component's corner radius. |
| --calcite-color-picker-shadow | Specifies the component's shadow. |
| --calcite-color-picker-text-color | Specifies the component's text color. |
| --calcite-color-picker-input-background-color | Specifies the component's input background color. |
| --calcite-color-picker-input-border-color | Specifies the component's input border color. |
| --calcite-color-picker-input-text-color | Specifies the component's input text color. |
| --calcite-color-picker-input-prefix-background-color | When hexDisabled is not true, specifies the component's input prefix background color. |
| --calcite-color-picker-input-prefix-text-color | When hexDisabled is not true, specifies the component's input prefix text color. |
| --calcite-color-picker-input-suffix-background-color | When alphaChannel is true, specifies the component's input suffix background color. |
| --calcite-color-picker-input-suffix-text-color | When alphaChannel is true, specifies the component's input suffix text color. |
| --calcite-color-picker-tab-border-color | Specifies the component's tab border color. |
| --calcite-color-picker-tab-text-color | Specifies the component's tab text color. |
| --calcite-color-picker-tab-accent-color-press | Specifies the component's tab accent color when selected or active. |
| --calcite-color-picker-swatch-corner-radius | Specifies the component's swatch corner radius. |
| --calcite-color-picker-action-text-color-press | Specifies the component's savedColors action text color when pressed. |
| --calcite-color-picker-action-text-color-hover | Specifies the component's savedColors action text color when hovered. |
| --calcite-color-picker-action-text-color | Specifies the component's savedColors action text color. |
Events
| Name | Description | Behavior |
|---|---|---|
| calciteColorPickerChange | Fires when the color value has changed. | |
| calciteColorPickerInput | Fires as the color value changes.
Similar to the calciteColorPickerChange event with the exception of dragging. When dragging the color field or hue slider thumb, this event fires as the thumb is moved. |
Methods
| Name | Description | Signature |
|---|---|---|
| componentOnReady | Create a promise that resolves once component is fully loaded. | componentOnReady(): Promise<void> |
| setFocus | Sets focus on the component's first focusable element. | setFocus(options?: FocusOptions): Promise<void> |