Component Deep Dive #43: Color Picker — Build an HSV Picker Panel Without Any Library
The native <input type="color"> has three fatal flaws: it can't adjust alpha, its popup panel is browser-rendered and unstyleable, and it looks different across Chrome/Firefox/Safari. A professional color picker needs a hue slider, saturation-value panel, alpha slider, HEX/RGB inputs, and preset swatches.
The core of the SV panel is two layered CSS gradients — a horizontal white-to-transparent and a vertical black-to-transparent over the hue color, forming the HSV saturation-value space. The hue is passed via a CSS custom property so the panel background updates without repainting.
The HSV-to-RGB conversion splits the hue into six 60-degree segments, calculates RGB components per segment, then adds an offset. The trickiest part is handling drag events correctly with getBoundingClientRect and supporting touch events for mobile.
Extensions include an alpha channel slider with a checkerboard CSS background, preset color swatches, and HSL mode for design tools that prefer HSL over HSV.
Top comments (0)