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

Show code snippetCopy code snippet
Edit sample on Codepen
v1.0.0-beta.83
Toggle preview themeToggle preview direction

Accessibility

Keyboard navigation

KeyFunction
Arrow downInside RGB or HSV inputs: decrease value by one (1)
Arrow upInside RGB or HSV inputs: increase value by one (1)
Shift and Arrow downInside RGB or HSV inputs: decrease value by ten (10)
Shift and Arrow upInside RGB or HSV inputs: increase value by ten (10)
TabMove focus to next item. If the currently focused item is the last item, the focus will leave the component
Tab and ShiftMove focus to previous item. If the currently focused item is the first item, the focus will leave the component

API reference

calcite-color-picker
v1.0.0-beta.83

Properties

PropertyAttributeDescriptionTypeValues
allowEmptyallow-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.

booleanA boolean property should be present, or not
truefalse
appearanceappearance

specify the appearance - default (containing border), or minimal (no containing border)

typedChoose from a set of typed values
default (default)minimal
disableddisabled

When true, disabled prevents user interaction.

booleanA boolean property should be present, or not
truefalse
formatformat

The format of the value property. When "auto", the format will be inferred from `value` when set.

typedChoose from a set of typed values
autohexhexahslhsl-csshslahsla-csshsvhsvargbrgb-cssrgbargba-css
hideChannelshide-channels

When true, hides the RGB/HSV channel inputs

booleanA boolean property should be present, or not
truefalse
hideHexhide-hex

When true, hides the hex input

booleanA boolean property should be present, or not
truefalse
hideSavedhide-saved

When true, hides the saved colors section

booleanA boolean property should be present, or not
truefalse
intlBintl-b

Label used for the blue channel

stringA custom string
"B" (default)
intlBlueintl-blue

Label used for the blue channel description

stringA custom string
"Blue" (default)
intlDeleteColorintl-delete-color

Label used for the delete color button.

stringA custom string
"Delete color" (default)
intlGintl-g

Label used for the green channel

stringA custom string
"G" (default)
intlGreenintl-green

Label used for the green channel description

stringA custom string
"Green" (default)
intlHintl-h

Label used for the hue channel

stringA custom string
"H" (default)
intlHexintl-hex

Label used for the hex input

stringA custom string
"Hex" (default)
intlHsvintl-hsv

Label used for the HSV mode

stringA custom string
"HSV" (default)
intlHueintl-hue

Label used for the hue channel description

stringA custom string
"Hue" (default)
intlNoColorintl-no-color

Label used for the hex input when there is no color selected.

stringA custom string
"No color" (default)
intlRintl-r

Label used for the red channel

stringA custom string
"R" (default)
intlRedintl-red

Label used for the red channel description

stringA custom string
"Red" (default)
intlRgbintl-rgb

Label used for the RGB mode

stringA custom string
"RGB" (default)
intlSintl-s

Label used for the saturation channel

stringA custom string
"S" (default)
intlSaturationintl-saturation

Label used for the saturation channel description

stringA custom string
"Saturation" (default)
intlSaveColorintl-save-color

Label used for the save color button.

stringA custom string
"Save color" (default)
intlSavedintl-saved

Label used for the saved colors section

stringA custom string
"Saved" (default)
intlVintl-v

Label used for the value channel

stringA custom string
"V" (default)
intlValueintl-value

Label used for the

stringA custom string
"Value" (default)
scalescale

The scale of the color picker.

typedChoose from a set of typed values
lm (default)s
storageIdstorage-id

Storage ID for colors.

stringA custom string
undefined
valuevalue

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.

typedChoose from a set of typed values
View documentation

Events

NameDescriptionDetail
calciteColorPickerChange

Fires when the color value has changed.

bubblescomposedcancelable
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.

bubblescomposedcancelable
any

Methods

NameDescriptionSignatureReturns
setFocus

Sets focus on the component.

setFocus() => Promise<void>Promise<void>

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.