How to Find Any Website's Color Palette (Hex Codes by Role)

Chrome's CSS Overview panel. It scans the page you have open and lists all the colours it uses, grouped by type, such as background colours and text colours, and it flags text with low contrast.

1. 1Open the page in Chrome and open DevTools (right-click anywhere and choose Inspect).
2. 2Open the menu (Customize and control DevTools) and choose More tools > CSS Overview, or type "CSS Overview" into the Command Menu.
3. 3Click Capture overview.
4. 4Open the Colors section. Click any swatch to list the elements that use it; click an element to jump to it in the Elements panel.

CSS Overview arrived as a preview feature in Chrome 96. It reads one page, in its current state and theme. Hover colours, open menus and the dark theme only show up if they are on screen when you capture, so capture again after switching.

Select the element in the Elements panel, find its color or background-color in the Styles pane and click the small square next to the value. That opens the colour picker, which shows the value and lets you switch formats.

• Switch formats: Shift-click the square, or use the format switcher in the picker. Chrome offers hex, rgb(), hsl(), hwb(), lch(), oklch(), lab(), oklab() and color().
• Sample anything: the eyedropper button (or the C key) samples a colour from anywhere on screen, not only the page. Chrome's docs note it samples only in sRGB, so wider-gamut colours are clipped to the nearest match.
• Check contrast: for a color value, the picker has a Contrast ratio section measured against the matching background colour.

If a value is written as a variable, such as var(--accent), the Computed tab shows what it resolves to on that element.

Select the html element and look at the :root rule in the Styles pane: many sites declare their palette there as custom properties (names that start with two dashes). MDN describes defining them on :root as "a common practice" so they can be used anywhere on the page.

To list them all at once, paste this into the Console. It reads every :root rule the page can access and prints each variable with its current value:

const root = getComputedStyle(document.documentElement);
[...document.styleSheets]
  .flatMap((sheet) => { try { return [...sheet.cssRules]; } catch { return []; } })
  .filter((rule) => rule.selectorText === ":root")
  .flatMap((rule) => [...rule.style].filter((name) => name.startsWith("--")))
  .forEach((name) => console.log(name, root.getPropertyValue(name).trim()));

Two limits. Stylesheets served from another domain can't be read this way, so some variables will be missing. And variable names don't always tell you the role: --background and --muted-foreground do, but --gray-500 and --blue-600 are scale steps, and you still have to find where each one is used.

Yes. System colour pickers sample whatever is on screen, which is handy for images, videos and apps as well as websites.

• Windows: PowerToys Color Picker. Press Win+Shift+C (the default shortcut), click a colour and it is copied to the clipboard in hex by default. Its editor keeps a history of up to 20 colours.
• Mac: Digital Color Meter, built into macOS, shows the values of the colour under the pointer and lets you choose the colour space.
• In the browser: the Chrome DevTools eyedropper described above.

Sample from flat areas. Edges of text and icons are anti-aliased, so they blend into the background, and a translucent colour is sampled as its mix with whatever is behind it. An eyedropper gives you a pixel, not the value in the CSS.

Because nobody can use it until each colour has a job. A typical page yields dozens of colours: near-duplicates, hover shades, colours from photos and one-off badges. A palette is the handful that do the work, each named for what it does.

Add the colour used for text on top of the accent (often white) and you have enough to build a whole interface. Give the dark theme the same roles if the site has one.

Check text against the colour behind it with WCAG 2.x. Success criterion 1.4.3 asks for "a contrast ratio of at least 4.5:1" for normal text and 3:1 for large-scale text, which WCAG defines as at least 18 point, or 14 point bold.

Criterion 1.4.11 asks for at least 3:1 "against adjacent color(s)" for the visual information needed to identify user interface components and their states, and for the parts of graphics needed to understand the content. An input outline that is the only sign of the field needs 3:1; a decorative hairline between sections does not. Disabled controls and logos are exempt.

In practice, check text and muted text on the background and on the surface, and text on the accent. The DevTools colour picker shows the ratio for any color value, and CSS Overview lists low-contrast text it finds on the page.

For a quick look, CSS Overview. For one exact value, the colour picker. For a site built on variables, the Console snippet. To get the palette by role without doing the sorting yourself, use a tool that measures it.

Livery renders the page at desktop, tablet and phone widths and measures the colours of every visible element, weighted by how much each one is used. It then picks the roles by rule, with no AI model: the page colour is the background, the highest-contrast neutral carrying real weight is the text, the next one down is the muted text, a quiet low-contrast neutral is the border, and the saturated colour used on actions and links is the accent. The palette lands in the kit's tokens.json, and the kit notes the contrast of body text on the background. Browse palettes by accent colour in the library, or paste any link to measure a new site.