Export formats

Press Export at the top right. A panel opens with the tabs CSS, Tailwind, SCSS, JSON, Hex, Coolors, Link; each shows the palette in that format, and Copy copies it, with a short message to confirm. The panel stays open while you keep generating, so the code follows the palette. Every example below is the real output for the palette Recolor opens with: #264653, #2a9d8f, #e9c46a, #f4a261, #e76f51.

The order of the colors is the order of the swatches. In Recolor that order also decides which page color each one replaces, so swatch 1 is usually the brand color; see Strength, neutral tint and overrides. Every page in the palette gallery shows these same formats for its own colors, so a palette can be copied without opening the app.

One custom property per color on :root, then the three role names as aliases of the first three. Paste it into a stylesheet and use var(--color-primary) anywhere; recoloring a site with CSS variables shows how a site is built around such 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 CSS v4 @theme block: every --color-* variable becomes a color for the utilities, so this gives bg-1 to bg-5, text-primary, border-accent and the rest. The role names hold the hex itself rather than a var(), so the block works without @theme inline. Tailwind v3 used a JavaScript config instead, which this block does not replace. Tailwind v4 @theme colors from a palette covers naming, OKLCH and removing the default colors.

@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;
}

Sass variables, numbered, with the role names pointing at the first three.

$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;

JSON holds the colors in order under colors, ready for a script, a design token tool or a test; the order is the swatch order, so index 0 is the color that took the page's main color. The hex list is one color per line, for anything that takes plain text.

{
  "colors": [
    "#264653",
    "#2a9d8f",
    "#e9c46a",
    "#f4a261",
    "#e76f51"
  ]
}

#264653
#2a9d8f
#e9c46a
#f4a261
#e76f51

The Coolors link opens the same colors in Coolors, which uses the same hex-and-hyphen format. It works the other way too: swap coolors.co/ in a Coolors link for recolor.page/#, as the URL format explains.

https://coolors.co/264653-2a9d8f-e9c46a-f4a261-e76f51

The link to this view is Recolor's own address with the palette after the #. For a page loaded from a web address it also carries the page as ?site=, and scripts=0 when scripts are off, so whoever opens it sees the same page in the same palette. For a sample or an uploaded file it carries only the palette. This example was made with https://example.com/ loaded:

https://recolor.page/?site=https%3A%2F%2Fexample.com%2F#264653-2a9d8f-e9c46a-f4a261-e76f51