# Color Extractly Classic help centre --- > Guides, steps, tips and common questions for Color Extractly Classic, in full. Landing page: https://raiken.io/kb/colorextractly-classic --- # 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. ## Goal Make sure text and background pairs from your palette are readable, and extend a color into a ramp of lighter and darker steps. ## Before you start - A color list in Color Extractly Classic. ## Steps 1. **Open the compare panel** Click a color in the list. The panel shows Example Text in that color on another color, with a PAS score and its tier, from Poor to Exceptional. ![Compare panel for --glacier: Example Text on light blue, PAS 99 Exceptional, Active Colors and a hue ramp.](https://raiken.io/assets/kb/colorextractly-classic/colorextractly-classic-check-contrast/compare-panel.png) 2. **Pick what to compare** Under Active Colors, click + to add colors from your list. Click Swap to switch text and background, and change the font in Typography Settings to test real sizes. 3. **Read the details** Click the PAS badge. The sheet shows the WCAG ratio (4.5:1 or more is AA, 7:1 or more is AAA), APCA, and color-blindness robustness, plus badges such as APCA-Body-Text. ![Accessibility details sheet: PAS 99, WCAG 5.67:1, APCA 58.8, CVD robustness and Quick Adjust Text Color.](https://raiken.io/assets/kb/colorextractly-classic/colorextractly-classic-check-contrast/accessibility-details.png) 4. **Fix the contrast** Under Quick Adjust Text Color, click 3.0 Large, 4.5 AA or 7.0 AAA to change the text color just enough to reach that ratio, or Auto Max for black or white. 5. **Save a hue ramp** Under Generate Suggestions, set Hue steps and Contrast in the settings, then click Save Hue Ramp. The steps are added below the color as new entries. ## Tips - Changes you make to the base color in the panel are saved to the list automatically. - Instant Design System in the ••• menu generates a full palette with brand, semantic and neutral ramps, but it replaces your current list. Click + in its bar to keep a snapshot first. ## Result Color pairs you know are readable, and ramps of related colors in your list. ## If something goes wrong - **The details sheet says "WCAG Only".** -> The full analysis could not run for this pair, so only the WCAG ratio is shown. ## Common 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. ## Related guides - [Clean up and rename a messy color palette](https://raiken.io/kb/colorextractly-classic/colorextractly-classic-clean-and-rename): Use Magic Clean to merge colors that are the same or nearly the same, then Rename to give every color a consistent name from a template. - [Turn your color list into a sheet, Figma styles and variables](https://raiken.io/kb/colorextractly-classic/colorextractly-classic-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. --- Source: https://raiken.io/kb/colorextractly-classic/colorextractly-classic-check-contrast (Color Extractly Classic help centre). Reviewed: 2026-10-30. --- # Clean up and rename a messy color palette > Use Magic Clean to merge colors that are the same or nearly the same, then Rename to give every color a consistent name from a template. ## Goal Turn a long list of almost-identical colors with random names into a short palette with tidy, predictable names. ## Before you start - A color list in Color Extractly Classic. ## Steps 1. **Open Magic Clean** Click Magic Clean above the list and choose Combine by: Similar Color Codes (the default) merges colors that are close to each other; Same Color Code merges exact matches. 2. **Set the threshold and reduce** For similar colors, move the threshold slider (1 to 255, 10 to start): higher merges more. Click Reduce. Merged colors add up their usage counts. ![Magic Clean menu: Combine by Similar Color Codes, threshold slider at 10, Undo and Reduce.](https://raiken.io/assets/kb/colorextractly-classic/colorextractly-classic-clean-and-rename/magic-clean.png) 3. **Open Rename** Click Rename and pick a preset under Rename to, such as Generated color names, Hex codes or Name + 2-digit index. ![Rename menu: Rename to Generated color names, template $name:kebab-$count, the tokens and modifiers listed.](https://raiken.io/assets/kb/colorextractly-classic/colorextractly-classic-clean-and-rename/rename.png) 4. **Adjust the template** Edit Using template, for example $name:kebab-$count. Click the tokens to insert them: $name, $hex, $rgb, $hsl, $full, $path, $count, $n, $nn, with :lower, :UPPER, :kebab or :snake. 5. **Run it** Click Run Rename. Colors are grouped by hue, such as Blue or Green, and named from the template, always starting with --, for example --blue-100, --blue-200. 6. **Undo if needed** Click Undo in Magic Clean or Rename to go back one step; up to 20 steps are kept. ## Tips - $count counts in hundreds across the whole list (100, 200, 300 …); use $n or $nn for 1, 2, 3 or 01, 02, 03. - Lock a color with its lock button to keep it when you regenerate a palette. ## Result A shorter palette where every color has a clear, consistent name. ## If something goes wrong - **Rename replaced my good names too.** -> Rename names every color from its hue and the template. Click Undo, then rename only after you are happy with the list, or edit single names by clicking them. - **Same Variable Name merged colors with different names.** -> That option currently merges by color code, like Same Color Code. Use Undo if the result is not what you wanted. ## Common questions ### 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 ×. ## Related guides - [Extract colors from CSS or any code](https://raiken.io/kb/colorextractly-classic/colorextractly-classic-extract-from-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. - [Turn your color list into a sheet, Figma styles and variables](https://raiken.io/kb/colorextractly-classic/colorextractly-classic-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. --- Source: https://raiken.io/kb/colorextractly-classic/colorextractly-classic-clean-and-rename (Color Extractly Classic help centre). Reviewed: 2026-10-30. --- # Export colors as CSS, Tailwind, JSON, iOS or Android tokens > Click Code Tokens, choose an output format and a naming pattern, then copy or download the file. ## Goal Hand your palette to developers in the format their code uses. ## Before you start - A color list in Color Extractly Classic. ## Steps 1. **Open Code Tokens** Click Code Tokens below the list. The export window opens and shows the colors as CSS right away. ![Export window: Output CSS, Naming $full with pattern chips, the colors as CSS custom properties, Copy.](https://raiken.io/assets/kb/colorextractly-classic/colorextractly-classic-export-code-tokens/code-tokens.png) 2. **Choose the format** Pick the output: CSS, JSON, SCSS, LESS, ESM, CJS, Tailwind, Android XML, iOS Swift or Web Tokens (DTCG). 3. **Choose the names** Keep $full to use each color's name, or pick a pattern such as Tailwind, BEM or Name + Index. Count base and Count step set the numbers that $count produces. 4. **Copy or download** Click Copy, or Download to save a file such as tokens.css, tailwind.config.js, colors.xml or Tokens.swift. Regenerate (Ctrl/Cmd+Enter) refreshes the output after a change. ## Tips - Semi-transparent colors are written as rgba(), the rest as #RRGGBB. - The export remembers your format and naming pattern for next time. ## Result Your palette as code, ready to paste into a project. ## If something goes wrong - **My JSON file does not parse.** -> On the free plan, a note line about the 12-color limit is added at the top of the output. Delete that line, or export with Pro. - **SCSS Map gives plain CSS.** -> SCSS Map is not available for a color list yet; use SCSS for $variables. - **Gradients are missing.** -> Gradients are not exported as code tokens. ## Common questions ### 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. ## Related guides - [Turn your color list into a sheet, Figma styles and variables](https://raiken.io/kb/colorextractly-classic/colorextractly-classic-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. - [Extract colors from CSS or any code](https://raiken.io/kb/colorextractly-classic/colorextractly-classic-extract-from-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. --- Source: https://raiken.io/kb/colorextractly-classic/colorextractly-classic-export-code-tokens (Color Extractly Classic help centre). Reviewed: 2026-10-30. --- # 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. ## Goal Turn the colors in a stylesheet, a token file or a brand document into a palette you can clean up and bring into Figma. ## Before you start - Color Extractly Classic installed from Figma Community. - The code or text with the colors, copied to the clipboard. ## Steps 1. **Paste the code** Open Color Extractly Classic. On the Text tab, paste your code into the box. ![Text tab with a Fjordlight :root block of CSS colors pasted in and Extract all Colors below.](https://raiken.io/assets/kb/colorextractly-classic/colorextractly-classic-extract-from-code/paste-code.png) 2. **Extract** Click Extract all Colors. The list shows every color found, with "Colors found:" and the count above it. ![Color list: Colors found:12 with --color-action, --ember, --fjord-blue and their hex codes.](https://raiken.io/assets/kb/colorextractly-classic/colorextractly-classic-extract-from-code/color-list.png) 3. **Check the names** Each color is named after the word right before it, so --brand: #123456 becomes --brand and background-color: #fff becomes background-color. The same name with the same color is counted once with its number of uses. 4. **Work with the list** Type in Filter Colors ... to search by name or code, use the filter icon to sort or show values as HEX, RGB or HSL, and click a swatch to copy its value. ## Tips - Gradients in the code, such as linear-gradient(...), become one list item each, named like linear gradient 1. - The list is not saved when you close the plugin, so add the colors to Figma or export them before you leave. ## Result A named list of the colors in your code, ready to clean, rename and turn into styles, variables or tokens. ## If something goes wrong - **Some colors are missing.** -> Classic reads HEX (#RGB, #RGBA, #RRGGBB, #RRGGBBAA), comma-separated rgb()/rgba() and hsl()/hsla(), and CSS gradients. It skips named colors such as red, oklch(), lab(), space syntax like rgb(0 0 0 / 50%) and var() references. Convert those to HEX or comma rgb() first. - **"No colors found. Please check your input."** -> Nothing in the text matched a supported color format. Check the formats above. - **Many colors are all called color.** -> Plain CSS rules like color: #333 name the color after the property. Use Rename to give them proper names. ## Common questions ### 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. ## Related guides - [Clean up and rename a messy color palette](https://raiken.io/kb/colorextractly-classic/colorextractly-classic-clean-and-rename): Use Magic Clean to merge colors that are the same or nearly the same, then Rename to give every color a consistent name from a template. - [Export colors as CSS, Tailwind, JSON, iOS or Android tokens](https://raiken.io/kb/colorextractly-classic/colorextractly-classic-export-code-tokens): Click Code Tokens, choose an output format and a naming pattern, then copy or download the file. --- Source: https://raiken.io/kb/colorextractly-classic/colorextractly-classic-extract-from-code (Color Extractly Classic help centre). Reviewed: 2026-10-30. --- # 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. ## 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. ![Selection tab: Fill on, Text and Stroke off, four frames listed such as Trail card and Checkout flow.](https://raiken.io/assets/kb/colorextractly-classic/colorextractly-classic-extract-from-figma/selection.png) 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. ![Image tab with a mountain poster in blue, green, orange and sand loaded, Extract all Colors below.](https://raiken.io/assets/kb/colorextractly-classic/colorextractly-classic-extract-from-figma/image.png) 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. ![Figma tab: Extract from Figma File with Color Styles and Color Variables both switched on.](https://raiken.io/assets/kb/colorextractly-classic/colorextractly-classic-extract-from-figma/figma.png) 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. ## Common questions ### 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. ## Related guides - [Extract colors from CSS or any code](https://raiken.io/kb/colorextractly-classic/colorextractly-classic-extract-from-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. - [Turn your color list into a sheet, Figma styles and variables](https://raiken.io/kb/colorextractly-classic/colorextractly-classic-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. --- Source: https://raiken.io/kb/colorextractly-classic/colorextractly-classic-extract-from-figma (Color Extractly Classic help centre). Reviewed: 2026-10-30. --- # 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. ## Goal Bring an extracted or generated palette into Figma so you can use it in designs. ## Before you start - A cleaned and named color list in Color Extractly Classic. ## Steps 1. **Render the sheet** Click Render Colors to Figma. A frame called Sheet - Extracted Colors appears with a card per color (swatch, name, rgba, HEX and uses), grouped by the first word of the name. ![Color list with Cancel, •••, Code Tokens and Render Colors to Figma in the bar below it.](https://raiken.io/assets/kb/colorextractly-classic/colorextractly-classic-styles-and-variables/color-list.png) 2. **Add styles** In the window that follows, "Are you happy with the colors?", click + next to Add as style(s). Local color styles are created; each - in a name becomes a / folder, and a style with the same name is overwritten. ![Dialog Are you happy with the colors? with a + button for Add as style(s) and one for Add as variable(s).](https://raiken.io/assets/kb/colorextractly-classic/colorextractly-classic-styles-and-variables/render-dialog.png) 3. **Add variables** Click + next to Add as variable(s). Color variables are created in a collection called Colorly, in its first mode; --brand-primary-500 becomes Brand/primary/500. 4. **Drop single colors** To place just one color, drag its row onto the canvas, or use its Send to canvas button. A card for that color appears. 5. **Apply a color to layers** Select layers and click a row's Link this color to selection button. Double-click it to choose Fill, Stroke or Fill & Stroke. Linked layers follow later changes to that color while the plugin stays open. ## Tips - Gradients become gradient styles, but are skipped as variables. - On the free plan, Render Colors to Figma runs 4 times a day and draws the first 12 colors, and dropping single colors onto the canvas works 6 times a day. Pro removes these limits. ## Result Your palette on the canvas and in Figma as color styles and variables. ## If something goes wrong - **Running Add as variable(s) again created copies ending in -1.** -> Existing variables are not updated; new ones with a suffix are created. Delete the old ones in the Colorly collection first, or rename the collection before you add again. - **A style was created without a color.** -> Colors that came from the Image tab or were added with Start from Scratch or + Add New Color can create empty styles. Add those colors as variables, or set the style's color by hand. - **My renamed color kept its old name as a style or variable.** -> Names you type into a row are not used for styles, variables and code tokens when the color already had a variable name. Rename with Run Rename instead, which sets both. - **Semi-transparent colors became solid.** -> The sheet and variables use the color without transparency. Styles keep it. ## Common questions ### 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. ## Related guides - [Export colors as CSS, Tailwind, JSON, iOS or Android tokens](https://raiken.io/kb/colorextractly-classic/colorextractly-classic-export-code-tokens): Click Code Tokens, choose an output format and a naming pattern, then copy or download the file. - [Clean up and rename a messy color palette](https://raiken.io/kb/colorextractly-classic/colorextractly-classic-clean-and-rename): Use Magic Clean to merge colors that are the same or nearly the same, then Rename to give every color a consistent name from a template. --- Source: https://raiken.io/kb/colorextractly-classic/colorextractly-classic-styles-and-variables (Color Extractly Classic help centre). Reviewed: 2026-10-30.