# Export colors as CSS, Tailwind, JSON, iOS or Android tokens

> Click Code Tokens, choose an output format and a naming pattern, then copy or download the file.

## Goal

Hand your palette to developers in the format their code uses.

## Before you start

- A color list in Color Extractly Classic.

## Steps

1. **Open Code Tokens** Click Code Tokens below the list. The export window opens and shows the colors as CSS right away.
   ![Export window: Output CSS, Naming $full with pattern chips, the colors as CSS custom properties, Copy.](https://raiken.io/assets/kb/colorextractly-classic/colorextractly-classic-export-code-tokens/code-tokens.png)
2. **Choose the format** Pick the output: CSS, JSON, SCSS, LESS, ESM, CJS, Tailwind, Android XML, iOS Swift or Web Tokens (DTCG).
3. **Choose the names** Keep $full to use each color's name, or pick a pattern such as Tailwind, BEM or Name + Index. Count base and Count step set the numbers that $count produces.
4. **Copy or download** Click Copy, or Download to save a file such as tokens.css, tailwind.config.js, colors.xml or Tokens.swift. Regenerate (Ctrl/Cmd+Enter) refreshes the output after a change.

## Tips

- Semi-transparent colors are written as rgba(), the rest as #RRGGBB.
- The export remembers your format and naming pattern for next time.

## Result

Your palette as code, ready to paste into a project.

## If something goes wrong

- **My JSON file does not parse.** -> On the free plan, a note line about the 12-color limit is added at the top of the output. Delete that line, or export with Pro.
- **SCSS Map gives plain CSS.** -> SCSS Map is not available for a color list yet; use SCSS for $variables.
- **Gradients are missing.** -> Gradients are not exported as code tokens.

## Common questions

### What does the Tailwind export contain?

A tailwind.config.js that adds your colors under theme.extend.colors, pointing at CSS variables, so use it together with the CSS export.

### How many colors can I export for free?

The first 12 colors of the list. Pro exports all of them.

## Related guides

- [Turn your color list into a sheet, Figma styles and variables](https://raiken.io/kb/colorextractly-classic/colorextractly-classic-styles-and-variables): Click Render Colors to Figma to draw a color sheet, then add the colors as local color styles or as variables in a collection called Colorly.
- [Extract colors from CSS or any code](https://raiken.io/kb/colorextractly-classic/colorextractly-classic-extract-from-code): Paste CSS, SCSS, JSON or plain text into the Text tab and click Extract all Colors to get a list of every color with its name.

---

Source: https://raiken.io/kb/colorextractly-classic/colorextractly-classic-export-code-tokens (Color Extractly Classic help centre). Reviewed: 2026-10-30.