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

## Goal

Turn the colors in a stylesheet, a token file or a brand document into a palette you can clean up and bring into Figma.

## Before you start

- Color Extractly Classic installed from Figma Community.
- The code or text with the colors, copied to the clipboard.

## Steps

1. **Paste the code** Open Color Extractly Classic. On the Text tab, paste your code into the box.
2. **Extract** Click Extract all Colors. The list shows every color found, with "Colors found:" and the count above it.
3. **Check the names** Each color is named after the word right before it, so --brand: #123456 becomes --brand and background-color: #fff becomes background-color. The same name with the same color is counted once with its number of uses.
4. **Work with the list** Type in Filter Colors ... to search by name or code, use the filter icon to sort or show values as HEX, RGB or HSL, and click a swatch to copy its value.

## Tips

- Gradients in the code, such as linear-gradient(...), become one list item each, named like linear gradient 1.
- The list is not saved when you close the plugin, so add the colors to Figma or export them before you leave.

## Result

A named list of the colors in your code, ready to clean, rename and turn into styles, variables or tokens.

## If something goes wrong

- **Some colors are missing.** -> Classic reads HEX (#RGB, #RGBA, #RRGGBB, #RRGGBBAA), comma-separated rgb()/rgba() and hsl()/hsla(), and CSS gradients. It skips named colors such as red, oklch(), lab(), space syntax like rgb(0 0 0 / 50%) and var() references. Convert those to HEX or comma rgb() first.
- **"No colors found. Please check your input."** -> Nothing in the text matched a supported color format. Check the formats above.
- **Many colors are all called color.** -> Plain CSS rules like color: #333 name the color after the property. Use Rename to give them proper names.

## Common questions

### Which color formats does Color Extractly Classic understand?

HEX with 3, 4, 6 or 8 digits, rgb() and rgba() with commas, hsl() and hsla() with commas, and linear, radial and conic gradients.

### Can it read Tailwind or design token files?

It reads any text, so it finds the HEX, rgb() and hsl() values inside them. Values that only point to another token with var() are not resolved.

## Related guides

- [Clean up and rename a messy color palette](https://raiken.io/kb/colorextractly-classic/colorextractly-classic-clean-and-rename): Use Magic Clean to merge colors that are the same or nearly the same, then Rename to give every color a consistent name from a template.
- [Export colors as CSS, Tailwind, JSON, iOS or Android tokens](https://raiken.io/kb/colorextractly-classic/colorextractly-classic-export-code-tokens): Click Code Tokens, choose an output format and a naming pattern, then copy or download the file.

---

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