Recolor for web designers

Clients judge colors on their own content. A palette shown as five swatches, or on a template, asks them to imagine their homepage in it; most cannot, and the decision slips to the mockup round, where changing it is expensive. On their own site the question becomes concrete: this is your hero, your pricing table and your footer in the new colors. It works for a redesign and for a refresh of a site that stays as it is.

1. Load the client's homepage by its address. If the site is not public yet, save it as HTML and upload it, as Loading a page explains.
2. Press Use site colours in the Mapping panel: the swatches fill with the site's own colors, main color first, so you start from where the client is.
3. Lock what must stay, such as the brand color, with L, and press Space for the rest. Drag the swatches to change which color leads.
4. When a direction works, save it with Save current in the Saved palettes panel; it keeps up to 50 palettes in your browser.
5. Walk the other pages by clicking links in the preview; they load in the same palette.
6. Send each direction as a link from the Link tab in Export; the client opens the same page in the same palette.

Not every color on a site is up for discussion. A locked swatch keeps its color through every Space. In Site colours you can pin a page color to a swatch, so the client's green always becomes swatch 1, or set it to Keep original, so it stays exactly as it is while the rest changes. Logos and photos are images and keep their colors anyway; switch on Grey images to judge the palette without them. The rules behind it are on Strength, neutral tint and overrides.

Recolor changes colors only. Fonts, spacing and layout stay as the site has them, and it shows one palette at a time, so side-by-side comparisons are two links or two saved palettes. There are no client accounts or comments; feedback happens wherever you already talk. For a site that does not exist yet, a template tool with fonts is a better start, as Recolor vs Realtime Colors explains.

Once the client picks a direction, the Export panel gives it as CSS variables, a Tailwind v4 @theme block, SCSS or JSON; Export formats shows each. Put the colors in variables and a later tweak is a few lines, as How to recolor a website with CSS variables shows. Checking each palette's text contrast is covered in Black or white text on a color.