# Color Extractly help centre --- > Guides, steps, tips and common questions for the Color Extractly Figma plugin, in full. Landing page: https://raiken.io/kb/colorextractly --- # Combine similar colors and name them > Use Magic Clean to reduce duplicates and Rename to give every color a consistent name. ## Goal Turn a long raw color list into a short, consistently named one. ## Before you start - A color list in Color Extractly. ## Steps 1. **Open Magic Clean** Click Magic Clean above the color list. 2. **Choose how to combine** Under Combine by pick Similar Color Codes, Same Color Code or Same Variable Name. 3. **Reduce** With Similar Color Codes, move the Threshold slider. Then click Reduce. 4. **Undo if needed** Click Undo to return to the list as it was before the last Magic Clean. 5. **Rename** Click Rename and choose a Preset: Color family + scale, Smart name + scale, Smart name + 2-digit index, Hex + scale, Full path + scale or Full path only. For your own pattern edit the Template with tokens such as $name, $colorTone, $full and $count. Then click Run Rename. ## Tips - Names are generated on your device: Color Extractly compares each color with a built-in color-name dictionary. ## Result A shorter list in which every color carries a consistent name. ## Common questions ### Where do the color names come from? Color Extractly generates them itself, by comparing each color's HSL values with a built-in color-name dictionary. It does not look names up on a website. ## Related guides - [Extract colors from CSS, code or text](https://raiken.io/kb/colorextractly/colorextractly-extract-css): Paste CSS, SCSS, LESS or any text that holds color values and turn them into a color list. - [Export colors as code or Figma variables](https://raiken.io/kb/colorextractly/colorextractly-export-and-variables): Download or copy your colors as a token file, or create Figma variables from them. --- Source: https://raiken.io/kb/colorextractly/colorextractly-clean-up-and-name (Color Extractly help centre). Reviewed: 2026-10-30. --- # Export colors as code or Figma variables > Download or copy your colors as a token file, or create Figma variables from them. ## Goal Get your extracted colors into code or into a Figma variable collection. ## Before you start - A color list in Color Extractly. ## Steps 1. **Export as code** Click Code Token to open Export Variables as Code Token. Choose a Format: CSS, JSON, JSON (Figma), SCSS, SCSS Map, LESS, ESM, CJS, Tailwind, Android XML, iOS Swift or Web Tokens (DTCG). 2. **Download or copy** Click Download to save the file, or use the copy button to copy the code to the clipboard. 3. **Create Figma variables** Open the color list's menu and choose Import to Variables. The collection is named after the imported token file, or Extracted Colors if the colors did not come from a file. ## Tips - Rename your colors first, so the exported tokens carry the names you want. ## Result Your colors exist as a token file or as Figma variables. ## Common questions ### Which export formats are there? CSS, JSON, JSON (Figma), SCSS, SCSS Map, LESS, ESM, CJS, Tailwind, Android XML, iOS Swift and Web Tokens (DTCG). ## Related guides - [Combine similar colors and name them](https://raiken.io/kb/colorextractly/colorextractly-clean-up-and-name): Use Magic Clean to reduce duplicates and Rename to give every color a consistent name. - [Extract colors from CSS, code or text](https://raiken.io/kb/colorextractly/colorextractly-extract-css): Paste CSS, SCSS, LESS or any text that holds color values and turn them into a color list. --- Source: https://raiken.io/kb/colorextractly/colorextractly-export-and-variables (Color Extractly help centre). Reviewed: 2026-10-30. --- # 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 1. **Open Color Extractly** Run Color Extractly from the Plugins menu and stay on the Colors tab. 2. **Choose From Text / Code** Click the From Text / Code icon on the start screen. Its tooltip reads From Text / Code. 3. **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. 4. **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. ## Related guides - [Combine similar colors and name them](https://raiken.io/kb/colorextractly/colorextractly-clean-up-and-name): Use Magic Clean to reduce duplicates and Rename to give every color a consistent name. - [Export colors as code or Figma variables](https://raiken.io/kb/colorextractly/colorextractly-export-and-variables): Download or copy your colors as a token file, or create Figma variables from them. --- Source: https://raiken.io/kb/colorextractly/colorextractly-extract-css (Color Extractly help centre). Reviewed: 2026-10-30.