Color Scheme Extractor

Color Scheme Extractor helps developers and designers inspect the color system used on the current website. Open the extension on a page, click Analyze, and review the detected palette, semantic color roles, CSS variables, contrast results, and export options. Analysis runs locally in your browser and only starts when you choose to analyze the active tab. Main features: - Extract colors from page backgrounds, text, links, buttons, borders, SVG elements, and CSS custom properties - Group similar shades to make palettes easier to review - Identify common semantic roles such as primary, secondary, accent, background, surface, text, link, border, error, warning, success, and info - Detect available CSS custom properties from the page - Review WCAG contrast ratios for detected color combinations - Copy colors as HEX, RGB, HSL, or CSS variable references - Export palettes as CSS variables, SCSS variables, LESS variables, JSON tokens, Figma Tokens JSON, and SVG palette files - Save recent analyses and favorite colors locally - Use light, dark, or system theme in the popup - Inspect individual elements on the page to view their detected colors How it works: 1. Visit a website you want to inspect 2. Open Color Scheme Extractor 3. Click Analyze 4. Copy or export the colors and tokens you need Privacy: Color Scheme Extractor runs analysis locally in your browser. It does not send website content, extracted colors, browsing history, settings, or favorites to an external server. Settings, recent analyses, and favorites are stored locally on your device through Chrome storage. Useful for: - Reviewing the colors used on a website - Creating design token files from an existing page - Checking contrast between foreground and background colors - Collecting implementation-ready color values - Comparing visual palettes across pages during frontend work - Documenting color choices for design handoff