COLOR EXTRACTLY CLASSIC Help
Find answers or browse by topic
Extract colors from CSS, layers or images in Figma, clean and rename the palette, check contrast, then add it as styles, variables or Tailwind tokens.
- guides
- 6
- topics
- 4
Popular 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.
-
EXTRACT COLORS
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.
-
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.
-
CONTRAST & PALETTES
Check color contrast with WCAG and APCA, and build hue ramps Click a color to open the compare panel, read its contrast score against other colors, nudge text to AA or AAA, and save generated hue steps to your list.
Topics
- Extract Colors Get colors from pasted code, selected layers, an image or your Figma styles and variables.
- Clean & Rename Merge near-duplicates and give every color a consistent name.
- Contrast & Palettes Check contrast with WCAG and APCA, build hue ramps and generate a palette.
- Styles, Variables & Code Render a color sheet, add styles and variables, or export CSS, Tailwind, JSON and more.
Frequently asked questions
What is the PAS score?
Color Extractly's own readability score from 0 to 100, made of 50% luminance contrast, 25% local contrast and 25% color separation. 85 or more is Exceptional, under 25 Poor.
Does it simulate color blindness?
It measures how well a pair stays apart for protan, deutan and tritan vision and shows it as a score and badges. It does not show a simulated picture.
How does Magic Clean decide that two colors are similar?
It measures the distance between their red, green and blue values. Colors closer than the threshold are merged into the first one; transparency is not taken into account.
Can I undo a removed color?
No. Undo covers Magic Clean, Rename and name edits, but not removing a row with ×.
What does the Tailwind export contain?
A tailwind.config.js that adds your colors under theme.extend.colors, pointing at CSS variables, so use it together with the CSS export.
How many colors can I export for free?
The first 12 colors of the list. Pro exports all of them.
Which color formats does Color Extractly Classic understand?
HEX with 3, 4, 6 or 8 digits, rgb() and rgba() with commas, hsl() and hsla() with commas, and linear, radial and conic gradients.
Can it read Tailwind or design token files?
It reads any text, so it finds the HEX, rgb() and hsl() values inside them. Values that only point to another token with var() are not resolved.
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.
Where do the variables go?
Into a local variable collection called Colorly, which is created if it does not exist.
Do linked layers stay linked?
Only while the plugin is open. After you close it, the layers keep their color but no longer follow changes.