Export a palette as CSS variables or Tailwind colors

Once a palette looks right, turn it into code, not a screenshot. Colour tokens in your stylesheet let you change a colour once and have it update everywhere.

What HueSnap exports

Export CSS downloads a file with a :root block:

:root {
  --color-1: #1d3557;
  --color-2: #457b9d;
  --color-3: #a8dadc;
  --color-4: #f1faee;
  --color-5: #e63946;
}

Export Tailwind downloads a theme.extend.colors.brand object with keys 1 to 5, and Download PNG saves an image strip for mood boards or sharing in chat.

Use the variables in CSS

Paste the :root block into your global stylesheet, then reference the colours with var():

body   { background: var(--color-4); color: var(--color-1); }
.btn   { background: var(--color-5); color: #fff; }
a      { color: var(--color-2); }

CSS custom properties are supported in all current browsers.

Rename them by role

Numbered names are fine for a first pass, but role-based names are easier to maintain. Map the raw palette to semantic tokens:

:root {
  --color-1: #1d3557; /* raw palette */
  --color-5: #e63946;
  --text:    var(--color-1);
  --accent:  var(--color-5);
}

Components then use --text and --accent. If you later swap the accent colour, you change one line.

Add dark mode

Because the components reference semantic tokens, dark mode is just a second set of values:

@media (prefers-color-scheme: dark) {
  :root { --text: var(--color-4); --bg: var(--color-1); }
}

Re-check contrast for the dark pairs as well, since a pair that passes on white may fail on a dark background.

Tailwind CSS v3

Merge the exported object into tailwind.config.js under theme.extend.colors. You then get classes such as bg-brand-1, text-brand-3 and border-brand-5. Using extend keeps Tailwind's default colours available alongside yours.

Tailwind CSS v4

Tailwind v4 defines theme colours in CSS instead of a JavaScript config. Put the same hex values in an @theme block in your main CSS file:

@theme {
  --color-brand-1: #1d3557;
  --color-brand-2: #457b9d;
}

That produces the same bg-brand-1-style utilities.

Picking good token names

Name tokens after what they do, not what they look like. --danger still makes sense if you later change red to orange; --red does not. A small, stable set such as background, surface, text, muted text, primary, accent and border covers most interfaces. Add more only when a real component needs one, so the list stays short enough that people actually use it instead of pasting new hex values.

Keep the palette with your code

• Commit the token file to version control, so colour changes show up in code review.
• Keep the PNG strip next to it, or in your design file, so designers and developers see the same colours.
• Note the contrast ratios of the main text and background pairs in a comment, so the next person does not break them.

All exports are generated in your browser, free and without an account.

Export a palette →