Color Picker

Preview

<esa-color-picker label="Brand color" value="#43608a"></esa-color-picker>

Swatches

Pass preset colors as a JSON-encoded swatches attribute (or a string[] property). The selected swatch is highlighted.

<esa-color-picker label="Pick a brand color" value="#43608a" swatches='["#43608a","#5787b9","#f9a134","#ef4444","#3b82f6","#22c55e"]'></esa-color-picker>

Sizes

<esa-color-picker label="Extra small" size="xs" value="#43608a"></esa-color-picker>
<esa-color-picker label="Small" size="sm" value="#5787b9"></esa-color-picker>
<esa-color-picker label="Medium" size="md" value="#f9a134"></esa-color-picker>
<esa-color-picker label="Large" size="lg" value="#ef4444"></esa-color-picker>

States

Hide the hex input with show-input={false}; disable the whole control with disabled.

<esa-color-picker label="No hex input" value="#3b82f6" show-input="false" swatches="…"></esa-color-picker>
<esa-color-picker label="Disabled" value="#22c55e" disabled swatches="…"></esa-color-picker>

API

Events

Accessibility

• The native <input type="color"> provides the OS color dialog and keyboard handling.
• Swatches are a role="listbox" group; each swatch is role="option" with aria-selected and an aria-label ("Select color {hex}").
• Hex input only commits valid #rgb / #rrggbb values, preventing invalid form state.
• Form-associated via ElementInternals — value submits with the enclosing form.

Theming surface

Every public token this component reads, extracted from its source at build time. The Resolves to column walks each token's real lineage — component → semantic → primitive → raw value — so you can see exactly where re-pointing it lands. A spoke re-skins by overriding these in its theme-<slug>.css; component internals are never edited. No hook for what you need? File it with /request-lego.