Color Picker

Usage

The default color picker presents a 2D saturation/brightness panel, a hue slider, and a hex input field.

  <wc-color-picker></wc-color-picker>

Set an initial color with the value attribute (6-digit hex).

  <wc-color-picker value="#e53935"></wc-color-picker>
  <wc-color-picker value="#43a047"></wc-color-picker>
  <wc-color-picker value="#1e88e5"></wc-color-picker>

Alpha

Add the alpha boolean attribute to reveal an opacity slider and percentage input. The checkerboard backdrop on the preview swatch and slider track indicates transparency.

  <wc-color-picker alpha="true" value="#2352d5"></wc-color-picker>

The current opacity is exposed as event.detail.alpha (a number from 0 to 1) in both the input and change events.

Disabled

Add the disabled attribute to prevent all interaction. The component renders at reduced opacity following Material Design 3 guidelines.

  <wc-color-picker disabled="true" value="#2352d5"></wc-color-picker>
  <wc-color-picker disabled="true" alpha="true" value="#e53935"></wc-color-picker>

Events

The color picker fires two events: input continuously while the user is dragging a handle or typing in the hex field, and change when the interaction is committed (pointer up, keyboard, or input blur). Both carry event.detail.value (hex string) and event.detail.alpha (0–1 opacity).

  <wc-color-picker id="events-picker" alpha="true"></wc-color-picker>

const picker = document.querySelector('#events-picker');

picker.addEventListener('input', (event) => {
  console.log('input', event.detail.value, 'alpha:', event.detail.alpha);
});

picker.addEventListener('change', (event) => {
  console.log('change', event.detail.value, 'alpha:', event.detail.alpha);
});