Extract colors from CSS, code or text
Paste CSS, SCSS, LESS or any text that holds color values and turn them into a color list.
Goal
Pull every color out of a stylesheet or code snippet into Color Extractly.
Before you start
- Color Extractly installed in Figma.
- CSS, SCSS, LESS or other text that contains color values.
Steps
- Open Color Extractly Run Color Extractly from the Plugins menu and stay on the Colors tab.
- Choose From Text / Code Click the From Text / Code icon on the start screen. Its tooltip reads From Text / Code.
- Paste your source Paste the text. Color Extractly reads hex values (3, 4, 6 and 8 digits), rgb() and rgba(), hsl() and hsla(), CSS named colors, CSS custom property definitions, and SCSS and LESS variables.
- Extract Click the extract button below the text field (it reads Extract Colors on the Colors tab). The colors appear as a list you can clean up, name and export.
Tips
- The start screen has more sources, shown as icons: From Selection, From Image, Figma Variables & Styles, Import Token File and Start From Scratch.
Result
The colors from your text are listed in Color Extractly.
Common questions
Which color formats does Color Extractly read from text?
Hex values (3, 4, 6 and 8 digits), rgb() and rgba(), hsl() and hsla(), CSS named colors, CSS custom property definitions and SCSS or LESS variables.
Can I extract colors without code?
Yes. Choose From Selection to read colors from your Figma selection, or From Image to extract the palette of an image.