COLOR EXTRACTLY Help
Find answers or browse by topic
Extract colors from text, a selection or an image, clean up and name them, then export them as code tokens or create Figma variables.
- version
- 84.20
- guides
- 3
- topics
- 3
Popular Guides
-
COLOR EXTRACTION
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.
-
CLEAN UP & NAMES
Combine similar colors and name them Use Magic Clean to reduce duplicates and Rename to give every color a consistent name.
-
EXPORT & VARIABLES
Export colors as code or Figma variables Download or copy your colors as a token file, or create Figma variables from them.
Topics
Frequently asked 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.
Which export formats are there?
CSS, JSON, JSON (Figma), SCSS, SCSS Map, LESS, ESM, CJS, Tailwind, Android XML, iOS Swift and Web Tokens (DTCG).
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.
Release Notes & Changelog
Recent updates, feature additions, and fixes for Color Extractly.
V84.20
LATEST
Your lists, exactly the way you want them
Rename tokens in place, reorder them by dragging, and sort with immediate effect.
- Rename in place: click a token name and type. Enter saves, Escape reverts.
- Drag to reorder: drop a token where it belongs and it stays, through to your exports.
- Sorting that answers: Sort by applies the moment you pick it, and saved projects open newest first.
V84.10
Start from a real design system
Generate tokens from the official defaults of popular design systems, then keep your sheets in sync.
- Design-system presets: generate Material 3, Apple HIG, Fluent 2, Tailwind, Bootstrap or Ant Design tokens from the Generate menu.
- Update Sheet: refresh a selected sheet's sizes, usage and details in place, without re-rendering, so your tweaks are kept.
- Sheet footer: generated sheets carry a version, a last-updated date and a Color Extractly link.
V84.00
Projects
Bundle colors, typography and numbers into named projects you can save, reopen and regenerate.
- Projects: group your tokens into named design-system projects from the Overview tab.
- Save and restore: reopen a project to load its exact tokens, or regenerate a fresh variation.
- Canvas overview: render a project overview onto your Figma canvas and click to re-import.
V83.00
A full design token builder
Create, manage and export design tokens end to end inside Figma, with a redesigned interface.
- Design tokens: create, manage and export design tokens end to end, right inside Figma.
- New UI: a redesigned interface for a faster, cleaner experience.