Recolor for brand designers

A brand book shows colors as swatches and on hero images made for it. The website shows them at a different scale: a brand color that looks confident in a swatch can fill a whole hero, carry every link in long articles, and sit next to product photos nobody reshoots for the rebrand. Seeing it there early answers the questions that usually come up after launch: is it too loud, does it fight the photography, do the links still read. Previewing a palette on a real website shows the general method.

1. Load the current site by its address and press Use site colours in the Mapping panel. The swatches now hold the old palette, main color first: a record of where you start. Save it in Saved palettes.
2. Open Adjust on swatch 1 and type the new brand color's hex code. The whole site follows: buttons, links, the hero, and the lighter and darker shades around them.
3. Do the same for the secondary and accent colors, or lock the brand color with L and press Space to explore secondaries around it.
4. Click through the site in the preview: the product pages, a long article, a form. Each loads in the same palette.
5. Send the result as a link from the Link tab in Export; save each variant you want to compare.

Brand colors arrive as hex codes, and Recolor takes them directly: in Adjust, or written into the address, hex codes joined by hyphens after the #. A five-color brand palette is one line:

https://recolor.page/#b67d23-69491c-131f2d-aabbcc-cce9ff

The first code becomes swatch 1. Coolors links open the same way after swapping the domain, as the URL format shows. How far page colors move towards the new ones is set by Strength, 70% by default; at 100% the brand colors are used as given wherever the lightness guard allows, which Strength, neutral tint and overrides explains.

Logos, photos, video and illustrations are images and keep their colors, which is often the first thing a rebrand preview reveals: the old logo next to the new palette. Typefaces, spacing and layout stay as the site has them. Text keeps its readability: if a new color would make it worse than before, lightness gives way, which is explained in keeping a palette accessible.

When the colors are settled, the Export panel gives them as CSS variables, a Tailwind v4 @theme block, SCSS or JSON for the developers, and as a Coolors link for anyone working there. Testing more of the site, including pages behind a login, is covered in test a palette on your own site.