Paleta Otoño 27

Elige una muestraCódigo copiado

HTML + CSSCards

Abanico de muestras de color

Una guía de muestras que se abre en abanico al pasar el ratón; cada tira se saca al pulsarla y copia su código.

Ajustes

16px
1x

Código

<div class="uvq07-pan"><p class="ti">Paleta Otoño 27</p><div class="fn" role="group" aria-label="Muestras"><button type="button" style="--i:0;--sw:var(--c1)" aria-pressed="false"><span class="cl"></span><span class="lb"><b>18-1450</b><span>Teja</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>Mostaza</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>Salvia</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>Petróleo</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>Ciruela</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>Arena</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>Carbón</span></span></button><i class="rv" aria-hidden="true"></i></div><p class="st" aria-live="polite"><span class="nm">Elige una muestra</span><span class="ok">Código copiado</span></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.

Versión Markdown con todo el código, para asistentes de IA

Más en Cards

Ver todos: Cards

Dónde usarlo

Imprentas y diseñadores siguen llevando abanicos de muestras, y el gesto de abrirlos es muy satisfactorio. Siete tiras comparten el remache y giran según una propiedad personalizada que crece al pasar el ratón o al enfocar. Al pulsar una, sale del abanico, lee su color real del estilo calculado y copia el código hexadecimal con una breve confirmación. Sirve para sistemas de diseño, tiendas de pintura y manuales de marca.

La primera tira usa el color principal y la cuarta el secundario, así que la paleta sigue a tu marca. Edita nombres y códigos en la lista y usa las flechas para moverte entre tiras.