How to Find the Colors a Website Uses

A website stores its colors in CSS, in two browser hints, and in images.

Linked stylesheet

An external .css file that a <link rel="stylesheet"> element loads.

Style block

CSS written directly inside the HTML document in a <style> element.

Inline style attribute

A declaration on a single element, such as style="background: #0f766e".

CSS custom property

A named value, such as --brand: #0f766e, that other rules read with var(--brand).

Inline SVG

Vector shapes in the HTML whose fill and stroke attributes carry colors.

theme-color meta tag

A <meta name="theme-color"> hint for the browser interface around the page.

Web manifest

A JSON file that declares theme_color and background_color for a web application.

Images

Photos, PNG logos and JPEG backgrounds whose colors exist only as pixel data.

What does the theme-color meta tag declare?

The theme-color meta tag suggests a color that the browser uses to customize the page display or the surrounding interface, such as the address bar or the status bar. Its content attribute must hold a valid CSS color. A site declares separate light and dark values with two tags: one with media="(prefers-color-scheme: light)" and one with media="(prefers-color-scheme: dark)". The HTML Living Standard says the media attribute has no effect on any other meta name. MDN marks theme-color as "Limited availability", not Baseline.

What colors does the web manifest declare?

The web manifest declares two colors for a web application. theme_color serves as the default theme color for the application context, and the browser can override it when an in-scope page has a theme-color meta tag. background_color describes the expected background color of the application, and the browser draws it before the stylesheets load. After loading, the stylesheet's background-color takes precedence, and background_color contributes to the splash screen of a progressive web app (MDN). Browsers can ignore the alpha channel in theme_color (MDN).

Paste the page URL into the Website Color Extractor, and it returns the site's colors grouped by color role, with usage share, variable names and example selectors.

1. 01

   Paste the URL

   Enter the full address of the page to analyze, such as a home page or a pricing page.

2. 02

   Fetch the HTML and stylesheets

   The tool fetches the page HTML and up to 25 stylesheets through the site's own proxy, then analyzes them in your browser.

3. 03

   Read every color source

   The extractor reads theme-color meta tags, web manifest colors, linked CSS, <style> blocks, inline style attributes and inline SVG. It parses every CSS color syntax: hex, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), color() and named colors.

4. 04

   Assign color roles and weights

   The CSS property sets the color role: background, text, border, graphic or shadow. A rule whose selector matches an element in the fetched HTML counts three times, so unused framework CSS does not dominate. :hover and :focus rules count half, and @media print rules are ignored.

5. 05

   Read the grouped palette

   The result groups colors into brand or primary, accents, backgrounds, text, borders and neutrals. Near-duplicates closer than ΔEOK 0.02 merge into one color. Rules for prefers-color-scheme: dark and .dark selectors produce a separate dark-mode palette.

ΔEOK is the plain Euclidean distance between two colors in the Oklab color space, as defined in CSS Color Module Level 4.

Chrome DevTools lists the colors of a rendered page in the CSS Overview panel, grouped by type.

1. 01

   Open the panel

   Open DevTools on the page and choose More tools > CSS Overview, or open CSS Overview from the Command Menu.

2. 02

   Generate the report

   The panel produces a report with five sections: Overview summary, Colors, Font info, Unused declarations and Media queries.

3. 03

   Read the Colors section

   The Colors section lists all colors on the page, grouped by types such as background colors, text colors and border colors.

4. 04

   Trace a color to its elements

   Click a color to list the elements that use it. Chrome's documentation demonstrates this with a #DADCE0 border color.

The Colors section also shows text with low contrast. For the contrast thresholds that apply across a full palette, see WCAG contrast in a color palette.

CSS Overview analyzes the page as the browser renders it, so its report includes styles that scripts add after the page loads. Chrome's documentation calls CSS Overview a preview feature in Chrome 96, and that page was last updated on October 21, 2021.

Open an eyedropper, place it over the pixel, and click to copy that pixel's color value.

The Firefox DevTools Eyedropper works like a magnifying glass over the page and selects with pixel precision. It opens from the Inspector toolbar or from a color picker in the Rules view. It copies the value in the format set under Settings > Inspector > Default color unit.

An eyedropper returns the rendered pixel, not the declared CSS value. Anti-aliasing sets the edge pixels of text and shapes to a blend of the shape color and the background color, so an accurate sample comes from the center of a flat area.

The Firefox Accessibility Inspector adds contrast data to single-color checks. Its Check for issues option reports visual contrast problems and shows the contrast ratio of each element. It also simulates color vision deficiencies and contrast sensitivity loss.

For a screenshot file instead of a live page, the Image Color Picker picks single colors from the image.

CSS custom properties reveal brand colors because they attach a name, such as --brand or --primary, to a color value.

CSS custom properties, also called CSS variables, store a value once and reuse it with var(). A declaration such as --brand: #0f766e on :root and a rule such as background: var(--brand) on a button give you the brand color and its color role in two lines. CSS Custom Properties for Cascading Variables Level 1 is a W3C Candidate Recommendation Snapshot dated June 16, 2022.

Pages with custom properties and var()

43% of desktop and mobile pages in 2022 use CSS custom properties and at least one var() function.

Color share of custom property values

Color values make up 30.6% of custom property value types, the largest category (2022).

How do you read a brand token chain?

A design token is a named design value, and on the web a CSS custom property carries it. A token chain stores the raw value in one CSS custom property and points a semantic one at it: --blue-600: #2563eb holds the shade, and --primary: var(--blue-600) names its job. The semantic name identifies the brand color. The raw name identifies its position in a color scale.

The Website Color Extractor resolves these references, so background: var(--brand) counts as a background color and keeps the name --brand.

Six-digit hex is the most common color format on the web: #RRGGBB appeared on 49% of pages in the HTTP Archive Web Almanac 2022.

Every other format sits under 1%. In descending order, they are #RRGGBBAA, hsla(), currentColor, #RGBA, system colors, hsl(), color(), hwb(), lch() and lab(), the least used.

Among the color formats in use in 2022, 23% supported an alpha channel and 77% did not. transparent was the most popular named color, on 8% of pages. Among the other named colors, white ranked first and black second, and mediumspringgreen ranked last, on 1,793 mobile pages.

CSS Color Module Level 4, a W3C Candidate Recommendation Draft dated September 13, 2026, defines oklab() and oklch() alongside lab(), lch(), hwb(), hsl(), rgb() and color().

A color extractor normalizes these formats before counting. #fff, #ffffff, white and rgb(255, 255, 255) are one color written four ways. A tool that compares the raw strings counts them as four colors.

Raw HTML and CSS miss three kinds of website colors: styles that scripts create at runtime, styles inside cross-origin iframes, and colors inside images.

Runtime CSS-in-JS styles

CSS-in-JS libraries write styles while the page runs. styled-components injects a <style> tag at the end of <head> at runtime, and every unique interpolation result generates a new CSS class. Those colors live in JavaScript until the script runs, so a fetched stylesheet does not contain them.

Cross-origin iframes

An iframe from another origin loads a separate document. Under the same-origin policy, a script gets only very limited access to the Window and Location objects of a cross-origin document, so a page-level script cannot read the styles inside a cross-origin iframe.

Colors inside images

Colors inside raster images, such as photos and PNG or JPEG logos, are pixel data, not CSS values. No stylesheet lists them, so an eyedropper or an image palette extractor samples them instead.