Color Extraction
Every color your brand uses,
mapped and organized automatically.
ExtractVibe analyzes the full CSS of any website to extract primary, secondary, and semantic colors. It detects light and dark mode palettes, identifies CSS custom properties, and generates export-ready color tokens in any format you need.
01 / Color Extraction
Primary and semantic color detection
Goes beyond simple color picking. ExtractVibe parses every CSS rule on the page, weighing colors by visual prominence and usage frequency. It distinguishes between primary brand colors, semantic colors used for success states, warnings, and errors, and neutral palette tones used for backgrounds and text. The result is a structured palette that mirrors how the brand actually uses color in production.
02 / Color Extraction
Light and dark mode awareness
Automatically detects prefers-color-scheme media queries and CSS custom property overrides to extract separate palettes for light and dark mode. If a site ships both themes, ExtractVibe captures both and maps the relationship between corresponding tokens, so you can reproduce the exact same adaptive behavior in your own design system.
03 / Color Extraction
CSS variable and token mapping
Extracts CSS custom properties (--brand-primary, --text-muted, etc.) and maps them to their resolved hex, HSL, or RGB values. This gives you the token layer that most color pickers miss entirely. The output includes variable names, fallback values, and the cascade context where each token is defined, ready to drop into your own stylesheet or design tool.
04 / Color Extraction
Gradient and opacity analysis
Captures linear gradients, radial gradients, and conic gradients along with their stop positions and color values. ExtractVibe also tracks opacity and alpha channel usage across the palette, identifying semi-transparent overlays and glass-morphism patterns that define the visual texture of modern interfaces.
How it works
01
Enter any URL
Paste a website URL into ExtractVibe. The extraction engine fetches and renders the page in a real Chromium browser, executing JavaScript and loading all stylesheets.
02
Automated CSS parsing
Every stylesheet, inline style, and computed style is parsed. Colors are deduplicated, normalized, and ranked by visual weight and frequency of use across the DOM.
03
Structured palette output
Receive a structured JSON palette with primary, secondary, semantic, and neutral colors. Export as CSS variables, Tailwind config, Figma tokens, or Style Dictionary format.
Code Example
Extract colors via API
const response = await fetch("https://extractvibe.com/api/extract", {
method: "POST",
headers: {
"Content-Type": "application/json",
"x-api-key": "ev_your_api_key_here"
},
body: JSON.stringify({ url: "https://stripe.com" })
});
const { jobId } = await response.json();
// Poll for results
const result = await fetch(
`https://extractvibe.com/api/extract/${jobId}/result`,
{ headers: { "x-api-key": "ev_your_api_key_here" } }
);
const brandKit = await result.json();
console.log(brandKit.colors);
// {
// primary: "#635BFF",
// secondary: "#0A2540",
// semantic: { success: "#30D158", warning: "#FFD60A", error: "#FF453A" },
// neutrals: ["#F6F9FC", "#E3E8EE", "#697386", "#425466", "#0A2540"],
// darkMode: { primary: "#7A73FF", background: "#0A2540" }
// }Frequently Asked Questions
How many colors does ExtractVibe extract from a single page?+
ExtractVibe typically identifies 15-40 unique colors per website, depending on the complexity of the design system. These are deduplicated and normalized, then grouped into categories: primary brand colors, semantic colors (success, warning, error, info), neutrals, and accent colors. You get the full palette, not just the top 5.
Does it detect CSS custom properties and design tokens?+
Yes. ExtractVibe parses CSS custom properties (CSS variables) and maps each variable name to its resolved value. This means you get both the token names (like --color-brand-primary) and their actual hex/HSL/RGB values, preserving the semantic structure of the original design system.
Can ExtractVibe detect dark mode palettes?+
Absolutely. ExtractVibe detects prefers-color-scheme media queries and data-theme attribute patterns to extract separate light and dark mode palettes. It maps the relationship between corresponding tokens across themes, so you can see exactly how each color transforms between modes.
What output formats are supported for color data?+
Color data is returned as structured JSON by default, with hex, HSL, and RGB representations for every color. You can also export as CSS custom properties, Tailwind CSS config, Figma design tokens, or Style Dictionary format for integration into any design or development workflow.
How does color ranking work?+
Colors are ranked by a combination of visual prominence (how much screen area they occupy), usage frequency (how many CSS rules reference them), and semantic importance (primary buttons and headings weigh more than border colors). This weighted ranking ensures the most important brand colors surface first.
Extract your color palette
Get a complete, structured color palette from any website in seconds. No manual color picking required.
Related