Paleta Otoño 27
Elige una muestraCódigo copiado
Color swatch fan deck
A swatch guide that fans open on hover; each strip lifts out when pressed and copies its hex code.
Settings
Code
<div class="uvq07-pan"><p class="ti">Autumn 27 palette</p><div class="fn" role="group" aria-label="Swatches"><button type="button" style="--i:0;--sw:var(--c1)" aria-pressed="false"><span class="cl"></span><span class="lb"><b>18-1450</b><span>Terracotta</span></span></button><button type="button" style="--i:1;--sw:#d9a441" aria-pressed="false"><span class="cl"></span><span class="lb"><b>14-0952</b><span>Mustard</span></span></button><button type="button" style="--i:2;--sw:#9caf88" aria-pressed="false"><span class="cl"></span><span class="lb"><b>15-6316</b><span>Sage</span></span></button><button type="button" style="--i:3;--sw:var(--c2)" aria-pressed="false"><span class="cl"></span><span class="lb"><b>19-4524</b><span>Petrol blue</span></span></button><button type="button" style="--i:4;--sw:#6b3a5b" aria-pressed="false"><span class="cl"></span><span class="lb"><b>19-2311</b><span>Plum</span></span></button><button type="button" style="--i:5;--sw:#e3d3b6" aria-pressed="false"><span class="cl"></span><span class="lb"><b>13-1012</b><span>Sand</span></span></button><button type="button" style="--i:6;--sw:#2e2e30" aria-pressed="false"><span class="cl"></span><span class="lb"><b>19-0303</b><span>Charcoal</span></span></button><i class="rv" aria-hidden="true"></i></div><p class="st" aria-live="polite"><span class="nm">Pick a swatch</span><span class="ok">Code copied</span></p></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Cards
See all CardsWhere to use it
Printers and designers still carry swatch fans, and the gesture of spreading them is satisfying. Seven strips share a rivet pivot and rotate by a custom property that grows on hover or focus. Pressing one lifts it from the fan, reads its real color from the computed style and copies the hex code, with a short confirmation. Good for design systems, paint shops and brand guidelines.
The first strip uses the main color and the fourth the second color, so the palette follows your brand. Edit the names and codes in the list, and use the arrow keys to move between strips.