<div class="color-picker color-picker-open">
<button class="color-picker-trigger">
<div class="color-picker-swatch">
<div class="color-picker-swatch-color" style="background: #3b82f6"></div>
</div>
<span class="color-picker-value">#3b82f6</span>
<svg class="color-picker-arrow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m6 9 6 6 6-6"/></svg>
</button>
<div class="color-picker-dropdown">
<!-- Spectrum -->
<div class="color-picker-spectrum" style="background: hsl(220, 100%, 50%)">
<div class="color-picker-spectrum-white"></div>
<div class="color-picker-spectrum-black"></div>
<div class="color-picker-spectrum-cursor" style="left: 70%; top: 30%; background: #3b82f6"></div>
</div>
<!-- Hue slider -->
<div class="color-picker-slider color-picker-slider-hue">
<div class="color-picker-slider-thumb" style="left: 61%"></div>
</div>
<!-- Inputs -->
<div class="color-picker-inputs">
<input class="color-picker-input color-picker-input-hex" value="#3b82f6" />
<button class="color-picker-format-btn">HEX</button>
</div>
<!-- Presets -->
<div class="color-picker-presets">
<div class="color-picker-presets-label">Presets</div>
<div class="color-picker-presets-grid">
<div class="color-picker-preset" style="background: #ef4444"></div>
<div class="color-picker-preset" style="background: #f97316"></div>
<div class="color-picker-preset" style="background: #eab308"></div>
<div class="color-picker-preset" style="background: #22c55e"></div>
<div class="color-picker-preset color-picker-preset-active" style="background: #3b82f6"></div>
<div class="color-picker-preset" style="background: #8b5cf6"></div>
<div class="color-picker-preset" style="background: #ec4899"></div>
<div class="color-picker-preset" style="background: #64748b"></div>
</div>
</div>
</div>
</div>
Requires: ux.min.css
<div class="relative inline-block">
<button class="flex items-center gap-2 px-3 py-2 bg-base-100 border border-base-300 rounded-field">
<div class="w-6 h-6 rounded" style="background: #3b82f6"></div>
<span class="text-sm font-mono">#3b82f6</span>
</button>
<div class="absolute top-[calc(100%+4px)] left-0 z-100 min-w-[260px] bg-base-100 border border-base-300 rounded-box shadow-lg p-3">
<!-- Spectrum: relative div with gradient overlays and cursor circle -->
<!-- Hue: rainbow gradient bar with draggable thumb -->
<!-- Inputs: flex row of input fields -->
<!-- Presets: flex wrap grid of color circles -->
</div>
</div>
Requires: tw.min.css
// Open/close: toggle .color-picker-open on container
// Spectrum drag: calculate saturation (x%) and brightness (y%)
// Hue drag: calculate hue angle (0-360)
// Update all values on change:
// spectrum.style.background = 'hsl(' + hue + ', 100%, 50%)';
// cursor.style.left = saturation + '%';
// cursor.style.top = (100 - brightness) + '%';