Farbwähler mit Hex-Code
Ein abgerundetes Farbfeld, das den System-Wähler öffnet, synchron mit Hex-Feld und letzten Farben.
Einstellungen
Code
<div class="uv-ich"><label for="uv-ich-hex">Markenfarbe</label><div class="fd"><label class="sw" title="Auswahl öffnen"><input type="color" value="#ff5d8f" aria-label="Farbe wählen"><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="Zuletzt verwendet"><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 für KI
Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.
Mehr aus Eingabefelder
Alle ansehen: EingabefelderWofür du ihn nutzen kannst
Markeneinstellungen, Theme-Editoren und Designtools brauchen ein Farbfeld, das schnell und präzise ist. Hier steckt der native Farbwähler hinter einem abgerundeten Farbfeld, der Hex-Code daneben aktualisiert sich in beide Richtungen, eine kleine Aa-Kachel zeigt Text in der Farbe, und eine Reihe zuletzt genutzter Farben übernimmt eine Farbe per Klick.
Ungültige Hex-Codes umranden das Feld rot, bis sie korrigiert sind. Das Hex-Feld nutzt eine gut lesbare Monospace-Schrift, und die ganze Logik besteht nur aus ein paar Zeilen einfachem JavaScript.