How to preview a color palette on a real website

A palette is not a set of five colors in a row; it is how much of the page each color covers. On a template the brand color may fill a hero, while on your site it only marks links and one button, and your charts, tables and photos sit next to it. The same palette can feel loud on one and flat on the other. Seeing it on the real page shows that before anyone builds anything, which is the point of how many colors a website palette needs.

1. Open Recolor and paste the page's address into the field at the top, then press Enter. A public page up to 5 MB of HTML loads in a few seconds; Which sites load shows real sites, from Webflow to Shopify.
2. Press Space. Each press is a new palette, and the page repaints in it. Point at a color you like and press L to lock it; the next presses keep it.
3. Drag the swatches into order. Swatch 1 takes the page's main color, swatch 2 the next, so the order decides what goes where; Strength, neutral tint and overrides explains the rules.
4. Fine-tune in the Mapping panel: Strength sets how far the page's colors move, Neutral tint how much the greys take the main hue. In Site colours you can pin any page color to a swatch.
5. Share or keep it. The Export panel's Link tab gives a link that opens the same page in the same palette, and the other tabs give the colors as code, described in Export formats.

Recolor fetches pages from the internet, so it refuses localhost and private addresses. For a page on your machine, on a staging server behind a password, or behind a login, save it from your browser as HTML and upload it with Upload, or drop it on the preview. Set the asset base URL to an address where its images and styles can be fetched, such as the staging server, and the copy looks like the original. The whole routine, with what to check on each palette, is in test a palette on your own site.

Some palette tools have a page of their own to show colors on. Realtime Colors repaints its landing page, a dashboard and a blog post, with fonts and a light and dark switch; Coolors' Visualizer paints built-in designs; Huemint generates straight into mockups. When there is no site yet, or the job is to choose roles and a font pairing, that is enough and often quicker. Recolor vs Realtime Colors and Palette generators compared say what each one shows.

If a site keeps its colors in CSS custom properties, you can open the developer tools, select the html element and change a variable such as --brand in its styles: every element that uses it repaints. It costs nothing, but it only works where the site uses variables, it changes one color at a time, and it is gone on reload. How a site is built around such variables, and how Recolor adds them to a site that has none, is in How to recolor a website with CSS variables.