Build a Color Picker Component

Updated July 26, 2026 · techinterview.org

Color pickers appear in design tools (Figma, Sketch), CMS apps, and customization UIs. The interview 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.