Recolor for front-end developers

Press Space until a palette works, or paste one: hex codes joined by hyphens after recolor.page/#, which is also how a Coolors link opens. Load your page to see it in context, then press Export and copy the tab you need. The output is plain text with no account and no watermark; Export formats shows every format, and Tailwind v4 @theme colors covers using the block.

Recolor fetches pages from the internet, so a dev server on localhost is refused by address. Save the rendered page from the browser and upload it, with the asset base URL pointing at where its CSS, images and fonts can be fetched, such as a preview deployment. Public preview deployments load directly by address. For a single-page app, Scripts on runs your code in the sandbox; module scripts from another domain cannot load there, and Scripts off shows the server's HTML instead. The limits are 5 MB of HTML, 10 seconds per fetch and about 30 page loads a minute; the rest are on Limits.

Everything you would put in a ticket is in the address: the palette after the #, the page in ?site=, and scripts=0 when scripts are off. A link like this one opens a staging page without scripts in the default palette:

https://recolor.page/?site=https%3A%2F%2Fstaging.example.com%2F&scripts=0#264653-2a9d8f-e9c46a-f4a261-e76f51

Paste it into a pull request or an issue and a reviewer sees what you saw. Locks, overrides and the mapping sliders stay out of the link; the URL format has the details.

If you are building theming yourself, the engine is a useful reference. It reads every stylesheet the page can read, gives each exact color a CSS variable, rewrites every declaration to use it while keeping priority and cascade order, and then changes only the variables. A new palette is one write of one style element. The mapping from page colors to swatches runs in OKLCH, with hue families, a lightness guard and a contrast check. How Recolor repaints a page explains it, and How to recolor a website with CSS variables turns it into steps for your own code.

Recolor is built to stay on the keyboard. Space generates, L locks and C copies the color under the pointer or in focus, Cmd+Z or Ctrl+Z undoes, Shift with an arrow moves a color, and ? lists everything. Space and undo also work while the previewed page has the focus, unless you are typing in one of its fields. Every panel closes with Esc and gives the focus back to the button that opened it. The full list is on Keyboard shortcuts.