Build a Color Picker Component

By /
⏱ 2 min read

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)
  • Hex / RGB / HSL input fields
  • Alpha slider (transparency)
  • Eyedropper (modern browsers)
  • Color presets / swatches
  • Recently used colors

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:

  1. Saturation/value square (large 2D area)
  2. Hue slider (vertical)
  3. Optional: alpha slider
  4. Hex input + RGB inputs
  5. 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.

Scroll to Top