# Get the colors out of a Figma design, an image or your styles

> Use the Selection tab for layers, the Image tab for a picture, and the Figma tab for local color styles and variables.

## Goal

Collect every color a design actually uses, for an audit, a handover or a new design system.

## Before you start

- Color Extractly Classic open in a Figma, FigJam or Slides file.

## Steps

1. **From layers: choose what to read** On the Selection tab, turn on Fill, Text and Stroke as needed. Fill is on by default; text colors are only read when Text is on.
   ![Selection tab: Fill on, Text and Stroke off, four frames listed such as Trail card and Checkout flow.](https://raiken.io/assets/kb/colorextractly-classic/colorextractly-classic-extract-from-figma/selection.png)
2. **From layers: extract** Select layers and click Extract all Colors. With nothing selected, the whole current page is read. Click a layer card instead to read only that layer and what is inside it.
3. **From an image** On the Image tab, drop an image, click Browse image, or paste one with Ctrl/Cmd+V. Click Extract all Colors to get up to 8 main colors.
   ![Image tab with a mountain poster in blue, green, orange and sand loaded, Extract all Colors below.](https://raiken.io/assets/kb/colorextractly-classic/colorextractly-classic-extract-from-figma/image.png)
4. **From styles and variables** On the Figma tab, keep Color Styles and Color Variables on, or turn one off, and click Extract all Colors. Variables with several modes appear once per mode, as Name / Mode.
   ![Figma tab: Extract from Figma File with Color Styles and Color Variables both switched on.](https://raiken.io/assets/kb/colorextractly-classic/colorextractly-classic-extract-from-figma/figma.png)
5. **Find a color's layer** Colors from layers have a location button in their row. Click it to jump to the layer and select it.

## Tips

- Reading a whole page can take a while; select a frame for a faster result.
- Hidden layers are skipped.

## Result

A list of the colors used in your design, image or file styles.

## If something goes wrong

- **Text colors are missing.** -> Turn on Text on the Selection tab; Fill alone skips text layers.
- **"Tip: To extract image palette, select the image-filled layer directly."** -> Colors from a photo fill are only read when you select that image layer itself, not a frame around it.
- **Library styles or some variables are missing.** -> The Figma tab reads local solid color styles and local color variables. Library styles, gradient styles and variables that point to other variables are skipped.

## Common questions

### Can I extract colors from a screenshot?

Yes. Drop it on the Image tab and click Extract all Colors. You get up to 8 colors, named by their HEX codes.

### Does Color Extractly Classic read my design system library?

No, only the styles and variables defined in the open file.

## Related guides

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

---

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