Color Picker

An interactive color selection component with support for multiple color formats (hex, RGB, HSV) and optional opacity control.

Overview

The color picker component allows users to select colors through a visual interface rather than requiring technical color knowledge. It provides an interactive canvas for color selection along with controls for adjusting hue, saturation, lightness, and opacity. This component transforms color selection from a technical task into an intuitive visual experience, making it accessible to users regardless of their familiarity with color codes or values.

Usage

forge-color-picker lets a user select a color visually instead of typing a technical value, tracked through value (hex), rgba, and hsva. Use it inline in a form, or trigger it from a swatch button into a forge-popover or forge-dialog when space is tight.

Rules

Make color selection a visual task — lead with the picker, not a raw text input.

Offer a value format (hex, RGBA, or HSVA) that matches where the color is headed, such as RGBA when a user is copying a value from another product.

Set allowOpacity only when transparency is a meaningful option for the value being set.

Don't

Don't expose every color format at once — pick the one your data actually needs.

Don't let arbitrary color selection bypass an existing brand or theme palette when one exists.

Don't debounce the change event for a color that drives a live, on-screen preview — the delay reads as lag.

Value formats

Read or set the current color as value (a hex string), rgba, or hsva — all three stay in sync with whichever one is set.

A color picker with an initial hex value.

<forge-color-picker value="000000">
</forge-color-picker>

Opacity

Set allowOpacity to add an alpha slider to the picker, exposing opacity alongside value, rgba, and hsva.

allow-opacity adds an alpha slider to the picker.

<forge-color-picker value="#3f51b5" allow-opacity>
</forge-color-picker>

Trigger the picker from a swatch button into a forge-popover or forge-dialog instead of showing it inline, when space is tight.

A swatch button opens the color picker in a popover instead of showing it inline.

<forge-button id="color-picker-popover-trigger" variant="outlined">
  Choose color
</forge-button>
<forge-popover anchor="color-picker-popover-trigger">
  <forge-color-picker value="#3f51b5">
  </forge-color-picker>
</forge-popover>

Debounced updates

Set debounceChangeEvent to collapse rapid drags into a single change event instead of firing on every pixel of movement.

debounce-change-event collapses rapid drags into a single change event.

<forge-color-picker value="#3f51b5" debounce-change-event>
</forge-color-picker>

An interactive color selection component with support for multiple color formats (hex, RGB, HSV) and optional opacity control. Intended to be used either inline, or within a popover or dialog for selecting colors.

import "@tylertech/forge/color-picker";

Properties

Property	Attribute	Type	Default	Description
`value`	`value`	`string \| null \| undefined`	—	Gets/sets the value using hex format only.
`rgba`	—	`IRGBA \| null \| undefined`	—	Gets/sets the value using rgba format.
`hsva`	—	`IHSVA \| null \| undefined`	—	Gets/sets the value using hsva format.
`opacity`	—	`number \| null \| undefined`	`1`	Gets/sets the opacity value, if `allowOpacity` is true.
`allowOpacity`	`allow-opacity`	`boolean`	`false`	Gets/sets whether opacity is displayed and allowed be to changed.
`debounceChangeEvent`	`debounce-change-event`	`boolean`	`false`	Gets/sets whether change event has a debounce applied to avoid successive updates.

Events

Name	Type	Description
`forge-color-picker-change`	`CustomEvent<IColorPickerChangeEventData>`	Emits when the color value changed.

Keyboard interaction

With the color canvas focused, the arrow keys move the selection thumb:

Key	Action
Arrow up	Moves the thumb position up.
Arrow down	Moves the thumb position down.
Arrow left	Moves the thumb position left.
Arrow right	Moves the thumb position right.

Tab should reach both the hex input and the “change color format” button, with a visible focus cue on each. After switching to RGBA or HSVA, verify those value inputs are keyboard-accessible too. Space or Enter on the “change color format” button cycles through the available color formats.