October 24, 2026
To find the colors a website uses, paste its address into a palette tool, or open DevTools and use the eyedropper on the Styles pane for one color at a time. Which one you choose matters less than something almost no guide mentions: palette tools disagree because they rank colors differently. Below are four methods, and what that disagreement looks like on a real site.
Method 1: The DevTools eyedropper
Right-click, Inspect, select an element and find a color in the Styles pane. Click the small swatch beside it and a picker opens. It has an eyedropper that samples any pixel on the page, and a format toggle that cycles the value through hex, RGB and HSL. It also shows the contrast ratio against the background, which is useful if you are checking accessibility.
This is exact and free, and it gives you one color per click. For a whole palette it is slow.
Method 2: Read the CSS variables
If the site names its colors, they are in the :root rule, with names like
--color-text-secondary that tell you the role. That is the most useful result because
it gives you the designer’s intent as well as the value. It works on most sites and fails
quietly on a few, and the post on
how to see a website’s CSS variables
shows both the method and where it breaks.
Method 3: Use a palette tool by URL
A tool that opens the page in a real browser reads the colors the rendered elements actually
use, including values set by JavaScript, then ranks them. The
color palette extractor does this from a pasted
address and works from any device. It leaves out black and white so the brand colors show, and the
design token extractor keeps them if you want the
full ranked list. From a terminal, npx enrichr-cli colors example.com does the same
measured-by-coverage ranking and can write the result as CSS variables, a Tailwind v4 theme or JSON
instead of a page — see enrichr-cli, free and
open source.
Method 4: An extension for the page you are on
For pages you are already viewing, including logged-in ones, the free Color Palette Chrome extension (on the Chrome Web Store soon) reads the page in place and groups the result into accents, backgrounds and text, with a plain-language name for each color. It runs on your machine and needs no URL.
Why do palette tools give different answers?
There are two honest ways to rank a color, and they are not the same thing:
- By element count: how many elements on the page have this color.
- By area covered: how much of the page, in pixels, is this color.
Take stripe.com, measured on 21 October 2026. Ranked by element count, its colors come out as
black (632 elements, mostly text), then #533AFD (174), #061B31 (58),
white (57), #50617A (41) and #64748D (32). The counts shift by a few between runs; the
order did not. The purple is a clear second:
it is on buttons, links, icons and borders everywhere. Ranked by how much of the page each color
covers, the order changes completely. Pale backgrounds such as #E5EDF5 and white sit at
the top, and the same purple falls to tenth, because buttons and links are small.
Neither is wrong. Count answers “what color is this brand”, and the purple wins. Area answers “what does the page look like”, and the pale background wins. If you are matching a brand, trust the count. If you are matching the feel of a page, look at area.
What about oklch and display-p3?
Newer sites write colors as oklch(0.7 0.2 150), hsl(200 80% 50%) or
color(display-p3 1 0 0). DevTools shows them in the syntax the author used, so two
swatches that look the same may be written differently. To compare or paste into a design tool,
convert everything to hex first. Display-P3 colors can be more saturated than any hex value, so the
hex is the closest sRGB match, not an exact copy.
Where to go next
Colors are one piece of a design. To get the rest, see extracting design tokens from a live website, finding what font a website uses, and giving Claude Code a design system from a live website if you want an AI assistant to build with what you found.
FAQ
How do I find the colors a website uses?
Paste its address into the color palette extractor to get its colors ranked by use, or open DevTools, click a color swatch in the Styles pane and use the eyedropper for a single color.
How do I get a color from a website in hex?
In Chrome DevTools, click the color swatch next to any color value, then click the format toggle until it shows hex. The eyedropper in the same picker samples any pixel on the page.
Why does the palette tool skip black and white?
Almost every page is full of them, so including them hides the colors that identify the brand. The design token extractor keeps them, ranked, if you want the full list.
Why do two palette tools give different answers for the same site?
They rank differently. One counts how many elements use a color. Another measures how much of the page it covers. A button color is used by few elements and covers little area, while a pale background covers a lot, so the order changes.
Can I get a site's color variable names?
Often. Open the :root rule in DevTools or use the console script. Sites that serve their CSS from another domain hide the names from scripts, though DevTools still shows them.
Can I get a website's color palette from the command line?
Yes: npx enrichr-cli colors example.com reads the page in a real browser and ranks the colors by how much of the page each covers, the same measurement the color palette extractor uses. Add -f css, -f tailwind or -f json to write the result to a file instead of a terminal report.
Is it okay to use another site's colors?
Colors on their own are hard to protect, but copying a whole look with the same fonts, imagery and layout is a different matter. Our guide on whether it is legal to copy a website design covers it.