The colors of the web 2026: methodology

The sites come from the Majestic Million, Majestic's ranking of domains by the number of other networks that link to them, generated on October 8, 2026 and downloaded the same day. It is licensed under CC BY 3.0, attribution "Majestic". The lists of Cloudflare Radar and Tranco are licensed for non-commercial use, and recolor.page is a commercial site, so neither was used.

The study went down the list in rank order and stopped once 1,000 sites had loaded: ranks 1 to 1,506, 1,506 domains in all. Some of them are not websites a person visits (API and CDN domains, link shorteners), which is why the list runs longer than the count. Of a domain that lands where a higher-ranked one did (a short link on its own site), only the first counts.

Each domain was opened as https://<domain>/, its home page only, by Recolor's fetcher with the user agent Mozilla/5.0 (compatible; Recolor/0.1.0; +https://recolor.page/docs/fetcher/), from one machine in the Netherlands, between 21:08 UTC and 21:44 UTC on October 8, 2026, 3 sites at a time. For this run the fetcher acted as a crawler: it read robots.txt first and left alone any site whose rules keep * or Recolor from /; a robots.txt that answered with a server error counted as keep out, as RFC 9309 says, and one that was missing counted as no rules. Each site was to get one request for its home page and one for each style sheet the page links, with no retry; images, fonts, media and scripts were never requested. The run fell short of that for some sites. Now and then the app asked the fetcher for a page again while it was loading it, for a reason the study did not find while it ran (other files were being edited on the same machine, and a check afterwards on sites outside the study found one request each). 182 of those repeats came within the minute in which the fetcher keeps a prepared page, so they never reached the site; the fetcher's log, kept for the run's last minutes only, shows some home pages requested more than once within seconds. No site was asked again later.

The page then went through Recolor itself, in headless Chrome at 1280 by 800 pixels, with the page's scripts off: what was measured is the HTML and CSS the server sends, the same for every site and every visitor, before any script runs. The fetcher's own limits applied: 5 MB and 10 seconds for the page, 2 MB per style sheet, 60 sheets and 15 seconds for everything a page pulls in. Recolor's engine then read every color of the page as it does for anyone who loads a site: style sheets, style attributes and color attributes, including colors behind hover states and in media queries that do not hold. How Recolor repaints a page explains the engine.

A site counts when its home page came back as HTML, the engine read it, the page had a layout and its CSS held at least one color. Bot checks were told by their titles (a captcha, "Access denied", "Just a moment" and the like); a bot check without such a title would count as the site, and hCaptcha's own home page, whose title names its captcha, was left out as one. On 38 sites the preview had not laid the page out yet when the engine first read it, so every element would have weighed as one without a box; the study waited for the layout and read those pages again, from the copy already fetched.

The home pages that answered with an error sent these statuses most often: 403 (93), 404 (20), 400 (9), 417 (4), 401 (2).

• Distinct color values: every exact color the engine found in the page's CSS, as sRGB, transparency aside, whether a rule that uses it matches anything or not.
• Colors in use: those values merged where they lie within 0.04 of each other in OKLab, counting only the clusters that reach at least one element of the page. This is the number the app shows at the foot of its palette.
• Weight: how much of the page a color covers. A declaration weighs the elements its selector matches; a background or a fill weighs 1 plus the square root of its area in pixels divided by 40, one side of a border 0.25, an element without a box 0.25, a rule behind :hover or another state 0.2 of that, and a rule inside a media query that does not hold 0.1. A variable's weight comes from the declarations that read it.
• Greys and colors: a cluster is a grey when its OKLCH chroma is too low to read as a hue at its lightness; a pale or dark grey that carries a trace of one of the page's hues counts as a tint of that color. Strength, neutral tint and overrides has the rule.
• Hue families: colors whose hues lie within 25 degrees, a brand color with its shades, hovers and gradients.
• The main color: the family the engine ranks first, by weight times chroma, so that a near-black text color on every element does not outrank the brand. Its color is the family's anchor, the member with the most weight times chroma squared, and its hue names the bucket. A site with no family has no main color: it is black, white and grey.
• A site's hues: the buckets of its families that hold 5% or more of its chromatic weight.

The buckets are centered on the OKLCH hues of the 500 shades of Tailwind CSS v4 that carry their names (fuchsia stands for magenta), and each reaches halfway to its neighbors. What OKLCH is explains the hue angle.

How colors are written is read from the CSS text as the page wrote it, not from the browser's object model, which turns every hex code into rgb(). The study walks each style sheet and style attribute declaration by declaration and runs the engine's own tokenizer over the values of color properties and custom properties. A notation counts each color literal: hex codes, the named colors, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch() and color(), with rgba() and hsla() under their short names. Channels are a variable that holds bare numbers for rgb() or hsl() to read (--background: 255, 255, 255), as Shopify and Wix themes and shadcn do. Relative colors (rgb(from ...)), color-mix() and light-dark() are counted by the declarations that use them.

A color declaration reads a variable when its value holds var(). A color variable is a custom property that holds a color literal or channels. Frameworks and site builders are told by the custom properties a page defines or reads: Tailwind CSS, Bootstrap, WordPress, Elementor, Material, Chakra UI, Mantine, Ant Design, Bulma, Radix, Framer, Wix; Tailwind also by its v4 theme names (--color-blue-500), and Tailwind and Bootstrap by the banner comment their builds print, which gives the major version.

A site's theme is the lightness of its canvas, the color behind the page: the root element's background, else the body's, else white. A canvas at OKLCH lightness 0.4 or less is dark, 0.8 or more light, anything between mid. A site has a dark mode in its CSS when it declares colors inside @media (prefers-color-scheme: dark), under a dark theme's selector (.dark, [data-theme="dark"], [data-color-mode="dark"] and the like) or with light-dark().

Text is read the way the engine reads it for its contrast pass: the first 3000 elements with text of their own, left out when they have no box or are not visible, and what each sits on, which is the first background up the tree, each stop of a gradient, and nothing for text on an image. Unlike the engine, the study blends a transparent text color over its background, and a transparent background over what lies under it, before it measures; read as opaque, as the engine reads colors, the average site's text failing AA would be 5.8% instead of 6%. Each element weighs the characters of its own text, up to 200.

The ratio is WCAG 2's contrast ratio. Text fails AA below 4.5:1, or below 3:1 when it is large (24 pixels, or 18.66 pixels and bold). A site's median is the ratio at which half of its text reads better and half worse; the shares across sites count each site once.

• Images, video, canvas and SVG images keep their colors and are not read: a photo hero, a logo, a gradient that is an image.
• With scripts off, a page whose content comes from scripts shows only its shell, and colors a script sets are missing. A site that serves a crawler a different page than a browser was measured as served.
• One page per site, the home page, at one width; hover and focus colors count at 0.2 of their weight.
• Style sheets the fetcher could not get count as unread: 5.3% of the sites had at least one.

• results.json: every figure, with its definition and the number of sites it is computed over.
• dataset.csv and dataset.json: one row per domain attempted, its measures empty where it did not load. Licensed CC BY 4.0, "Recolor (recolor.page), The colors of the web 2026"; the list of sites stays CC BY 3.0, attribution "Majestic".

Recolor keeps the list as downloaded and one line per domain as the run wrote it, beside the script that computes every file above from them again. No HTML, CSS or screenshot of any site is kept or published.