A free website color palette extractor. Paste any website URL and the tool reads every CSS file on the page, extracts every hex, rgb, hsl, and named color, and ranks them by how often each appears. Adjust the count from 4 to 32 colors, sort by frequency, hue, or lightness, and copy as HEX, CSS variables, Tailwind config, or JSON. Or download the palette as a PNG card.
Drop the full URL of any public website into the input box and click Extract Palette. The tool fetches the page server-side, no browser CORS hassles, no screenshot needed.
The default shows 12 colors sorted by how often each appears in the page CSS. Drag the slider to anywhere between 4 and 32. Switch the sort to Hue or Lightness to see the palette organized differently.
Click any swatch to copy its HEX. Use the sidebar buttons to copy the full palette as CSS variables, Tailwind config, or JSON. Or download the whole thing as a palette card PNG to share or pin to your moodboard.
Designers and developers extract color palettes from websites for a dozen reasons: matching a client brand when no style guide exists, learning from a competitor design, building a moodboard, or generating CSS variables for a new project. The manual route is opening DevTools, hovering over elements, copying hex values one by one, and rebuilding a palette in Figma. Twenty minutes later you have eight colors and you are still not sure they are the actual dominant ones.
This Website Color Palette Extractor takes any URL you paste, fetches the page server-side, reads every inline style block plus up to five linked CSS files, and pulls every color declaration (hex shorthand, hex full, rgb, rgba, hsl, hsla, and named CSS colors). Each color is normalized to a 6-digit hex and counted by occurrence. The most frequent colors are the dominant brand and UI colors. You can adjust how many to show (4 to 32), sort by frequency, hue, or lightness, and export as CSS variables, Tailwind config, JSON, or a downloadable palette PNG.
Drop a PNG, JPG, or WebP of any website screenshot, design mockup, photo, or graphic. The tool extracts colors the same way for all of them. For best results on a website palette, use a full-page screenshot at native resolution.
Drag the slider to set how many dominant colors you want. The median-cut algorithm reruns instantly. Small palettes (4-6 colors) are good for brand identity work, larger ones (10-16) for detailed UI audits.
Each color shows in all three standard formats. Click any swatch to copy its HEX directly to clipboard. The pixel percentage badge in the corner shows how dominant each color is in the source image.
Default sort is by dominance (most pixels first). Switch to hue to organize the palette as a color wheel, or lightness to group light and dark colors. Useful for different design workflows.
One-click copy buttons for CSS custom properties (:root variables), Tailwind config theme.extend.colors, and plain JSON. Drop the output straight into your project without manual reformatting.
Everything runs in your browser using the HTML5 Canvas API. The screenshot never leaves your device. No account, no daily limit, no watermark on the downloaded palette card.
More Image tools you might find useful.
