Build a Color Picker | Interview Question

Q: Build a Color Picker

**Target Audience:** Frontend candidates preparing for a machine coding round. You know React components and useState ; no colour theory is assumed. **Difficulty:** Medium > **How to read this doc:** Every idea is explained in plain language first, then tagged with 📌 Interview term: so you also learn the words an interviewer listens for. Code excerpts come from the runnable solution; every number in the Verified section was printed by running the code (React 19.3.1, Node 22). ## 1. Why This Even Matters — A Story First At a paint shop you can ask for a colour three ways. You can point at a chip on the wall ("that blue"). You can read out the code printed on a tin ("1E90FF"). Or you can sit with the mixer and turn three knobs: which colour family, how vivid, how light. Whatever you do, the shop has to keep one recipe, and every way of asking must update that one recipe and show you a sample. A **colour picker** is the paint shop on a screen. The swatches ar

The problem

Question presented to candidate: "Designers want to pick a brand colour in our settings page. Build a colour picker: hue, saturation and lightness sliders, a hex text field they can type or paste into, a row of preset swatches, a live preview, and a button that copies the hex value."

Requirements:

Three sliders for H (0 to 360), S and L (0 to 100), a hex field that accepts #RGB or #RRGGBB (the # optional, any case), and eight preset swatches.
Every control updates the others; the preview shows the hex, the rgb() value and readable text on top (black or white, chosen by contrast).
An unfinished or invalid hex does not change the colour and is flagged; leaving the field normalises it (for example #fc0 becomes #FFCC00).
"Copy" writes the hex to the clipboard and shows a short confirmation, or a fallback message when the Clipboard API is unavailable.
The parent receives the hex on every change.
Accessible: labelled sliders with spoken values, swatches as named toggle buttons, a status message.

What a strong answer should cover:

Choosing one canonical colour state and deriving the rest, and why the hex text needs its own draft state.
Correct HSL to RGB to hex conversions, and the precision trap of storing rounded HSL.
The WCAG contrast ratio for picking black or white text.
navigator.clipboard.writeText being asynchronous, needing a secure context, and failing; a timer that is cleaned up on unmount.
ARIA: aria-valuetext on sliders, aria-pressed on swatches, aria-invalid on the field.

Clarifying questions expected:

"Which colour models must the user see: HSL, RGB, both? Is alpha needed?"
"Should the parent get every intermediate value while dragging, or only the final one?"
"Is there a fixed brand palette for the swatches?"

Code / implementation expected: Yes. A working picker with sliders, hex field, swatches, preview and copy; conversion functions that are separate and testable.

React
UI
Events

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Frontend candidates preparing for a machine coding round. You know React components and useState; no colour theory is assumed. Difficulty: Medium

How to read this doc: Every idea is explained in plain language first, then tagged with 📌 Interview term: so you also learn the words an interviewer listens for. Code excerpts come from the runnable solution; every number in the Verified section was printed by running the code (React 19.3.1, Node 22).

1. Why This Even Matters — A Story First

At a paint shop you can ask for a colour three ways. You can point at a chip on the wall ("that blue"). You can read out the code printed on a tin ("1E90FF"). Or you can sit with the mixer and turn three knobs: which colour family, how vivid, how light. Whatever you do, the shop has to keep one recipe, and every way of asking must update that one recipe and show you a s

The solution is hidden so you can try first

14 min read · 9 sections

React solution

Every file of the working solution. Open it in the playground to run and change it.

ReactComplete solution

Open in playground

import { useState } from "react";
import ColorPicker from "./src/components/ColorPicker";

export default function App() {
  const [color, setColor] = useState("#1E90FF");
  return (
    <main className="page">
      <section className="card">
        <h1>Pick a brand colour</h1>
        <ColorPicker initial={color} onChange={setColor} />
        <p className="chosen" data-testid="chosen">
          Parent received: {color}
        </p>
      </section>
    </main>
  );
}

Discussion

Other approaches, follow-ups and how it went in real interviews.

Sign in to join the discussion.

No comments yet. Share how you would answer it.

The solution is hidden so you can try first

Keep your momentum going.