Strength, neutral tint and overrides

The engine weighs every color by how much of the page it covers: the elements its rules reach, with extra weight for backgrounds by their area. Colors whose hues lie within 25 degrees form a family, so a brand's darker hover, its lighter badge and the far end of its gradient stay with the brand. Families are ranked by weight times chroma, which puts the brand ahead of a dark text color that is used more but barely colored.

Family 1 takes swatch 1, family 2 takes swatch 2, and when there are more families than swatches the count wraps around: with 5 swatches, family 6 takes swatch 1 again. Because order is meaning, dragging a swatch to another place moves the page's colors with it. Inside a family, the main color moves onto the swatch and the others keep their offset in hue and their place in lightness relative to it, so a family of shades stays a family of shades. How many colors a site needs, and which role swatch 1 plays, is the subject of how many colors a website palette needs.

Strength is how far a color travels, in OKLCH. The hue always becomes the swatch's hue. Chroma and lightness move from the page's value towards the swatch's by the Strength fraction: at 0% the page keeps its own lightness and chroma and only takes the palette's hues; at 100% each color becomes its swatch color, where the guard allows.

The guard is about lightness. A shift of up to 0.35 in OKLCH lightness passes in full; from there the allowed share falls in a straight line to nothing at 0.6. A dark navy hero under a pale yellow swatch therefore turns into a dark olive rather than a pale yellow, and the white text on it stays readable. The reasoning, with OKLCH explained, is in why a dark hero stays dark.

Greys, near-whites and near-blacks are not ranked with the colors. They keep their lightness and take the hue of swatch 1, at a chroma of up to 0.06 times the Neutral tint setting, and never more than sRGB has room for at that lightness, so white stays white and black stays black. At 0% the greys are exactly what they were. Under swatch 1 the strip says "tints greys" when this is in effect.

The engine reports which text sits on which background. After mapping, each pair is checked with the WCAG contrast ratio. Where a pair reads worse than it did on the original page, and worse than 4.5:1 (3:1 for large text), the colors that moved give back the smallest part of their lightness shift that makes it read again. If even the original lightness does not read under the new hue, the text moves away from its background. Black or white text on a color explains the ratio itself.

The Site colours panel lists every color the page shows, heaviest first, with its weight, the properties it is used for and how often. Each has a menu: "Auto" with the swatch it goes to now, "Swatch 1" to the last swatch, and "Keep original". A color pinned to a swatch becomes a family of its own on it and shows a "Pinned" pill; a kept color stays as the page had it. The small chips under each swatch in the strip are the page colors it replaces, and clicking one opens the panel on that color.

Every change is one undo step, and Reset all puts every color back on Auto. Overrides belong to the page you see: loading another page, or reading the page again, clears them. They are not part of the link, which holds only the palette, as the URL format shows.

The Mapping panel has the two sliders, Reset, which returns them to 70% and 15%, and Use site colours. That fills the unlocked swatches with the page's own colors, its main color first and then its most used greys, so with that palette every page color maps to itself. It is the quickest way to start from a site's real palette and change one color at a time. Two switches sit under them: "Animate changes", on by default, and "Grey images". The rest of the engine is on How Recolor repaints a page.