Color & Design Toolkit — The Ultimate Designer’s Toolbox

🎨 Color & Design Toolkit — the all-in-one color picker, palette extractor, gradient generator, font identifier and CSS inspector for the web. Color & Design Toolkit puts a complete design studio in your browser toolbar. Pick any color, extract a whole page's palette, build gradients, identify fonts, and inspect the CSS behind any element — all in one fast, beautiful popup. It's made for web designers, UI/UX designers and front-end developers, and for anyone who has ever looked at a website and wondered "what color is that?" or "which font is that?" No sign-up. No account. Everything runs locally in your browser. ━━━━━━━━━━━━━━━━━━━━━━ WHAT YOU CAN DO ━━━━━━━━━━━━━━━━━━━━━━ 🎯 Pick any color, anywhere • Zoomed loupe eyedropper — magnify the page pixel by pixel and grab the exact color under your cursor • Screen-wide picker — sample colors from anywhere on screen, even outside the browser window • Copy in one tap and read every format: HEX, RGB, HSL, HSV, CMYK, LAB and LCH, plus the closest color name • Fine-tune with an interactive saturation/brightness square, hue and alpha sliders, and HSB/RGB inputs 🧩 Extract a page's color palette • One click pulls every color a webpage actually uses, ranked by how often it appears • Save your favorite palettes and come back to them anytime • Generate color schemes from any base color — complementary, analogous, triadic, tetradic, split-complementary, monochromatic, plus shades, tints and tones • Export to CSS, SCSS, LESS, Tailwind, JSON, SVG, ASE or plain text 🌈 Build gradients visually • A full editor for linear, radial and conic gradients • Drag color stops and adjust angle, position and opacity • Extract gradients already used on the page • Copy production-ready CSS, Tailwind or SVG in a click 🔤 Identify fonts on any page • See the exact typeface, weight, size, line height and letter spacing behind any text • Preview the font live in its real style • Detect Google Fonts and Adobe Fonts and jump straight to their specimens • List every font family a page uses 🔍 Inspect elements & CSS • Click any element to read its full box model, spacing, colors, typography, shadows and border radius • Copy the computed CSS — or a best-effort Tailwind class list — instantly • Check color contrast against WCAG guidelines to keep your designs accessible 📐 Measure & align • Overlay a pixel grid (4px, 8px, 12-column or custom) to check spacing and rhythm • Measure the distance between any two elements, or drag a free ruler • Visualize margins and padding with a box-model overlay 🖼️ Grab design assets • See the images, icons, logos and SVGs used on the current page • Download the ones you need in one click ━━━━━━━━━━━━━━━━━━━━━━ PERFECT FOR ━━━━━━━━━━━━━━━━━━━━━━ • Web and UI/UX designers matching colors and typography • Front-end developers reverse-engineering a layout or copying CSS • Brand and graphic designers building color palettes • Anyone who wants to pick, identify or copy colors, fonts and styles from any website ━━━━━━━━━━━━━━━━━━━━━━ WHY YOU'LL LOVE IT ━━━━━━━━━━━━━━━━━━━━━━ • Clean, distraction-free interface with light and dark themes • Fast — the current page is pre-scanned in the background, so results are ready the moment you open the popup • Unlimited history of your recent colors and inspections • Keyboard-friendly (open the command palette with Ctrl/⌘ + K) • Copy-ready output in the formats you already use ━━━━━━━━━━━━━━━━━━━━━━ PRIVACY-FIRST ━━━━━━━━━━━━━━━━━━━━━━ Your data stays yours. Everything happens locally in your browser — the extension does not collect, track, transmit or sell your browsing data, and the core tools work offline. Your saved colors, palettes and history are stored only on your device. ━━━━━━━━━━━━━━━━━━━━━━ FREE TO USE ━━━━━━━━━━━━━━━━━━━━━━ Color & Design Toolkit is completely free. If it saves you time, you can support development from the toolbar — but every feature is available to everyone, always. Install Color & Design Toolkit and turn any webpage into your color and design playground: pick a color, borrow a palette, copy a gradient, name a font and inspect any element — without ever leaving your tab.