AIMRAN

Paleta de otoñoPulsa un color para copiarlo

HTML + CSSMikrointeraktionen

Aufklappende Palette mit Kopierfunktion

Fünf Farbfelder werden beim Überfahren breiter; ein Klick kopiert den Hex-Code und ein Tropfen Farbe fällt nach unten.

Einstellungen

16px
1x

Code

<div class="uvq15-swt"><p class="hd"><b>Herbstpalette</b><small>Klick auf eine Farbe, um sie zu kopieren</small></p><div class="row"><button type="button" class="sw" style="--c:#C2410C;--ink:#fff7ed"><b>Ton</b><span class="lb"><code>#C2410C</code><span class="ok">Kopiert</span></span></button><button type="button" class="sw" style="--c:#84A98C;--ink:#10231a"><b>Salbei</b><span class="lb"><code>#84A98C</code><span class="ok">Kopiert</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">Kopiert</span></span></button><button type="button" class="sw" style="--c:#1D3557;--ink:#e0ecff"><b>Tinte</b><span class="lb"><code>#1D3557</code><span class="ok">Kopiert</span></span></button><button type="button" class="sw" style="--c:#F28482;--ink:#3b0a0a"><b>Koralle</b><span class="lb"><code>#F28482</code><span class="ok">Kopiert</span></span></button></div><p class="sr" aria-live="polite"></p></div>

Prompt für KI

Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.

Markdown-Version mit dem ganzen Code, für KI-Assistenten

Mehr aus Mikrointeraktionen

Alle ansehen: Mikrointeraktionen

Erledigte Aufgabe

MikrointeraktionenReact + Motion

Sternebewertung

MikrointeraktionenReact + Motion

Avatar mit Statusring

MikrointeraktionenReact + Motion

Hüpfendes Benachrichtigungs-Badge

MikrointeraktionenReact + Motion

Sanftes Akkordeon

MikrointeraktionenReact + Motion

Befehl-kopieren-Button

MikrointeraktionenReact + Motion

Senden mit Papierflieger

MikrointeraktionenReact + Motion

Elastischer Lautstärkeregler

MikrointeraktionenReact + Motion

Wofür du ihn nutzen kannst

Designsysteme und Markenseiten zeigen Farben oft als starre Quadrate. Diese Palette macht sie greifbar: Jedes Feld wird beim Überfahren oder Fokussieren federnd breiter, der Name dreht sich in die Waagerechte und der Hex-Code erscheint. Ein Klick kopiert den Code, die Beschriftung klappt auf Kopiert um und ein Tropfen dieser Farbe fällt herab und zerplatzt.

Bearbeite die Palette über die Hintergrund- und Tintenvariablen jedes Buttons; die Tinte hält den Text auf hellen und dunklen Feldern lesbar. Mit den Pfeiltasten springst du zwischen den Farben. Geeignet für Styleguides, Brand-Kits oder eine Themenauswahl.