demo · v133

Palette wall

A 120-swatch palette wall driven entirely by data-hex attributes. Add a new colour by appending one <div>. The cell paints itself, picks a readable text colour, and labels itself with the value — from one CSS rule.

click a swatch to see its computed values

the rule

.swatch {
  background: attr(data-hex type(<color>), var(--bg-stone));
  color:      attr(data-fg  type(<color>), var(--text-black));
}
/* mark-up shrinks to just data: */
<div class="swatch" data-hex="#0a8f5c" data-fg="#fff">#0a8f5c</div>

Before typed attr() you'd write a custom property bridge (--bg on the element, background: var(--bg) in the rule) for every property. Now attr() ingests the same data with built-in type checking and per-property fallback.

see also