Product help

Color Toolkit Documentation

Use Color Toolkit to audit real design files, clean color drift safely, bind raw paints to native variables, and hand off deterministic token outputs.

Before you start

  • Select a frame, section, component, or leave nothing selected to scan the current page.
  • Start from Audit. The scan is read-only and does not mutate the document.
  • Use previews before any repair action. Styled and variable-bound paints stay out of destructive repairs by default.

Main tabs

  • Audit shows raw colors, near duplicates, style-bound paints, variable-bound paints, duplicate variables, and contrast issues.
  • Palette suggests color replacements and previews the exact fills/strokes that will change.
  • Variables creates or reuses native variables, migrates local paint styles, generates guides, and publishes optional server token snapshots.
  • Help contains click-by-click scenarios and API examples inside the plugin.

Use Cases And Click Paths

01

Audit color drift before cleanup

Use this before cleanup, design-system review, or developer handoff.

  1. 1Select the target frame, section, component, or leave the selection empty for the current page.
  2. 2Open Color Toolkit and click Audit.
  3. 3Keep Children enabled, enable Strokes if border colors matter, and set Tolerance around 10-18.
  4. 4Click Refresh.
  5. 5Review Raw Colors, Near Duplicates, Style Bound, Variable Bound, and Contrast.
  6. 6Click Focus on any issue row to inspect the affected layer.
  7. 7Click Copy MD for a readable note or Download JSON for a structured audit artifact.
You get color drift, contrast, and token coverage findings without changing the file.
02

Reduce close raw colors into a cleaner palette

Use this when several near-identical brand, gray, red, or blue colors should collapse into a smaller palette.

  1. 1Run a scan from Audit with Refresh.
  2. 2Click Palette.
  3. 3Adjust Palette Size until the suggested palette is close to the target number of colors.
  4. 4Click Suggest Replacement.
  5. 5Uncheck Apply on any replacement map row that should stay unique.
  6. 6Click Preview.
  7. 7Keep Raw enabled and leave Styled/Variable off unless detaching bindings is intentional.
  8. 8Review Dry Run, then click Confirm Replace.
Only approved raw colors in the chosen scope change, then the plugin rescans the file.
03

Bind repeated raw paints to variables

Use this when repeated raw colors should become native Figma or Pixso variables.

  1. 1Run a scan from Audit with Refresh.
  2. 2Click Variables.
  3. 3In Unbound Colors, choose New variables collection and Mode.
  4. 4Choose a naming preset: Color/FF0000, primitive/red/500, semantic/bg/default, or Custom.
  5. 5For each color row, choose Create, Use existing, or Skip.
  6. 6Keep Styled paints disabled unless style-bound paints should be detached and rebound.
  7. 7Review Assignment Dry Run.
  8. 8Click Assign Colors.
Repeated raw paints are bound to native variables without duplicating already-bound paints.
04

Migrate local paint styles toward variables

Use this when local paint styles exist but their paints are not variable-backed yet.

  1. 1Run a scan from Audit with Refresh.
  2. 2Click Variables.
  3. 3Scroll to Local Paint Styles.
  4. 4Review the summary: styles, planned paints, new variables, and reused variables.
  5. 5Check each preview row for style name, hex, and target variable.
  6. 6Click Migrate Styles when the preview is correct.
Style paints are bound to reusable or newly created variables where possible.
05

Find and document contrast issues

Use this before accessibility review, UI publication, or developer handoff.

  1. 1Select a frame or specific text/background layers.
  2. 2Open Color Toolkit and click Audit.
  3. 3Click Refresh for automatic background detection.
  4. 4For a targeted pair, select the text and background layers, then enable Pair.
  5. 5Open the Contrast rows.
  6. 6Click Focus to inspect the text layer.
  7. 7Click Note to copy the contrast note for a ticket or documentation.
  8. 8Review suggested replacement colors when they appear.
You see ratio, AA target, likely background, and accessible foreground candidates.
06

Generate a style guide and local exports

Use this after variables are ready and the team needs a handoff artifact.

  1. 1Run a scan from Audit with Refresh.
  2. 2Click Variables.
  3. 3In Variable Tokens, click Copy CSS, Copy SCSS, or Copy Tailwind.
  4. 4Use Download CSS, Download SCSS, or Download Tailwind when a file is needed.
  5. 5In Style Guide, choose Swatches or Table.
  6. 6Click Generate Guide.
  7. 7Click Generate Guide again later to update the existing guide instead of duplicating it.
The canvas gets an inspectable color guide, and developers get deterministic token output.
07

Publish private server token endpoints

Use this when developers need JSON, CSS, SCSS, or Tailwind URLs while native variables remain the source of truth.

  1. 1Run a scan and confirm local variables exist.
  2. 2Click Variables.
  3. 3Scroll to Server Tokens.
  4. 4Click Authorize if the block is locked.
  5. 5Link the plugin user to a chtools.pro account in the browser.
  6. 6Return to the plugin and click Publish Tokens.
  7. 7Click Copy JSON URL, Copy CSS URL, Copy SCSS URL, or Copy Tailwind URL.
chtools.pro stores a private authenticated snapshot for handoff while editor variables stay canonical.

Server Token API

Copied URLs from the plugin include a token query and open directly in a browser. Header-based API calls are also supported for linked plugin users; if plugin sessions are required, send X-Plugin-Session-Token too.

Check latest snapshot

Returns snapshot metadata and private format endpoints for the linked plugin user.

curl -X GET "https://chtools.pro/api/color-toolkit/tokens" \
	-H "X-Plugin-User-Id: <linked-plugin-user-id>" \
	-H "X-Plugin-User-Name: <optional-user-name>" \
	-H "X-Plugin-Platform: figma" \
	-H "X-Plugin-Slug: color-toolkit-cht"

Publish snapshot

Publishes a private server token snapshot. The plugin UI sends the full variable payload automatically.

curl -X POST "https://chtools.pro/api/color-toolkit/tokens" \
	-H "Content-Type: application/json" \
	-H "X-Plugin-User-Id: <linked-plugin-user-id>" \
	-H "X-Plugin-User-Name: <optional-user-name>" \
	-H "X-Plugin-Platform: figma" \
	-H "X-Plugin-Slug: color-toolkit-cht" \
	-d '{
		"name": "Brand Colors",
		"pluginVersion": "0.1.4",
		"platform": "figma",
		"variables": [
			{
				"id": "VariableID:primary",
				"name": "brand/primary",
				"collectionName": "Brand",
				"path": "brand/primary",
				"modeId": "default",
				"modeName": "Light",
				"hex": "#2563EB",
				"rgba": "rgba(37, 99, 235, 1)",
				"usageCount": 12,
				"values": []
			}
		]
	}'

Fetch CSS output

Fetches the latest published snapshot as CSS. Copied URLs from the plugin include a token query for browser access; API clients can also use plugin identity headers.

curl -X GET "https://chtools.pro/api/color-toolkit/tokens/css" \
	-H "X-Plugin-User-Id: <linked-plugin-user-id>" \
	-H "X-Plugin-User-Name: <optional-user-name>" \
	-H "X-Plugin-Platform: figma" \
	-H "X-Plugin-Slug: color-toolkit-cht"