HSL Sliders

<!--
  Three native ranges for H, S and L. Each track is a live CSS gradient showing what
  moving THAT channel does while the other two hold, so the slider previews its own
  effect. The resolved hex is printed and set as each slider's aria-label. Static
  snapshot - interactive logic lives in the React / TypeScript tabs.
-->
<div class="w-full max-w-xs space-y-3">
  <div class="flex items-center gap-3">
    <span class="h-10 w-10 shrink-0 rounded-lg border border-black/10 dark:border-white/15" style="background-color:#3b82f6"></span>
    <span class="font-mono text-sm font-semibold text-gray-900 dark:text-gray-100">#3b82f6</span>
    <span class="ml-auto text-xs text-gray-500 dark:text-gray-400">hsl(217 91% 60%)</span>
  </div>
  <label class="block text-xs font-medium text-gray-600 dark:text-gray-400">Hue
    <input type="range" min="0" max="360" value="217" aria-label="Hue, #3b82f6" class="mt-1 h-3 w-full cursor-pointer appearance-none rounded-full" style="background:linear-gradient(to right,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00)" />
  </label>
  <label class="block text-xs font-medium text-gray-600 dark:text-gray-400">Saturation
    <input type="range" min="0" max="100" value="91" aria-label="Saturation, #3b82f6" class="mt-1 h-3 w-full cursor-pointer appearance-none rounded-full" style="background:linear-gradient(to right,#808080,#3b82f6)" />
  </label>
  <label class="block text-xs font-medium text-gray-600 dark:text-gray-400">Lightness
    <input type="range" min="0" max="100" value="60" aria-label="Lightness, #3b82f6" class="mt-1 h-3 w-full cursor-pointer appearance-none rounded-full" style="background:linear-gradient(to right,#000,#3b82f6,#fff)" />
  </label>
</div>