Farbfelder mit Kopier-Tooltip

Fahr über ein Farbfeld für den Hex-Code und klicke zum Kopieren; der Tooltip bestätigt mit einem Haken.

Einstellungen

Hauptfarbe#16a34a

Zweitfarbe#ffffff

Größe16px

Tempo1x

Text

Code

index.html

<div class="uv-tcs"><p>Projektpalette</p><div class="sw"><button type="button" style="--c:#0f172a" data-hex="#0F172A" aria-label="#0F172A kopieren"><span class="tt"><span class="hx">#0F172A</span><span class="ok"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>Kopiert</span></span></button><button type="button" style="--c:#334155" data-hex="#334155" aria-label="#334155 kopieren"><span class="tt"><span class="hx">#334155</span><span class="ok"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>Kopiert</span></span></button><button type="button" style="--c:#f97316" data-hex="#F97316" aria-label="#F97316 kopieren"><span class="tt"><span class="hx">#F97316</span><span class="ok"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>Kopiert</span></span></button><button type="button" style="--c:#facc15" data-hex="#FACC15" aria-label="#FACC15 kopieren"><span class="tt"><span class="hx">#FACC15</span><span class="ok"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>Kopiert</span></span></button><button type="button" style="--c:#22c55e" data-hex="#22C55E" aria-label="#22C55E kopieren"><span class="tt"><span class="hx">#22C55E</span><span class="ok"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>Kopiert</span></span></button></div></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.

Mehr aus Tooltips

Alle ansehen: Tooltips

Tooltip mit Federeffekt

TooltipsHTML + CSS

Tooltip mit Farbverlauf

TooltipsHTML + CSS

Tooltip, der dem Cursor folgt

TooltipsHTML + CSS

Verzögerter Tooltip mit Unschärfe

TooltipsHTML + CSS

Tooltip auf Kreisbahn

TooltipsHTML + CSS

Tooltip mit Tastenkürzel

TooltipsHTML + CSS

Tooltip mit Vorschau

TooltipsHTML + CSS

Geteilter Tooltip

TooltipsHTML + CSS

Wofür du ihn nutzen kannst

Designsysteme, Markenseiten und Palettengeneratoren brauchen Farben, die man schnell mitnimmt. Jedes Farbfeld hebt sich beim Hover leicht und zeigt seinen Hex-Code im Tooltip. Ein Klick kopiert ihn in die Zwischenablage, der Tooltip wechselt kurz zu einem grünen Haken mit kopiert und dann zurück zum Code.

Die Farbfelder sind Buttons mit aria-label inklusive Code, und wo die Zwischenablage blockiert ist, scheitert das Kopieren still. Passe die Farbliste im Code an deine Palette an.