How to Extract a Website's Color Palette
Kome Team · Guide
The quickest way to extract a website's color palette is a browser extension that reads the page's actual rendered styles and hands you the hex codes directly, no screenshotting or manual picking required. If you would rather not install anything, your browser's built-in eyedropper does almost the same job in a few extra clicks. Both are below, along with the one method designers still fall back on when a site is full of gradients and photos instead of flat colors.
Why People Actually Need to Pull Colors Off a Live Site
This is not a hypothetical. A freelance designer gets handed a client's existing site with no brand guidelines document anywhere, just the live homepage, and has to match it exactly before proposing a redesign. A marketer building a competitor teardown deck wants six rival brands' primary colors on one slide, pulled straight from their sites rather than eyeballed and guessed. A developer inherits a five-year-old codebase where the CSS variables were never named consistently, so the live, rendered page is the only reliable source of truth left for what the brand colors actually are.
In every case, the color values already exist. Someone just needs to get them out of the page and into a hex code without retyping anything by hand.
The Fastest Way: A Browser Extension That Reads the Page
Kome's extension includes a utility built for exactly this. Open the site you want, click the Kome icon, and it extracts the color palette from that page automatically, returning a row of swatches you can click to copy the hex code straight to your clipboard. You can save the palette in other common formats too, so you are not stuck converting hex to RGB by hand afterward.
There is no setup and nothing to configure. Open the page, click the icon, copy the swatch you need. For anyone pulling colors from more than one or two sites a week, that is the difference between a five-second task and a five-minute one.
The Built-In Way: Your Browser's Eyedropper
Chrome and Edge ship a native EyeDropper API you can trigger from the DevTools console. Open DevTools (F12), switch to the Console tab, paste this, and press Enter:
new EyeDropper().open().then((r) => console.log(r.sRGBHex))
Your cursor turns into a crosshair, you click any pixel on the page, and the hex value prints to the console. It is fast once you remember the snippet, but you are picking one color at a time, so building a full palette means running it repeatedly and writing each value down yourself. Support is not universal either, Firefox and Safari do not implement the API yet, so this trick only works in Chromium-based browsers.
The Manual Fallback: Screenshot Into a Design Tool
For a page built mostly from photos and gradients rather than flat brand colors, take a full screenshot and drop it into Figma, Photoshop, or any tool with an eyedropper. This is slower and more manual than the other two options, but it is the only method that handles a subtle gradient correctly, since you can sample several points along it instead of getting one averaged value.
Which Method Should You Actually Use?
| Method | Speed | Best for | Main limitation |
|---|---|---|---|
| Browser extension | Fastest, one click | A full palette, done regularly | Only reads the current page |
| Built-in eyedropper | Fast, one color at a time | Chrome/Edge users grabbing a single value | No Firefox or Safari support |
| Screenshot + design tool | Slow, manual | Gradients, photos, subtle shading | Most setup, one pixel per click |
What's the Difference Between a Color Palette and a Style Guide?
A color palette is just the set of hex codes a site uses. A style guide is much bigger: colors plus typography, spacing rules, button states, and component patterns. Extracting a palette is step one if you are reverse-engineering a brand, not the whole job. It tells you what colors to use, not how a team decided to use them.
Will This Catch Colors Set by JavaScript or Shown Only on Hover?
Not automatically. All three methods above read the page as it is currently rendered, so a background color that only appears on hover, or one a script swaps in after a click, will not show up until you trigger that state first. Hover the button, open the menu, or click through to the state you need, then run the scan again.
The same goes for anything defined only as a CSS custom property that never actually paints a visible pixel. If it is not rendered on screen, none of these methods can see it, since they all read what the page looks like, not its underlying source code.
Once you have the palette, the next step is usually saving it somewhere you will find it again instead of pasting hex codes into a random note. Kome's bookmark manager lets you save the page itself alongside a note on why you pulled it, which beats digging back through browser history when you cannot remember which of twelve competitor sites had that particular shade of green. If you save research this way regularly, it is worth reading why a searchable list beats a folder structure for this kind of ongoing reference material.
Pull the full color palette off any website in one click, and save the format you actually need.
Try Kome's Browser Extension →Frequently asked questions
Is it legal to copy colors from another website's design?
Colors themselves are not protected by copyright in most jurisdictions, so noting that a competitor uses a specific shade of blue is fine. What you cannot do is copy their logo, layout, or overall trade dress and pass it off as your own, since that can raise trademark issues even if no single color is at fault.
Can I extract a palette from a screenshot instead of a live page?
Yes. Drop the screenshot into any design tool with an eyedropper, such as Figma or Photoshop, and click the pixels you want. It gives you the same hex value a live-page tool would, it is just a slower, one-color-at-a-time process instead of an automatic scan.
Does this work on PDFs or images saved to my computer?
A browser extension reads the live page you have open, not local files. For a PDF or a saved image, open it in a design tool or an image viewer with a built-in eyedropper and pick colors from there instead.
How many colors does a typical extraction return?
It depends on the site, but most tools return the handful of colors actually doing work on the page, backgrounds, text, buttons, and accents, after merging near-identical shades. You will not get a separate swatch for every one of the thousands of pixel values a photo can contain.
What format do the extracted colors come in?
Hex codes (like #AE32F7) are the default almost everywhere, since that is what CSS and most design tools expect. Kome's extractor also lets you save the palette in other common formats, so you are not stuck manually converting hex to RGB or HSL by hand.