ColorLasso: Color Picker & Design System Extractor

Color picker, font finder and contrast checker. Capture website colors and components for Tailwind, React and AI prompts.

ColorLasso is a color picker, font finder and contrast checker for Chrome. Built for web designers and front-end developers, it turns what you see on a website into colors, design tokens, reusable code and AI-ready prompts. 🎨 Pick a color. Build a palette. Found the right shade on a landing page? Use the eyedropper to inspect the rendered pixel, CSS color, transparency or gradient. Copy HEX, RGB, HSL or OKLCH straight into your project. - Extract a website color palette or capture colors from a selected area. - Build an 11-step color scale with your chosen color at step 500. - Export CSS variables, Tailwind v4 @theme, tailwind.config.js, shadcn/ui themes or SVG. 🧩 From inspiration to your next component Studying a pricing card, hero section or navigation bar? Shift+Click a block with Component Heist to export Tailwind v4 HTML, React + TypeScript, SVG or an architectural prompt. - Studio AI turns measured page styles into structured prompts for Cursor, Claude Code, Gemini, v0 or Lovable. - Copy your prompt or download it as Markdown for your AI-assisted development or vibe coding workflow. - Prompts are prepared locally. ColorLasso does not send your inspection data to an AI service. Exports are a starting point for your work, not a promise of a pixel-perfect copy. 🔤 Find the font behind the design Like a site's typography? Inspect its font families, loaded weights and variants, with a bundled catalogue of 2,024 Google Fonts and Fontshare families. - See whether a match is verified or estimated. - Check whether a license is verified free, known commercial or unverified. - Preview a free alternative on the page, then undo it. 🔎 Check readability and inspect the details Before shipping a button or heading, check color contrast with WCAG 2.1 ratios and APCA readings. Audits account for gradients, translucent layers, ancestor opacity and open shadow roots. - Jump to a detected issue and preview a reversible Fix AA correction. - Simulate color blindness to review your color choices. - Measure in px and rem, inspect hover states, slow animations to 0.1x and preview other device sizes. - Collect design tokens: typography, spacing, radii and shadows. Text over images or outside the viewport is marked unverified. A contrast check is not a complete accessibility audit. 📁 Keep references ready for each project Building a moodboard or a client theme? Save colors and gradients in the Vault with their source website. Rename them, organize folders and filter by project. Export JSON or CSS variables, or share a palette through a link that contains its color values. Optionally, export a chosen color folder as JSON to Google Drive. Only that folder's name and color codes and names are sent, after your confirmation. Free to start. Pro when you need more. Free includes the full eyedropper, page palette, gradient sampler, color blindness simulator and CSS variables export, plus up to 3 contrast audits, 10 saved colors, 2 folders and trial uses of each Pro tool. Pro adds unlimited contrast audits with Fix AA, 500 colors in 60 folders, extra theme, shadcn/ui and SVG exports, the design-system kit and Component Heist. 🔒 Local inspection, clear permissions Colors, fonts, palettes and settings are analyzed and stored on your device. No account is needed for inspection. A Google account is required only for optional Drive export. No analytics or tracking. Pro activation checks your key with Gumroad, then rechecks at most once a day. Actions you request, such as opening a palette-sharing link or downloading website assets, can connect to the relevant website. Site access is requested when you activate the tools, limited to that site's origin, and remains granted until you revoke it in Chrome's site settings. Press Alt+S to start inspecting on pages where Chrome allows extensions.