About Recolor

Recolor works like the palette generators designers know: Space for a new palette, a lock on the colors you keep, sliders to adjust one, drag to reorder, undo, and the palette in the address so a link shares it. The difference is the preview. Instead of swatches or a demo page, it shows a real web page, loaded from its address or from an HTML file, and repaints every color on it as the palette changes. The page's main color takes the first swatch, its shades follow, and its text stays readable. How Recolor repaints a page explains the mechanics, and Palette generators compared places it among similar tools.

Choosing colors for a website usually happens away from the website: in a swatch strip, on a template, in a mockup. The first time a palette meets the real hero, the real tables and the real photos is often after it has been built in. Recolor moves that moment to the start, when changing your mind costs a key press. It is meant for redesigns and refreshes of sites that exist, for brand changes, and for anyone who wants to see a palette on content they know.

Recolor is one Cloudflare Worker with two halves. The server half, written with Hono, fetches a page, streams it through Cloudflare's HTMLRewriter to put its stylesheets inline and add a small engine script, and guards against private addresses, oversized pages and floods. The browser half is a React app with the palette, the panels and the mapping from page colors to palette colors, computed in OKLCH with the culori library. The engine runs inside the sandboxed preview: it turns every color on the page into a CSS variable, so a new palette is a single write. The color math, the palette generator and the mapping are plain TypeScript modules shared by the app and the engine, each with its own unit tests. It was tested on 16 real sites on October 8, 2026, listed on Which sites load.

There is no account, no paid plan and no advertising. Palettes you save stay in your browser; a page fetched from an address sits in a cache for 60 seconds; uploaded files are never stored. What is fetched and logged is set out in What Recolor stores and fetches, and every release is in the changelog.

The guides cover choosing and testing a website palette: previewing it on a real page, keeping text readable, OKLCH, and turning a palette into CSS or Tailwind. The docs describe Recolor itself, from loading a page to every limit and export. The palette gallery has 40 named palettes ready to open, and the comparisons set Recolor next to Coolors, Realtime Colors and other tools.

Recolor is an independent project, built and run by its developer. Site owners who want to know why their site was fetched, or how to opt out, will find it on The Recolor fetcher.