#
HTML + CSSInputs
Color picker with hex code
A rounded swatch that opens the system picker, kept in sync with a hex field and recent colors.
Settings
16px
1x
Code
<div class="uv-ich"><label for="uv-ich-hex">Brand color</label><div class="fd"><label class="sw" title="Open picker"><input type="color" value="#ff5d8f" aria-label="Choose 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="Recent"><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 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 Inputs
See all InputsWhere to use it
Brand settings, theme editors and design tools all need a color input that is quick to use and precise. Here the native color picker hides behind a rounded swatch, the hex code beside it updates both ways, a small Aa tile previews text in that color, and a row of recent swatches applies a color with one click.
Invalid hex codes outline the field in red until they are fixed. The hex input uses a monospaced font for easy reading, and all the logic is a few lines of plain JavaScript.