ars-color-select

About

Redesigned as a horizontal carousel strip of circular color swatches. Navigate with arrow buttons, keyboard arrows, Home/End keys. Colors arranged in spectrum order (red → orange → yellow → green → blue → purple → pink → neutrals).

Default Carousel

<ars-color-select></ars-color-select>

Swatch Sizes

Small

Medium (default)

Large

Custom Palette

<ars-color-select id="picker"></ars-color-select>
<script>
  document.getElementById('picker').palette = ['#FF0000', '#00FF00', '#0000FF', '#FFFF00', '#FF00FF'];
</script>

Visible Count

3 visible

9 visible

Disabled

Keyboard Navigation

Focus the picker below and use: Arrow Left/Right to move, Home for first, End for last.

Programmatic Control

Integration Example

Selected color applied to a preview card:

Event Monitor

[ready] Listening for ars-color-select:change events...