Paleta de otoñoPulsa un color para copiarlo
Palette dépliante qui copie le code
Cinq nuanciers s'élargissent au survol ; un clic copie le code hexadécimal et une goutte de peinture tombe en dessous.
Réglages
Code
<div class="uvq15-swt"><p class="hd"><b>Palette d’automne</b><small>Clique sur une couleur pour la copier</small></p><div class="row"><button type="button" class="sw" style="--c:#C2410C;--ink:#fff7ed"><b>Argile</b><span class="lb"><code>#C2410C</code><span class="ok">Copié</span></span></button><button type="button" class="sw" style="--c:#84A98C;--ink:#10231a"><b>Sauge</b><span class="lb"><code>#84A98C</code><span class="ok">Copié</span></span></button><button type="button" class="sw" style="--c:#E9D8A6;--ink:#3d2f12"><b>Sable</b><span class="lb"><code>#E9D8A6</code><span class="ok">Copié</span></span></button><button type="button" class="sw" style="--c:#1D3557;--ink:#e0ecff"><b>Encre</b><span class="lb"><code>#1D3557</code><span class="ok">Copié</span></span></button><button type="button" class="sw" style="--c:#F28482;--ink:#3b0a0a"><b>Corail</b><span class="lb"><code>#F28482</code><span class="ok">Copié</span></span></button></div><p class="sr" aria-live="polite"></p></div>Prompt pour l’IA
Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.
Plus dans Micro-interactions
Voir tout : Micro-interactionsOù l’utiliser
Les chartes graphiques montrent souvent les couleurs sous forme de carrés figés. Cette palette les rend tactiles : chaque nuance s'élargit avec un ressort au survol ou au focus, son nom passe à l'horizontale et le code hexadécimal apparaît. Un clic copie le code, l'étiquette bascule sur Copié et une goutte de cette couleur tombe et s'écrase dessous.
Modifie la palette via les variables de fond et d'encre de chaque bouton ; l'encre garde le texte lisible sur les teintes claires comme foncées. Les flèches passent d'une couleur à l'autre. À utiliser dans un guide de style, un kit de marque ou un sélecteur de thème.