Font & Color Picker Pro

About

Font & Color Picker Pro is a designer's toolkit built into your browser. Open the popup on any page and instantly see every color, font, and spacing value that makes up its design — no DevTools required.

Pick any color on screen
Use the built-in eyedropper to sample any pixel on the page. Your picked colors are saved to history automatically, and the popup reopens to show your result the moment you've picked. Copy as HEX, RGB, or HSL — your choice.

Inspect fonts without opening DevTools
Activate the font inspector, hover over any element, and see its font family, size, weight, line height, and spacing instantly. Click to lock the panel. No tab-switching, no digging through computed styles.

Scan the full page palette in one click
Font & Color Picker Pro automatically scans the entire page when you open it and builds a clean palette of all colors, fonts, type scale values, and spacing tokens — deduplicated and ready to export.

CSS variable names, right on the swatch
When a color maps to a CSS custom property (like --brand-primary), the variable name appears directly beneath the swatch. No more guessing what the design token is called.

Export to Figma or copy as CSS
Export your palette as W3C / Tokens Studio JSON and paste straight into Figma with four easy steps shown inline. Or copy as CSS variables — edit token names and pick exactly what you want before copying.

Features at a glance:

- Eyedropper with color history and per-item copy/delete
- Font inspector panel — fixed on-page, hover to highlight, click to lock
- Auto-scanning palette: colors · fonts · type scale · spacing
- CSS variable mapping on every color swatch
- Copy as HEX, RGB, or HSL
- Export palette as Tokens Studio JSON for Figma
- Copy CSS variables with an editable token editor before export
- Works on any webpage

Built for designers, developers, and anyone who's ever wondered "what font is that?" or "what's that exact shade of blue?"