Pixel Color Picker

A browser colour picker: sample any pixel on the page, build palettes, and export values in the formats a stylesheet actually needs.

Year: 2026
My role: Product definition · UX · Development · Launch
Platform: Chrome Extension

View on Chrome Web Store

The problem

Sampling a colour from a live page usually means a screenshot, an image editor and a converter. The value you want — HEX, RGB, HSL, a Tailwind token — always needs one more step than the tool offers.

Product approach

The extension samples straight from the page and keeps what it finds: pick colours with the eyedropper, build palettes, keep a history, and export CSS variables, JSON, a Tailwind config or a PNG. Twelve pixel-art themes keep it pleasant to leave open.

Key product decisions

Pick from the live DOM

Sampling the page instead of a screenshot removes the image-editor detour entirely.

Export what gets pasted

CSS, JSON, Tailwind and PNG output, because the value is only half the job — the format is the other half.

Local and lightweight

Palettes stay in the browser: no account, no sync, no upload of the pages you sample.

From friction to launch

The screenshot detour

Started from the repeated loop of screenshot, eyedropper, converter — for one colour value.

Formats first

Exports were designed around how designers paste values into real code, not around what is easiest to dump out.

Make it nice to keep open

Themes, palette history and bilingual store copy followed once the core loop was fast.

What I learned

The value of a colour tool is set by step count: cutting sampling from five steps to two is what puts it into daily use.

Store promo graphics

Screenshots from the Chrome Web Store listing.