Website color palette
Extract colors from any public webpage's HTML, CSS stylesheets, and SVGs. Inspect light and dark mode schemes, review frequency rankings and semantic roles, and export clean SVG swatches or CSS variables.
We inspect public HTML, CSS, and JavaScript without rendering the page.
Only the URL and resulting color names and hex values are cached for 24 hours.
How Our Website Color Palette Extractor Works
Inspect brand colors, background surfaces, and dark mode tokens from any live URL in three simple steps.
Enter Website URL or Domain
Enter any public domain or webpage link (e.g., pinatool.com or https://stripe.com) and click Get palette to parse its live stylesheets.
Filter Light & Dark Roles
Explore the 7-role semantic brand palette and full occurrence list. Toggle between All, Light, and Dark mode color schemes.
Export CSS, SVG or Share Link
Click any swatch to copy its HEX code, copy a shareable URL for your team, or download the vector SVG and CSS variables bundle.
pinatool.com • https://tailwindcss.com • stripe.com/pricing
Note on Protected Sites: Only public websites can be scanned. If a webpage sits behind a login wall or anti-bot challenge, take a screenshot and use our Image Color Palette tool.
URL Stylesheet Scanner vs. Browser Eyedropper Extensions
Pixel eyedropper extensions only sample a single rendered viewport state and often miss dark mode tokens, hover states, or SVG fills. Here is how source-level stylesheet extraction compares:
| Capability | Pinatool URL Scanner | Eyedropper Extension |
|---|---|---|
| Extraction Source | Parses raw HTML, external CSS, inline styles, and SVGs. | Samples single screen pixels one click at a time. |
| Dark Mode Detection | Automatic via @media (prefers-color-scheme: dark) & .dark selectors. | Manual toggle required before re-sampling every element. |
| Modern CSS Formats | Resolves HEX, RGB, HSL, OKLCH, and CSS var(--*) tokens. | Converts screen output to flat sRGB HEX only. |
| Frequency & Roles | Counts declarations and maps 7 semantic brand roles. | Unordered history of manually clicked pixels. |
Exported CSS Variables Preview
website-palette.cssDownload your extracted website palette as a ZIP archive containing both a vector .svg swatch card and clean CSS tokens:
:root {
/* Extracted Website Brand Roles */
--site-primary: #0F1D3A; /* Primary Brand */
--site-accent: #14B8A6; /* Interactive Accent */
--site-surface: #FFFFFF; /* Light Surface */
--site-muted: #64748B; /* Secondary Text */
--site-dark-bg: #090D16; /* Dark Mode Surface */
}Why Inspect and Extract Website Colors?
Manually inspecting colors through browser Developer Tools requires digging through nested DOM nodes, external stylesheets, and minified CSS. Pinatool automates the entire analysis in seconds, giving you an accurate, organized palette for design research or engineering implementation.
Frontend Development
Quickly audit an existing theme or migrate legacy stylesheets to design tokens. Export ready-to-paste CSS custom properties without manually inspecting individual DOM elements.
UI/UX Design Research
Analyze real-world visual hierarchies and color distribution. Discover how leading products balance neutral surfaces, text contrast, and high-chroma accent shades across light and dark themes.
Brand & Competitive Audits
Verify brand consistency across subdomains, marketing landing pages, and documentation portals to catch off-spec HEX codes and ensure uniform color guidelines.
Key Features
Engineered specifically for web designers, frontend developers, and product teams.
Full-Stack Asset Scanning
Extracts colors defined across linked CSS stylesheets, inline style attributes, embedded SVGs, and resolved CSS custom properties.
Light & Dark Mode Detection
Automatically identifies @media prefers-color-scheme rules and dark theme selectors, letting you filter between Light and Dark palettes seamlessly.
Frequency & 7-Role Heuristic
Colors are ranked by declaration count and organized into key semantic roles including primary, accent, background, and text.
CSS Variables Export
Generate clean, formatted CSS custom properties ready to paste directly into your Tailwind configuration or project stylesheet.
SVG Swatch Downloads
Download a crisp vector SVG color card containing your extracted palette for instant import into Figma, Sketch, or Adobe XD.
SSRF-Hardened & Private
Scans run through a privacy-hardened scanner with strict private-IP blocking, stream size caps, and short-lived 24-hour caching.
Frequently Asked Questions
Common questions about scanning website stylesheets, dark mode detection, and exporting design tokens.
How does the Website Color Palette Extractor work?
When you enter a public URL, Pinatool fetches the webpage HTML, linked CSS stylesheets, inline style attributes, embedded SVGs, and frontend theme bundles. It parses HEX, RGB, HSL, OKLCH, and CSS custom property (var(--*)) definitions, counts their frequency across declarations, and groups them into a structured 7-role design palette.
How are light and dark mode colors differentiated?
The parser inspects CSS @media (prefers-color-scheme: dark) blocks as well as common dark-theme DOM selectors such as .dark, [data-theme="dark"], and [data-mode="dark"]. Colors declared specifically inside dark theme contexts are tagged so you can switch between All, Light, and Dark palettes with one click.
Why did a website fail to scan or return fewer colors than expected?
Some websites sit behind strict bot-protection firewalls (such as Cloudflare Turnstile challenges), require login authentication, or render styles exclusively via authenticated client-side canvas APIs. If a site blocks automated stylesheet fetching, you can take a screenshot of the page and use our Image Color Palette Extractor to sample its colors locally.
Can this tool scan localhost, intranet pages, or private IP addresses?
No. To protect infrastructure security and prevent Server-Side Request Forgery (SSRF), Pinatool only scans publicly accessible HTTP and HTTPS websites. Loopback addresses (127.0.0.1), private local network IPs, and cloud metadata endpoints are strictly blocked.
What export formats are included when I download a website palette?
You can copy any individual HEX code with a single click, share a direct analysis link (?webpage_url=), or click Download to get a ZIP bundle containing a vector SVG swatch card (for Figma, Sketch, or Adobe XD) and a clean :root CSS Custom Properties stylesheet.
Are scanned website palettes stored permanently?
No. Extracted color metadata is cached temporarily for up to 24 hours solely to speed up repeat lookups and prevent redundant requests to target websites. No personal visitor data is attached to cached URL scans.
Want to extract colors from a screenshot, logo, or photo?
Load any PNG, JPG, WebP, GIF, or AVIF image locally in your browser to extract CIELAB palettes and sample exact pixels.