Pastilles de couleur à copier

Survole une pastille pour voir son code hexa et clique pour le copier ; l'infobulle confirme avec une coche.

Réglages

Couleur principale#16a34a

Couleur secondaire#ffffff

Taille16px

Vitesse1x

Texte

Code

index.html

<div class="uv-tcs"><p>Palette du projet</p><div class="sw"><button type="button" style="--c:#0f172a" data-hex="#0F172A" aria-label="Copier #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>Copié</span></span></button><button type="button" style="--c:#334155" data-hex="#334155" aria-label="Copier #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>Copié</span></span></button><button type="button" style="--c:#f97316" data-hex="#F97316" aria-label="Copier #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>Copié</span></span></button><button type="button" style="--c:#facc15" data-hex="#FACC15" aria-label="Copier #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>Copié</span></span></button><button type="button" style="--c:#22c55e" data-hex="#22C55E" aria-label="Copier #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>Copié</span></span></button></div></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 Info-bulles

Voir tout : Info-bulles

Infobulle qui rebondit

Info-bullesHTML + CSS

Infobulle en dégradé

Info-bullesHTML + CSS

Infobulle qui suit la souris

Info-bullesHTML + CSS

Infobulle différée et floue

Info-bullesHTML + CSS

Infobulle en orbite

Info-bullesHTML + CSS

Infobulle avec raccourci clavier

Info-bullesHTML + CSS

Infobulle avec aperçu

Info-bullesHTML + CSS

Infobulle en deux parties

Info-bullesHTML + CSS

Où l’utiliser

Les design systems, les pages de marque et les générateurs de palettes ont besoin de couleurs faciles à récupérer. Chaque pastille se soulève un peu au survol et affiche son code hexa dans une infobulle ; un clic le copie dans le presse-papiers et l'infobulle passe un instant à une coche verte avec copié, puis revient au code.

Les pastilles sont des boutons dont l'aria-label inclut le code, et la copie échoue en silence si le presse-papiers est bloqué. Modifie la liste des couleurs.