The brief was one line: ‘We need a color picker.’ Nothing defined how people pick, verify, copy or reuse a color, and there was one day to design it.
Mapped the five-step job into one compact popup: Pick as the primary action, preview and HEX/RGB side by side, one-click copy with confirmation, and recent colors.
Shipped and still evolving, from v0.1 in Dec 2021 to v3.0.1 in May 2026. Growth isn't credited to the first design alone.
A color picker sounds simple. But selecting a color is only the beginning: people need to identify it, understand its value, and move it into another tool or workflow. The brief was one line: ‘We need a color picker.’
I owned product design and worked directly with one engineer. My job was to turn an undefined request into a focused, build-ready experience with a clear primary action, a visible result, and minimal friction between selecting a color and using it.
1 designer, 1 engineer
One focused design day, and a small browser popup.
A feature request is not a product. The brief didn't say how people would pick a color, what they needed to see after, how they'd copy it, or how they'd come back to it.
“How do I pick a color from the page?”
“How do I know which color I picked?”
“How do I get its HEX or RGB value?”
“How do I reuse a recent color without starting over?”
Take people from selecting a color to using it elsewhere, with as little friction as possible.
This sequence became the backbone of the interface. Selection, inspection and copying live in one compact view, not separate screens.
Picking is the entry point, and the selected color gets a large preview that links what's on the page to the value in the extension.
A hue slider gives a familiar way to explore or refine the color.
HEX and RGB are readable, distinct and copied in one action, with a ‘copied!’ confirmation.
Recent swatches support repeated work. Rate us and feedback stay secondary.
| Interaction | Behaviour | Why it matters |
|---|---|---|
| Pick a color | Start sampling | Makes the main task discoverable |
| Color selected | Update preview and values | Connects the sample to its output |
| Copy a value | Copy the chosen format | Cuts repetitive manual selection |
| Copy confirmation | Show “copied!” | Confirms the action without doubt |
| Recent color | Return to a previous color | Supports repeated use |
| Rate or feedback | Secondary path | Doesn't disrupt the main task |
With one engineer and a short window, I made every decision explicit: what the primary action does, how values appear, and what feedback people get.
| Constraint | Decision | Trade-off |
|---|---|---|
| One-line brief | Defined the essential workflow | Less time on broad discovery |
| One-day design window | Focused on the primary task and key states | Limited exploration |
| Small engineering team | Kept interactions buildable | Avoided extra complexity |
| No formal research | Used task analysis and judgement | Assumptions not validated before launch |
| Small browser popup | Prioritised color, values and actions | Little room for advanced features |
The biggest trade-off was speed versus validation.
Users
On the Chrome Web Store
Shipped and still evolving. Growth isn't credited to the first design alone; distribution and later updates also played a part.
Start with an unclear problem, find the essential task, make deliberate interaction decisions, and work closely with engineering to ship.
