How to Grab the Colors From Any Website

You found a site with a color scheme you love, a fintech dashboard, a friend's portfolio, a brand deck you're pitching against, and you want those exact colors for your own project. The fastest way to extract colors from a website is to read the actual CSS values instead of eyeballing a screenshot, though a chunk of colors never show up as text at all. Here are the three routes that actually work, when to reach for each, and how to turn whatever you dump out into a palette you'd actually ship.

Why rebuild someone else's palette (and where the line is)

Reverse-engineering a color scheme is ordinary design research, not theft. You might be matching a client's brand book that got lost in a rebrand, studying why a landing page feels calm, or borrowing a competitor's blues for an internal pitch deck. Hex codes on their own aren't protected by copyright or trademark, five swatches pulled from someone's stylesheet are raw material, not a finished product.

What actually gets people in trouble is copying a full identity: the logo, the wordmark, the exact layout, closely enough that customers could confuse the two brands. Extracted colors are a starting point, not a shortcut around that.

Treat the palette you pull as a sketch, not a final answer. Adjust a couple of swatches, build your own hierarchy around them with a real color strategy, and the resemblance fades fast.

Route 1: paste the CSS into a color extractor

This is the route to try first, because it reads real values instead of guessing from pixels. Every color a browser paints, background-color, border-color, a shadow, a gradient stop, exists as text somewhere in a stylesheet, and a css color extractor can pull every one of them out in a single pass.

Open DevTools (F12, or right-click and Inspect), switch to the Sources or Network tab, and open the site's main stylesheet file. Most sites reveal its filename in a stylesheet link inside the page source, so you can often load that file directly in a new tab. Select all, copy, and paste the whole file into the CSS Color Extractor.

.hero { background: #1046ff; }
.btn-primary { background: hsl(228, 100%, 55%); }
.card { border-color: rgba(16,70,255,.18); }
.eyebrow { color: var(--brand-700, #0b2f9e); }

Paste that in and the extractor reads hex, rgb() and hsl() syntax with commas, ignores duplicates, and hands you a clean list ready to copy or export. It also works on HTML with inline styles, Sass files or a JSON design-token export, so if getting colors from css is really what you're after and the site ships a public tokens file, paste that instead of hunting through selectors.

This route wins for two reasons: it catches colors you'd never spot by eye, a border at 18% opacity, a hover state buried three media queries deep, and it dedupes for you, so you're not staring at eleven near-identical blues wondering which one is real.

Route 2: inspect one element in DevTools

Sometimes you don't want the whole palette, just the exact shade of one button or headline. Right-click that element, choose Inspect, and check the Styles panel on the right. Every color value gets a small swatch next to it, click the swatch to cycle between hex, rgb and hsl.

If the value is a custom property like var(--brand-500), the Styles panel won't show a final color, just the variable name. Switch to the Computed tab instead, which resolves it to whatever the browser is actually rendering, the fastest way to find hex codes on a site when you only care about one specific spot.

Once you have the hex, run it through the color converter to see it in every format at once, handy when a design system spec asks for OKLCH or LCH and the site only ever gives you a hex.

Route 3: screenshot it when the color isn't in the CSS

Not every color lives in a stylesheet. Backgrounds painted with canvas or WebGL, colors baked into a hero photo or a logo file, video frames, and anything altered by a CSS filter or a blend mode never show up as text you can copy. DevTools will show you the filter formula, not the rendered result.

For those, take a screenshot (your OS tool is fine; a full-page capture extension helps on long pages) and drop it into the Image Color Palette Extractor. It reads the actual pixels with K-Means, Median Cut, Vibrant or Hue-Peak clustering, and you can paint over just the region that matters, the hero gradient, say, not the stock photo sitting behind it, so the dominant colors it returns are the ones you actually came for.

Cleaning the dump: dedupe, name roles, drop near-duplicates

A raw extraction from a real site is almost always messier than a hand-picked palette, a design system that's evolved for a few years accumulates colors nobody meant to keep. Three passes fix that.

• Dedupe first, then double-check. The extractor already merges exact matches, but casing and shorthand slip through, #2B6CB0, #2b6cb0 and #26b can all be the same color spelled three ways.
• Name roles, not hues. Note where each value came from, background-color, color, border, so you know which swatch is a surface, which is body text, and which showed up once on a single badge and doesn't deserve a permanent slot.
• Merge near-duplicates. Two blues eight points apart in lightness usually read as one color at a glance. Check them in the converter; if the lightness and hue are close, keep whichever one shows up more often in the CSS and drop the other.

Save it as a real palette and export

Once the list is short and every swatch has a job, use the Export tab inside the extractor to copy the whole set as CSS variables, a plain hex list or JSON, or download it as a PNG swatch sheet. If you want to go further, fine-tune each color, check contrast, rename roles properly, open the palette editor, or open the palette generator to see how your extracted set compares against fresh alternatives before you commit to it.

For the reverse problem, starting from a photo instead of a website, pulling a palette from an image works the same way, minus the CSS step. And if you're building a palette from scratch rather than copying one, these palette sources are a faster starting point than another site's stylesheet.

Paste a stylesheet and get a deduped, exportable color list in seconds.

FAQ

Is it legal to copy a website's color palette? Yes. Colors and hex codes on their own aren't protected by copyright or trademark, five swatches pulled from a stylesheet are a starting point, not a finished product. What's actually risky is copying a full identity: the logo, the wordmark, a layout close enough that customers could mix up the two brands.

Why doesn't the CSS extractor find every color on the page? Because some colors never exist as text in the CSS, they're baked into images, video, canvas or WebGL drawings, or produced at render time by a filter like hue-rotate() or a blend mode. Screenshot those regions and run them through the image extractor instead.

What if two extracted colors look almost identical? They're probably meant to be the same swatch, drifted apart over years of small edits. Compare their lightness and hue in the converter, if those numbers are close, keep the one used more often and drop the other.

Common questions

Is it legal to copy a website's color palette?

Yes. Colors and hex codes on their own aren't protected by copyright or trademark, five swatches pulled from a stylesheet are a starting point, not a finished product. What's actually risky is copying a full identity: the logo, the wordmark, a layout close enough that customers could mix up the two brands.

Why doesn't the CSS extractor find every color on the page?

Because some colors never exist as text in the CSS, they're baked into images, video, canvas or WebGL drawings, or produced at render time by a filter like hue-rotate() or a blend mode. Screenshot those regions and run them through the image extractor instead.

What if two extracted colors look almost identical?

They're probably meant to be the same swatch, drifted apart over years of small edits. Compare their lightness and hue in the converter, if those numbers are close, keep the one used more often and drop the other.