Hex Input

<!--
  A typed hex field paired with a native <input type="color"> so both editing modes
  agree. An invalid entry is flagged with aria-invalid, an icon AND a text message -
  never a bare red border, which colour-blind users cannot see. Static snapshot.
-->
<div class="w-full max-w-xs">
  <label for="hex-in" class="mb-1 block text-xs font-medium text-gray-600 dark:text-gray-400">Hex color</label>
  <div class="flex items-center gap-2">
    <label class="relative h-10 w-10 shrink-0 overflow-hidden rounded-lg border border-black/10 dark:border-white/15" style="background-color:#3b82f6">
      <span class="sr-only">Pick with system color picker</span>
      <input type="color" value="#3b82f6" class="absolute inset-0 h-full w-full cursor-pointer opacity-0" />
    </label>
    <input id="hex-in" type="text" value="#3b82f6" inputmode="text" spellcheck="false" aria-invalid="false"
      class="h-10 w-full rounded-lg border border-gray-300 bg-transparent px-3 font-mono text-sm text-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:border-gray-700 dark:text-gray-100 dark:focus-visible:ring-blue-400" />
  </div>
  <p class="mt-1.5 text-xs text-gray-500 dark:text-gray-400">Enter a 6-digit hex, e.g. #1e293b.</p>
</div>