Color Tokens

Extract colors and design tokens from the current page: palette, hex/rgb, WCAG contrast. Runs locally.

Color Tokens scans the page you are viewing and turns its colors into a practical design-token kit. What you get • Ranked palette from computed styles and CSS custom properties • Hex and RGB for every color, with usage counts and roles (text / background / border / token) • WCAG contrast samples for real text-on-background pairs (AA / AAA grades) • One-click copy of any hex swatch Export formats • JSON design tokens • CSS custom properties (:root variables) • CSV for spreadsheets • Copy a hex list to the clipboard Why it’s useful • Rebuild a brand palette from a live site or styleguide page • Check contrast while reviewing UI • Hand tokens to designers or drop CSS variables into a prototype Privacy • Works on the active tab only when you use the extension • Everything runs locally on your device • No account required How to use 1. Open a webpage 2. Click the Color Tokens icon 3. Scan page colors 4. Click a swatch to copy, or export JSON / CSS / CSV