Building Studio Colour: a Colour Tool That Never Covers Your Canvas

Case study · Studio Colour

I work in colour every day, and every browser colour tool I tried got in the way. There was always a popup covering the exact thing I was trying to sample, a picker that could only read flat swatches, or a contrast check I only ran after the design was “done.” So I built Studio Colour: a colour toolkit that lives in the browser’s side panel and never covers your work. Here’s the thinking behind it and the problems it took to solve.

The problem: colour tools fight your canvas

Three frustrations kept recurring. Pickers cover the page, because a floating panel sits on top of the very pixel you want to eyedrop. They can’t sample what’s rendered, since a DevTools inspector knows the CSS swatches an author declared but can’t see the colour of a hero photo, a gradient, or a frame of video. And contrast gets checked too late, in an audit at the end, instead of while you’re choosing the colour. I wanted one tool that fixed all three.

The key decision: the side panel

The single most important choice was where the tool lives. Chrome’s side panel docks beside the page instead of floating over it, so Studio Colour is always open and never obscures your canvas, so you can eyedrop, build a palette, and check contrast while the design stays fully visible. It sounds small; it changed the entire feel of the tool. A colour tool you don’t have to keep dismissing is a colour tool you actually use.

Sampling the rendered pixel

The hardest engineering problem was reading the real rendered colour of anything on screen, meaning the actual pixel after images, gradients, filters and video have painted. That meant working with what the browser has actually composited, plus a precision magnifier so single-pixel picks are reliable rather than a guess. Once that worked, “if it’s on the page, it’s a swatch” became true: sample a photo, a logo, a paused video frame, anything.

Perceptual colour beyond hex

A picker that only speaks hex leaves the hard part to you. Studio Colour builds palettes in OKLCH as well as HSL and hex, so a tint-and-shade ramp steps by perceived lightness and comes out even, and multi-stop gradients interpolate without the muddy grey middle. Drop in one base colour and it spins up a ramp, wheel harmonies, and gradients you can extract or generate, then save them to a deck you can drag, group and reuse across projects.

Contrast while you design, not after

Every pair you check shows the WCAG ratio and the newer APCA score side by side, with a plain pass/fail for the text size in question. Catching the failing combination when you choose it, instead of when the accessibility report lands, is the difference between a five-second fix and a redesign.

Export into the stack you actually build with

Colour work is wasted if it dies in a screenshot. One click turns any palette into plain CSS, custom properties, a Tailwind config, or design tokens, so you go from swatch to codebase without retyping a hex. And because it’s local-first, none of it leaves your machine, and there’s no account or tracking.

Then it wanted to leave the browser

The more I used it, the more I wanted the same picker everywhere, including system-wide and for print work where CMYK and swatch files (.ase, .clr) matter. That’s the native Studio Colour for Mac: the extension’s ideas extended to the whole desktop, with print-grade colour and a shared cloud backup so palettes follow you between browser and app. The extension is the free front door; the Mac app is where the workflow goes deep. More on that soon.

Status: in review at the Chrome Web Store

Studio Colour is submitted and in review right now. The moment it clears, the button below becomes a one-click install, which should happen within days.