# ECharts Theme Token Extractor

Extract design tokens — colors, numbers, font sizes and strings — from an ECharts theme JSON and export them straight into your design system. Paste a theme object (the kind registered via echarts.init(dom, themeName)) and the tool walks every leaf, tagging each color (with optional named/rgb → hex normalization), spacing number, font size and string, then emits clean CSS variables, a Tailwind theme.extend config, Style Dictionary tokens.json, or SCSS variables. Bridges the gap between an ECharts visualization theme and Figma/CSS/Tailwind design tokens without copying each value by hand.

> Canonical page: https://elysiatools.com/en/tools/echarts-theme-token-extractor

- **Category:** Design

- **Keywords:** echarts, theme, design tokens, css variables, tailwind, style dictionary, figma, design system, color palette, extract, json, visualization, chart theme, scss, token bridge

## Overview

A bridge from ECharts visualization themes to your design system:

1. Paste an ECharts theme JSON — the object you register and pass to echarts.init(dom, themeName). It can be the compact form (just a "color" array) or a full theme with series/axis/textStyle.
2. The extractor walks every leaf value and tags it: colors (#hex, rgb()/rgba(), named colors), numeric spacing/sizes, font-size strings (12px, 1.2rem) and plain strings. Booleans, formatters and z-levels are filtered out.
3. Optionally normalize colors: convert named colors and rgb()/rgba() to hex so every color token is uniform.
4. Pick the output format and a token prefix:
   - CSS variables → a :root { --prefix-…: …; } block you can drop into a stylesheet.
   - Tailwind → a theme.extend { colors, spacing, fontSize } object for tailwind.config.js.
   - Style Dictionary → a nested tokens.json (each token carries value + type) for the Style Dictionary pipeline.
   - SCSS → $prefix_…: …; variables.
5. The token table shows each extracted token with its kind, a color swatch where applicable, and the source path in the theme object, so you can audit the extraction before trusting it.

Offline and deterministic: pure JSON walk, no external dependency.

## Inputs

- **ECharts theme JSON** (textarea): { "color": \["#5470c6", "#91cc75", "#fac858"\], "backgroundColor": "#ffffff", "textStyle": { "fontSize": 12, "color": "#333" } }
- **Output format** (select)
- **Token prefix** (text): e.g. chart (→ --chart-color-1)
- **Color normalization** (select)

## When to use

- When you need to synchronize chart visualization styles with your main application design system.
- When migrating an existing ECharts theme configuration into Tailwind CSS config files or CSS custom properties.
- When auditing or documenting the design tokens used across different chart themes in a centralized Style Dictionary pipeline.

## How it works

- Paste your ECharts theme JSON object into the input area.
- Select your desired output format, such as CSS variables, Tailwind theme extensions, Style Dictionary JSON, or SCSS.
- Configure optional settings like token prefixes and color normalization to convert named or RGB colors to HEX.
- Copy the generated token output or inspect the extracted tokens in the interactive audit table.

## Use cases

- Exporting ECharts color palettes to CSS custom properties for unified theme styling.
- Integrating chart typography and spacing rules into a Tailwind CSS configuration.
- Generating Style Dictionary tokens from visualization themes to maintain a single source of truth.

## Frequently asked questions

### What formats can I export the extracted tokens to?

You can export tokens as CSS variables, Tailwind config extensions, Style Dictionary JSON, or SCSS variables.

### Can this tool normalize color formats?

Yes, you can choose to normalize named colors and RGB/RGBA values into standard HEX format.

### What types of values does the extractor capture?

It extracts colors, numeric spacing, font sizes, and plain strings while filtering out booleans, formatters, and z-levels.

### Does this tool send my theme data to a server?

No, the extraction runs entirely in your browser using local JSON parsing.

### How does the prefix option work?

The prefix is prepended to the generated token names, helping prevent naming collisions in your stylesheets or Tailwind config.

## Related tools

- [Image Palette to Design Tokens](https://elysiatools.com/en/tools/image-to-design-tokens): Extract a dominant color palette from an image (k-means clustering), then export it as CSS variables, SCSS variables, a Tailwind config, or JSON design tokens — with named colors and an auto-generated shade scale for each
- [JSON Key Extractor](https://elysiatools.com/en/tools/json-key-extractor): Extract all keys from JSON objects with multiple output formats. Perfect for analyzing JSON structure, documentation generation, and understanding complex nested objects.
- [Range Chart Generator](https://elysiatools.com/en/tools/range-chart-generator): Create range charts to visualize min-max value ranges with median markers and outlier detection
- [BOM Character Remover](https://elysiatools.com/en/tools/data-bom-remover): Remove BOM (Byte Order Mark) characters from text and file content. Perfect for cleaning up text files that have encoding issues, fixing CSV imports, and preparing data for processing. Features: - Detect and remove UTF-8 BOM (EF BB BF) - Detect and remove UTF-16 BOM (FE FF or FF FE) - Detect and remove UTF-32 BOM (00 00 FE FF or FF FE 00 00) - Support multiple input formats - Visual BOM character display - Detailed detection report - Support for batch text processing Common Use Cases: - Fix CSV file import errors - Clean up text file encoding issues - Prepare data for JSON parsing - Fix XML parsing problems - Resolve API data encoding conflicts - Standardize text data format
- [Text Pipeline Builder](https://elysiatools.com/en/tools/text-pipeline-builder): Run a portable text-cleaning recipe and inspect every step, diff, timing, and character change.
- [QR Code Decoder](https://elysiatools.com/en/tools/qr-code-decoder): Decode QR codes from images and extract the contained text or URLs
- [Sports Data JSON Visualizer](https://elysiatools.com/en/tools/sports-data-json-visualizer): Paste a JSON payload from any sports API (ESPN, TheSportsDB, balldontlie, football-data.org, api-sports.io) and get it rendered as a clean scoreboard with winners highlighted and game statuses.
- [Bulk Email Extractor](https://elysiatools.com/en/tools/bulk-email-extractor): Extract all email addresses from input text, articles, web source code, or mixed content. Supports deduplication and export to JSON.

## Samples

- [JWT Samples](https://elysiatools.com/en/samples/jwt-samples): Comprehensive JWT examples from basic token structure to advanced security implementations
- [Terraform Plan JSON Samples](https://elysiatools.com/en/samples/terraform-plan-json-samples): Sample Terraform plan JSON files exported from terraform show -json style payloads for dependency visualization and change review
- [Distributed Tracing Samples](https://elysiatools.com/en/samples/distributed-tracing-samples): Comprehensive distributed tracing examples using Jaeger, OpenTelemetry, and other modern observability tools for microservices architecture
- [PDF Samples](https://elysiatools.com/en/samples/pdf-samples): Generated PDF samples from tools dated 2026-02-01 to 2026-02-10

## Related content

- [JSON Interchange and Format Translation Tools](https://elysiatools.com/en/hubs/json-convert): Compare JSON conversion tools for CSV, YAML, TOML, GraphQL, XML, Markdown, Excel, BSON, EDN, and related structured formats in one hub.
- [Text Case, Encoding, and Normalization Conversion Tools](https://elysiatools.com/en/hubs/text-convert): Compare text case conversion, character-width conversion, encoding conversion, quoted-printable handling, and inline text normalization tools in one hub.
- [JSON Inspection, Diff, and Transformation Tools](https://elysiatools.com/en/hubs/json-utility): Compare JSON formatting, diffing, path inspection, schema validation, merging, transformation, and export tools in one hub for API and data workflows.
- [Text Tools](https://elysiatools.com/en/hubs/text-utility): Explore 33 text tools for utility workflows and compare closely related utilities quickly.