Color Picker | Calcite Design System

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.

Sample

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

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
alphaChannel	alpha-channel	When `true`, the component will allow updates to the color's alpha value.	`boolean`	`false`
channelsDisabled	channels-disabled	When `true`, hides the RGB/HSV channel inputs.	`boolean`	`false`
clearable	clearable	When `true`, an empty color (`null`) will be allowed as a `value`. When `false`, a color value is enforced, and clearing the input or blurring will restore the last valid `value`.	`boolean`	`false`
disabled	disabled	When `true`, interaction is prevented and the component is displayed with lower opacity.	`boolean`	`false`
fieldDisabled	field-disabled	When `true`, hides the color field.	`boolean`	`false`
format	format	The format of `value`. When `"auto"`, the format will be inferred from `value` when set.	`Format`	`"auto"`
hexDisabled	hex-disabled	When `true`, hides the hex input.	`boolean`	`false`
messageOverrides		Overrides individual strings used by the component.	`Record<string, unknown> \| undefined`
numberingSystem	numbering-system	Specifies the Unicode numeral system used by the component for localization.	`NumberingSystem`
savedDisabled	saved-disabled	When `true`, hides the saved colors section.	`boolean`	`false`
scale	scale	Specifies the size of the component.	`Scale`	`"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.	`ColorValue \| null`

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-text-color	When `hexDisabled` is not `true`, specifies the component's input prefix text 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

Name	Description	Behavior
calciteColorPickerChange	Fires when the color value has changed.	bubblescomposed
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.	bubblescomposed

calciteColorPickerChange

Fires when the color value has changed.

bubbles

composed

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.