#
HTML + CSSInputs
Selector de color con HEX
Una muestra redondeada que abre el selector del sistema, sincronizada con el código HEX y con colores recientes.
Ajustes
16px
1x
Código
<div class="uv-ich"><label for="uv-ich-hex">Color de marca</label><div class="fd"><label class="sw" title="Abrir selector"><input type="color" value="#ff5d8f" aria-label="Elegir color"><i></i></label><span class="hs">#</span><input id="uv-ich-hex" class="hx" value="FF5D8F" maxlength="6" spellcheck="false" autocomplete="off"><span class="pv" aria-hidden="true">Aa</span></div><div class="rc" role="group" aria-label="Recientes"><button type="button" style="--c:#ff5d8f" aria-label="#ff5d8f"></button><button type="button" style="--c:#6366f1" aria-label="#6366f1"></button><button type="button" style="--c:#10b981" aria-label="#10b981"></button><button type="button" style="--c:#f59e0b" aria-label="#f59e0b"></button><button type="button" style="--c:#0ea5e9" aria-label="#0ea5e9"></button><button type="button" style="--c:#111827" aria-label="#111827"></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 Inputs
Ver todos: InputsDónde usarlo
Los ajustes de marca, los editores de temas y las herramientas de diseño necesitan un input de color rápido y preciso. Aquí el selector nativo se esconde tras una muestra redondeada, el código HEX de al lado se actualiza en los dos sentidos, una pequeña ficha Aa enseña texto en ese color y una fila de recientes aplica un color con un clic.
Los códigos no válidos marcan el campo en rojo hasta que se corrigen. El input HEX usa una fuente monoespaciada para leerlo bien y toda la lógica son unas líneas de JavaScript.