Recolor vs Realtime Colors: your page or a template

Realtime Colors is built around its own pages. Its home page is a full landing page, with a hero, a bento grid of stats, pricing, FAQ and testimonials, and its Templates menu adds a dashboard and a blog post. Every control, from the five colors to the fonts, repaints those pages live, and the palette travels in the address:

https://www.realtimecolors.com/?colors=050315-fbfbfe-2f27ce-dedcff-433bff&fonts=Inter-Inter

Recolor has no page of its own to show. You load one: a public address, or an .html file you upload with an asset base URL for its images and styles. Recolor reads every color on that page, ranks the page's colors by how much of it they cover, and repaints them as you press Space. Its three samples exist so the app is alive before you load anything. How that works is on How Recolor repaints a page, and which real sites load is on Which sites load.

• Fonts. It picks a heading and a body font, from Google Fonts or the fonts on your device, with a type scale, and exports them too. Recolor does not touch fonts.
• Light and dark. One switch turns the palette into the other theme with the same hues, and the export can write both themes at once. Recolor shows a site in the theme it has.
• A layout made for judging roles. Five named roles on a purpose-built landing page make it plain what text, background, primary, secondary and accent do.
• Export presets. Besides CSS, Tailwind and SCSS it writes presets for shadcn, DaisyUI, NextUI, Bootstrap, Material UI, Chakra UI and more, shades for every color, gradients between primary, secondary and accent, a QR code of the link, and values in OKLCH and HSL as well as hex.
• Beyond the browser. A Figma plugin turns a shared link into color styles, and a VS Code extension uses the same five roles for an editor theme.

If you are designing from scratch and want to see a palette and a font pairing on a typical marketing page, it is the better tool.

Recolor fits when the page already exists: your site, a client's site, a staging build or a saved HTML file. The palette lands on the real layout, the real content and the real images, so you see what a new palette does to that site's hero, its buttons, its charts and its body text, not to a stand-in. Swatch 1 takes the page's main color, swatch 2 the next, and dragging the swatches reorders the page; the lightness guard and the contrast check keep text readable, as Strength, neutral tint and overrides explains.

It also takes palettes of any size from 2 to 10, exports a Tailwind v4 @theme block (see Export formats), and keeps Coolors' URL format, so a Coolors link opens in it. For a guided start, How to preview a color palette on a real website walks through it.

The two fit together. Realtime Colors writes its five colors into its address after ?colors=, in the order text, background, primary, secondary, accent. Put those five codes after recolor.page/# and the same palette opens in Recolor, ready to try on your own site:

https://recolor.page/#050315-fbfbfe-2f27ce-dedcff-433bff

Since Recolor gives swatch 1 to the page's main color, drag the primary color to the front first; text and background then fall to the end, where a site's greys and lighter areas usually go.