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

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.
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.

Related guides

• STYLES, VARIABLES & CODE
  Turn your color list into a sheet, Figma 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
  Extract colors from CSS or any 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.
  →