Recolor for
Recolor for your role
Recolor (recolor.page) shows a palette on a real web page. Here is what that changes for designers, developers and brand teams.
Last updated
By role
- Recolor for
Recolor for web designers
Recolor lets web designers show a client their own website in new palettes, live, before a mockup: paste the address, press Space, share a link. - Recolor for
Recolor for front-end developers
Recolor is a palette tool for front-end developers: try a palette on your real page or build, then export CSS variables, a Tailwind v4 @theme block or JSON. - Recolor for
Recolor for brand designers
Test new brand colors on the live website before a rebrand: the brand color takes over everywhere the old one was, shades included, and text stays readable.
Guides to start with
- Guides
How to preview a color palette on a real website
Three ways to preview a color palette on a website: load the real page into Recolor, use a template previewer, or edit CSS variables in developer tools. - Guides
Test a palette on your own site before a redesign
How to test a color palette on your own website before a redesign: load it by address or as HTML, press Space through palettes, check each page, share the link. - Guides
Turn a Coolors palette into CSS variables, a Tailwind v4 @theme block or SCSS
Turn a Coolors palette into CSS variables, a Tailwind v4 @theme block or SCSS: open its link in Recolor, press Export, copy. With the exact output.