Paleta de otoñoPulsa un color para copiarlo
Expanding palette that copies hex
Five color swatches widen as you pass over them; click one to copy its hex code and a drop of paint falls below.
Settings
Code
<div class="uvq15-swt"><p class="hd"><b>Autumn palette</b><small>Click a color to copy it</small></p><div class="row"><button type="button" class="sw" style="--c:#C2410C;--ink:#fff7ed"><b>Clay</b><span class="lb"><code>#C2410C</code><span class="ok">Copied</span></span></button><button type="button" class="sw" style="--c:#84A98C;--ink:#10231a"><b>Sage</b><span class="lb"><code>#84A98C</code><span class="ok">Copied</span></span></button><button type="button" class="sw" style="--c:#E9D8A6;--ink:#3d2f12"><b>Sand</b><span class="lb"><code>#E9D8A6</code><span class="ok">Copied</span></span></button><button type="button" class="sw" style="--c:#1D3557;--ink:#e0ecff"><b>Ink</b><span class="lb"><code>#1D3557</code><span class="ok">Copied</span></span></button><button type="button" class="sw" style="--c:#F28482;--ink:#3b0a0a"><b>Coral</b><span class="lb"><code>#F28482</code><span class="ok">Copied</span></span></button></div><p class="sr" aria-live="polite"></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 Microinteractions
See all MicrointeractionsWhere to use it
Design systems and brand pages often list colors as static squares. This palette makes them tactile: each swatch widens with a spring when hovered or focused, its name turns horizontal and the hex code appears. Clicking copies the code, the label flips to Copied, and a drop of that color falls from the swatch and splashes underneath.
Edit the palette by changing the background and ink variables of each button; the ink keeps the text readable on light and dark swatches. Arrow keys move between colors. Use it in style guides, brand kits or a theme picker.