# Build a Color Picker Component

Source: https://www.techinterview.org/post/3233475209/build-color-picker-component/
Updated: 2026-07-26 · techinterview.org

Color pickers appear in design tools (Figma, Sketch), CMS apps, and customization UIs. [The interview](/system-design-interview-guides/) tests whether you understand color spaces, gesture handling, and the polish that makes a picker feel professional.

## Functional requirements

- **Color spectrum (hue or saturation/value):** the centerpiece — a 2D area for saturation and value plus a separate hue control. Interviewers watch how you map pointer coordinates onto color values and keep the spectrum and inputs in sync as either one changes.

- **Hex / RGB / HSL input fields:** let users type a value directly and see it reflected everywhere. The common probe is what happens on a partial or invalid entry — validate on blur rather than on every keystroke so a half-typed hex like `#F` doesn't blow away the current color.

- **Alpha slider (transparency):** controls opacity from 0 to 1, rendered over a checkered background so the transparency is visible. Be ready to say how alpha rides along in the output format, e.g. `rgba()` or an 8-digit hex.

- **Eyedropper (modern browsers):** samples any pixel on screen via the native EyeDropper API. Interviewers want to hear you feature-detect and hide the button entirely when the API is absent, rather than showing a control that does nothing.

- **Color presets / swatches:** a fixed palette of common or brand colors for one-click selection. Talk about configuring the set per app context and making a preset click update every input and the spectrum position, not just the preview.

- **Recently used colors:** a short history of picks, persisted so it survives a reload. The interesting part is dedup and eviction — keep the last N distinct colors, most-recent first, and move a re-picked color back to the front instead of adding a duplicate.

## Color spaces

- **HSL/HSV:** human-friendly (hue, saturation, lightness/value)

- **RGB:** computer-friendly (0–255 per channel)

- **Hex:** CSS standard (#FF5733)

- **OKLCH:** perceptually uniform; modern (CSS Color 4)

Most pickers use HSV/HSL for the visual interface and offer hex/RGB as input options.

## The classic picker UI

Standard layout:

- Saturation/value square (large 2D area)

- Hue slider (vertical)

- Optional: alpha slider

- Hex input + RGB inputs

- Color preview swatch

## Saturation/value square

The interactive 2D area:

- X axis: saturation (0% → 100%)

- Y axis: value (100% → 0% top-to-bottom)

- Background: gradient combining both

- Cursor: small circle showing current position

Pointer event handling: mousedown sets pointer; mousemove updates position; mouseup releases.

## Hue slider

Vertical (or horizontal) slider with hue gradient (red → yellow → green → cyan → blue → magenta → red).

Same pointer-event handling as saturation/value square.

## Conversions

Convert between formats as user adjusts. Common formulas:

- HSL ↔ RGB: math is well-known

- RGB ↔ Hex: trivial conversion

- OKLCH ↔ RGB: more complex; use a library (culori, color.js)

Library: **colord** for lightweight conversions; culori for OKLCH and color science.

## Eyedropper API

Modern browsers (Chromium 95+):


```
const eyeDropper = new EyeDropper();
const result = await eyeDropper.open();
console.log(result.sRGBHex);
```


Lets user pick a pixel color from anywhere on screen. Beautiful UX. Falls back gracefully when not supported.

## Recent colors

Track colors the user has selected:

- Last 10 distinct colors

- Stored in local storage

- One-click reuse

## Color presets

Predefined swatch palette (tailored per app context). Common: brand colors, theme colors.

## Accessibility

- Each input is keyboard-accessible

- aria-label for the picker overall

- aria-valuetext announces current color in a readable form ("red 200 saturation 80")

- Contrast checker integration: warn if text on this color fails WCAG

## Mobile considerations

- Touch areas large enough (min 44×44 pt)

- Two-finger drag for fine adjustment

- Floating preview to avoid finger covering target

## Common mistakes

- Inputs that go out of sync (typing in Hex does not update RGB)

- Performance: re-render on every pointer move at 60 FPS without throttle

- No accessibility — only mouse-driven

- Eyedropper API not used where supported

## Library options

- **react-color:** popular, multiple picker styles

- **react-colorful:** tiny (2KB), modern

- **chrome-style-picker:** matches Chrome devtools

## Frequently Asked Questions

### Should I support OKLCH?

For modern design tools, yes — perceptual uniformity matters. For typical apps, HSL/HSV is sufficient.

### How do I handle the alpha channel?

Separate slider for alpha. Show a checkered background behind the swatch to visualize transparency.

### Can I use the native HTML color input?

For simple use cases, yes — `<input type="color">` works. No customization, but accessible by default.