Coolors vs Realtime Colors

Pick Coolors if you want to make many palettes and keep the good ones: it generates with Space like the others, browses ready palettes (10K+ on the free plan, 10M+ with Pro), pulls colors from a photo, names every color, shows shades and color blindness simulations, and saves palettes into projects and collections once you sign in. Its exports cover print and design tools as well as code: PDF, PNG, ASE for Adobe apps, SVG, CSS and Tailwind.

Pick Realtime Colors if you want to judge five colors in their roles on a page, with fonts: it repaints a full landing page, a dashboard and a blog post as you change anything, flips the palette between light and dark, and exports to CSS, Tailwind, SCSS and presets for UI libraries such as shadcn and DaisyUI. It is free and has no accounts.

Pick Recolor (recolor.page) if the page already exists: it repaints your own site, loaded by address or as an HTML file. How to preview a color palette on a real website shows the steps, and Palette generators compared puts four more tools next to these.

Coolors' generator shows the palette as full-height columns with a hex code and a name on each. Colors can be locked, dragged, adjusted by hue, saturation, brightness and temperature, and explored as 25 shades each. The free plan generates with its Auto method and up to 5 colors; the harmony methods, palettes of up to 10 colors, palette variations and its AI features come with Pro.

Realtime Colors generates on Space too, with a scheme menu and locks, and always works with five colors in fixed roles. Each color carries a contrast mark against its background, and the colors can be entered as hex, RGB or HSL or picked with an eyedropper.

This is where the two differ most. Coolors' Palette Visualizer paints the palette into built-in designs, grouped as Mobile and Web UI, Branding, Typography, Pattern and Illustration; logged out it showed 8 of them, and Pro opens all of them. Uploading your own design there takes SVG files only. Realtime Colors makes the page the main view: its landing page, dashboard and blog post change as you click.

Neither tool loads your own website or an HTML file. On a real site the palette meets real content, the site's own images and its own hierarchy of buttons and text, which is what testing a palette on your own site is about.

Coolors' export menu had URL, Share, PDF, Image, CSS, ASE, SVG, Code, Tailwind and Embed, plus sharing to X and Pinterest; everything from PDF to Embed worked logged out, with some options inside PDF and Image marked Pro. Its Tailwind export builds a 50 to 950 scale for every color, as a v3 object or as v4 variables. Realtime Colors' export tabs were CSS, Tailwind CSS, SCSS, Custom Code with presets, Shades, Gradients, QR and Download, each in HEX, RGB, HSL, OKLAB or OKLCH where it applies; its Tailwind tab writes a v3 tailwind.config.js object.

For a v4 @theme block with one variable per color, Recolor's exports write it directly, and turning a Coolors palette into code shows the round trip.

Recolor sits after either of them. Its URL uses Coolors' format, so a Coolors link opens in it after swapping the domain, and Realtime Colors' five codes after ?colors= open in it the same way. Then load your site and see the palette on it, with the page's main color on swatch 1. It is free and has no account; the Coolors alternative page and Recolor vs Realtime Colors cover each pairing on its own.