Studio Colour

Pick colours from any page, check WCAG/APCA contrast, build gradients, and export CSS or design tokens.

Studio Colour is a colour toolkit for web designers and developers. From the side panel you can pick a colour from any page, check its contrast, build gradients, convert between formats, and export colours as CSS or design tokens. Features: • Eyedropper with a magnifier loupe and a live pixel grid. Hold Shift to pick up to five colours in one pass and save them together. • Contrast checker with WCAG and APCA scoring, plus a one-click fix that raises a failing pair to the next passing tier. • Gradient builder for linear and radial gradients, with draggable stops and copy-ready CSS or Tailwind output. • Format conversion across the common colour spaces — including HEX, RGB, HSL and OKLCH — with accurate, no-drift results. • Design-token export: read the colours, type scale, spacing, radii and shadows from a live page and export them as CSS variables, Tailwind config, or design tokens. • A local library for your saved colours, groups and gradients. Everything runs in the side panel, and the free tier is a complete tool. Privacy: Studio Colour runs entirely in your browser. There is no analytics and no behavioural tracking. The colours you pick, the screenshots the picker uses, and the pages you sample stay on your device. Built by Studio Grid.