#
HTML + CSSChamps
Sélecteur de couleur avec code hexadécimal
Une pastille arrondie qui ouvre le sélecteur du système, synchronisée avec le code hexa et les couleurs récentes.
Réglages
16px
1x
Code
<div class="uv-ich"><label for="uv-ich-hex">Couleur de marque</label><div class="fd"><label class="sw" title="Ouvrir le sélecteur"><input type="color" value="#ff5d8f" aria-label="Choisir une couleur"><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="Récentes"><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 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 Champs
Voir tout : ChampsOù l’utiliser
Les réglages de marque, les éditeurs de thème et les outils de design ont besoin d'un champ couleur rapide et précis. Ici, le sélecteur natif se cache derrière une pastille arrondie, le code hexa à côté se met à jour dans les deux sens, une petite tuile Aa montre du texte dans cette couleur et une rangée de couleurs récentes s'applique d'un clic.
Un code invalide entoure le champ de rouge jusqu'à correction. Le champ hexa utilise une police à chasse fixe, et toute la logique tient en quelques lignes.