Paleta de otoñoPulsa un color para copiarlo
Paleta que se despliega y copia
Cinco muestras de color que se ensanchan al pasar por encima; al pulsar una se copia su código y cae una gota de pintura.
Ajustes
Código
<div class="uvq15-swt"><p class="hd"><b>Paleta de otoño</b><small>Pulsa un color para copiarlo</small></p><div class="row"><button type="button" class="sw" style="--c:#C2410C;--ink:#fff7ed"><b>Arcilla</b><span class="lb"><code>#C2410C</code><span class="ok">Copiado</span></span></button><button type="button" class="sw" style="--c:#84A98C;--ink:#10231a"><b>Salvia</b><span class="lb"><code>#84A98C</code><span class="ok">Copiado</span></span></button><button type="button" class="sw" style="--c:#E9D8A6;--ink:#3d2f12"><b>Arena</b><span class="lb"><code>#E9D8A6</code><span class="ok">Copiado</span></span></button><button type="button" class="sw" style="--c:#1D3557;--ink:#e0ecff"><b>Tinta</b><span class="lb"><code>#1D3557</code><span class="ok">Copiado</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">Copiado</span></span></button></div><p class="sr" aria-live="polite"></p></div>Prompt para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Microinteracciones
Ver todos: MicrointeraccionesDónde usarlo
Las guías de marca suelen mostrar los colores como cuadrados quietos. Esta paleta los hace táctiles: cada muestra se ensancha con un muelle al pasar el ratón o al enfocarla, su nombre se pone en horizontal y aparece el código hexadecimal. Al pulsar se copia el código, la etiqueta gira a Copiado y una gota de ese color cae y salpica debajo.
Edita la paleta cambiando las variables de fondo y de tinta de cada botón; la tinta mantiene el texto legible sobre muestras claras y oscuras. Las flechas pasan de un color a otro. Úsala en guías de estilo, kits de marca o selectores de tema.