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

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

Related guides

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