Build a Color Picker

Question

Accepted Answer

## Building a Color Picker in React

**Mental model:** A color picker keeps one source of truth — RGB channels — and *derives* the hex string from them. Sliders edit channels; preset swatches set all three at once; the hex is computed for display/copy. Keep it controlled so the parent owns the value.

### Step 1 — RGB as the single source of truth
```jsx
const [rgb, setRgb] = useState({ r: 37, g: 99, b: 235 });
```

### Step 2 — Derive hex from RGB
Pad each channel to two hex digits.

```jsx
const toHex = ({ r, g, b }) => '#' + [r, g, b].map((c) => c.toString(16).padStart(2, '0')).join('');
```

### Step 3 — Channel sliders
Each slider updates one channel immutably.

```jsx
<input type="range" min="0" max="255" value={rgb.r}
  onChange={(e) => setRgb((c) => ({ ...c, r: +e.target.value }))} />
```

### Step 4 — Preset swatches
Parse a hex preset back into channels.

```jsx
const fromHex = (h) => ({ r: parseInt(h.slice(1, 3), 16), g: parseInt(h.slice(3, 5), 16), b: parseInt(h.slice(5, 7)

Build a Color Picker

Understand the problem

Attempt it yourself

Stuck? AI Nudge Available

Study the solution

The solution is waiting

React solution

Join the discussion

Discussion (0)