How to Get Any Website's Color Palette

Published August 11, 2026 · Updated August 11, 2026 · 6 min read · by the CSS DNA team

Quick answer: Read the page's computed styles, not a screenshot. Screenshot-based extractors sample pixels, so they hand you photo colors, antialiasing blends and averaged gradient midpoints — values that appear nowhere in the stylesheet. Walking every rendered element instead gives you the actual declared colors, ranked by how many elements use each one.

Two completely different methods, sold as the same thing

Every palette tool falls into one of two camps, and the difference determines whether the output is usable.

Pixel area and element count are not the same signal, and the difference is not academic. A hero image occupies half the screen and produces a dominant “brand color” that is really a photograph. Meanwhile the actual brand accent — used on twelve buttons totalling maybe 4,000 pixels — ranks near the bottom or gets clustered away entirely.

The four things screenshot extractors reliably get wrong

• Antialiasing blends. The edge of every glyph is a gradient between text color and background. Cluster those and you get grays nobody chose.
• Gradient midpoints. A two-stop gradient produces hundreds of intermediate pixel values; sampling returns the middle, which is not either stop.
• Overlays and transparency. A rgba(0,0,0,.4) scrim over an image samples as a darkened photo color, not as the scrim.
• Everything behind a state. Hover, focus and active colors never render in a screenshot, so they never appear in the palette.

The method that works

1. Install CSS DNA — free, no account.
2. Open the page and click Extract. It walks every rendered element and collects color, background-color, border-color, gradient stops and any CSS custom properties holding colors.
3. Read the palette panel. Swatches are ranked by element count, so the top of the list is the site's real structure: background, surface, body text, then the accent.
4. Toggle the format to hex, RGB, HSL or OKLCH and click any swatch to copy it — or to generate its full 50–950 tonal scale.

For a single color rather than the whole page, the eyedropper picks any pixel on screen and reports it with its contrast against what sits behind it. Both the palette and the eyedropper are free; the token exports are the Pro feature.

Now delete half of it

An extracted palette from a real production site is usually too long. Not because the site uses forty colors deliberately — because forty colors accumulated. Two teams each picked a border gray. A component library shipped its own neutrals. A dark-mode pass rounded some values and not others.

These two are indistinguishable side by side, let alone across a page. Keeping both means two tokens, two names, and a future decision about which one a new component should use. It is drift, not design.

Catching these by eye does not work — the whole problem is that they look identical. It needs a perceptual distance measure. CSS DNA compares every extracted pair using ΔE in OKLab and flags any pair closer than 0.03, which is roughly the threshold below which two colors stop being separable in normal use. Merge each flagged pair into whichever value has the higher element count, and a forty-swatch dump usually collapses to eight or nine real decisions.

From palette to system

A list of hex codes is not a design system. Three steps turn it into one:

1. Assign roles, not hue names. --surface, --surface-raised, --text, --text-muted, --accent, --border. Naming a token --blue guarantees a rename the first time the brand shifts.
2. Generate ramps. Each surviving color becomes a 50–950 scale built in OKLCH, so you have the steps you need for hover, disabled and dark mode instead of inventing them later.
3. Check the pairs that will actually meet. A palette-vs-palette contrast grid shows every foreground and background combination at once, in both WCAG 2 ratios and APCA Lc — which is where you find out the muted text you liked fails on the raised surface.

From there, export it: Tailwind v3 config or v4 @theme, CSS custom properties, SCSS, JSON, or W3C design tokens for Figma.

Can you use another site's colors?

Individual color values are not copyrightable, and a hex code is a number. Reproducing a competitor's palette together with their logo colors, type and layout is a different question — that territory is trade dress. Treat extracted palettes the way you would treat any reference: a starting point to study and adapt, not a design to clone. This is general information, not legal advice.

Frequently asked questions