Paleta del proyecto
HTML + CSSTooltips
Color swatches with copy tooltip
Hover a swatch to see its hex code and click to copy it; the tooltip confirms with a check.
Settings
16px
1x
Code
<div class="uv-tcs"><p>Project palette</p><div class="sw"><button type="button" style="--c:#0f172a" data-hex="#0F172A" aria-label="Copy #0F172A"><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>Copied</span></span></button><button type="button" style="--c:#334155" data-hex="#334155" aria-label="Copy #334155"><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>Copied</span></span></button><button type="button" style="--c:#f97316" data-hex="#F97316" aria-label="Copy #F97316"><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>Copied</span></span></button><button type="button" style="--c:#facc15" data-hex="#FACC15" aria-label="Copy #FACC15"><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>Copied</span></span></button><button type="button" style="--c:#22c55e" data-hex="#22C55E" aria-label="Copy #22C55E"><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>Copied</span></span></button></div></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Tooltips
See all TooltipsWhere to use it
Design systems, brand pages and palette generators need colors that are quick to grab. Each swatch lifts slightly on hover and shows its hex code in a tooltip; clicking copies it to the clipboard and the tooltip slides to a green check with the word copied for a moment, then returns to the code.
Swatches are buttons with an aria-label that includes the code, and copying fails silently where the clipboard is blocked. Edit the list of colors in the code to show your own palette.