Paleta del proyecto
Muestras de color con copiar
Pasa por una muestra para ver su código HEX y púlsala para copiarlo; el tooltip lo confirma con un check.
Ajustes
Código
<div class="uv-tcs"><p>Paleta del proyecto</p><div class="sw"><button type="button" style="--c:#0f172a" data-hex="#0F172A" aria-label="Copiar #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>Copiado</span></span></button><button type="button" style="--c:#334155" data-hex="#334155" aria-label="Copiar #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>Copiado</span></span></button><button type="button" style="--c:#f97316" data-hex="#F97316" aria-label="Copiar #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>Copiado</span></span></button><button type="button" style="--c:#facc15" data-hex="#FACC15" aria-label="Copiar #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>Copiado</span></span></button><button type="button" style="--c:#22c55e" data-hex="#22C55E" aria-label="Copiar #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>Copiado</span></span></button></div></div>Prompt para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Tooltips
Ver todos: TooltipsDónde usarlo
Los sistemas de diseño, las páginas de marca y los generadores de paletas necesitan colores fáciles de llevarse. Cada muestra se eleva un poco al pasar y enseña su código HEX en un tooltip; al hacer clic se copia al portapapeles y el tooltip pasa a un check verde con la palabra copiado durante un momento, antes de volver al código.
Las muestras son botones con un aria-label que incluye el código, y la copia falla en silencio donde el portapapeles está bloqueado. Edita la lista de colores en el código para enseñar tu paleta.