Welcome to Vanilla Breeze
This bell pulls live notifications from /go/notify/messages — the same contract documented at /docs/concepts/service-contracts/. Static articles like this one are the no-JS / no-backend fallback.
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.
Basic palette
<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). |
editable |
boolean | — | Click a swatch to edit its color via the native OS picker. Updates the colors attribute and fires color-palette:change. |
Editable mode
Add the editable attribute and each swatch becomes a click-to-edit target. Clicking opens the native OS color picker; changes update the swatch and fire color-palette:change with the full updated colors array.
Editable palette
<color-palette colors="#6366f1,#ec4899,#22c55e,#eab308" editable size="lg" show-values></color-palette>Layout Modes
Grid
Auto-filling grid that wraps responsively.
Grid layout
<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.
List layout
<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().
oklch colors
<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 (non-editable mode). The color value is also copied to the clipboard. |
color-palette:change |
{ color, name, index, colors } |
Fired when an editable swatch changes. Includes the full updated colors array. |
Listening for selections
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"witharia-label="Color palette". - Each swatch is a
<button>with anaria-labelincluding the color name and value. - Full keyboard navigation — Tab between swatches, Enter/Space to copy.