Turn a Coolors palette into CSS variables, a Tailwind v4 @theme block or SCSS

1. In Coolors, open the palette and copy its address. Generator links look like https://coolors.co/264653-2a9d8f-e9c46a-f4a261-e76f51.
2. In the address bar, replace coolors.co/ with recolor.page/# and press Enter. The palette opens in Recolor in the same order; the URL format explains why this works.
3. Optional: paste your site's address into Recolor's field and press Enter, to see the palette on your real page before it goes into code. Drag the swatches if the page's main color should come from another one.
4. Press Export, choose the CSS, Tailwind or SCSS tab, and press Copy.

Recolor needs no account, and opening a Coolors link needs none either.

This is the exact text Recolor gives for the palette in the link above. CSS variables:

:root {
  --color-1: #264653;
  --color-2: #2a9d8f;
  --color-3: #e9c46a;
  --color-4: #f4a261;
  --color-5: #e76f51;
  --color-primary: var(--color-1);
  --color-secondary: var(--color-2);
  --color-accent: var(--color-3);
}

A Tailwind v4 @theme block, which gives utilities such as bg-primary and text-2:

@theme {
  --color-1: #264653;
  --color-2: #2a9d8f;
  --color-3: #e9c46a;
  --color-4: #f4a261;
  --color-5: #e76f51;
  --color-primary: #264653;
  --color-secondary: #2a9d8f;
  --color-accent: #e9c46a;
}

SCSS variables:

$color-1: #264653;
$color-2: #2a9d8f;
$color-3: #e9c46a;
$color-4: #f4a261;
$color-5: #e76f51;
$color-primary: $color-1;
$color-secondary: $color-2;
$color-accent: $color-3;

Every format, JSON and the hex list included, is on Export formats, and every palette in the gallery shows its own.

Coolors exports code too. As seen on October 8, 2026, its CSS export names each variable after the color's name, writes the hex with an alpha channel (for example #264653ff) and has no :root block around the lines; it also offers HSL and SCSS versions and gradients. Its Tailwind export builds a 50 to 950 scale for every color, as a v3 object or as v4 variables without the @theme wrapper. Those suit a design system built on scales; Recolor's output suits a site built on a few roles, and pastes as it is.

Neither is wrong. If you want Coolors' names, copy its export; if you want numbered colors with primary, secondary and accent, copy Recolor's. The Coolors alternative page compares the two tools further.

• CSS variables fit any site, with or without a framework: plain CSS, Sass, CSS modules, Vue or Svelte components. They also work at runtime, so a script can swap them.
• The Tailwind block fits a Tailwind v4 project: it turns the palette into utility colors in one paste. In a v3 project the colors go into the JavaScript config instead.
• SCSS variables fit an older Sass codebase that already uses $variables; they exist only at build time, so nothing can change them in the browser.
• JSON fits scripts, design token pipelines and tests: an array in swatch order.

If a site will ever get a second palette, such as a dark theme, CSS variables are the format that makes that a small change rather than a rebuild.

The numbered names are neutral on purpose: a palette can change without its names lying. Rename them in your editor to roles your site already uses, --color-brand or --color-surface, and keep using roles from then on. Then point every color in your CSS at them, as How to recolor a website with CSS variables shows, and a later palette is a change of five lines.