color-palette

Interactive color swatch display web component with click-to-copy and multiple layout modes.

Overview

The <color-palette> component renders interactive color swatches from a comma-separated list. Click any swatch to copy its value to the clipboard. Supports hex, rgb, hsl, and oklch color formats.

<color-palette colors="#ff6b6b,#4ecdc4,#45b7d1,#f7dc6f,#bb8fce" names="Red,Teal,Sky,Gold,Purple" show-names> </color-palette>

Attributes

Attribute Type Default Description
colors string — Comma-separated color values (hex, rgb, oklch, etc.).
names string — Comma-separated swatch labels.
layout string inline Display mode: inline, grid, or list.
show-values boolean — Show color value text on each swatch.
show-names boolean — Show name labels on each swatch.
size string md Swatch size: sm (32px), md (48px), or lg (72px).

Layout Modes

Grid

Auto-filling grid that wraps responsively.

<color-palette colors="#2d3436,#636e72,#b2bec3,#dfe6e9,#ffffff" names="Dark,Gray,Silver,Light,White" layout="grid" size="lg" show-values show-names> </color-palette>

List

Vertical list with color values alongside.

<color-palette colors="#1a5276,#2e86c1,#85c1e9" names="Navy,Blue,Sky" layout="list" show-values show-names> </color-palette>

oklch Colors

The parser handles functional color notation that contains commas, such as oklch().

<color-palette colors="oklch(50% 0.2 260),oklch(65% 0.18 30),oklch(75% 0.15 140),oklch(85% 0.12 80)" names="Indigo,Orange,Green,Gold" show-values show-names> </color-palette>

Events

Event Detail Description
color-palette:select { color, name, index } Fired when a swatch is clicked. The color value is also copied to the clipboard.
document.querySelector('color-palette') .addEventListener('color-palette:select', (e) => { console.log(e.detail); // { color: '#ff6b6b', name: 'Red', index: 0 } });

Accessibility

  • The palette uses role="group" with aria-label="Color palette".
  • Each swatch is a <button> with an aria-label including the color name and value.
  • Full keyboard navigation — Tab between swatches, Enter/Space to copy.