# 颜色 Token 级联生成器 输入一个主色 Hex，自动生成主色、辅助色、中性色和语义化设计 token，并输出 CSS 变量与 Style Dictionary JSON > 标准页面: https://elysiatools.com/zh/tools/color-token-cascade-generator - **分类:** Design - **关键词:** design token, 颜色体系, css variables, style dictionary ## 概述 输入一个主色 Hex 后，工具会自动推导品牌色阶、辅助色阶和可选的中性色阶，并生成一套适合设计系统的语义 token。 填写说明： - 主色 Hex：品牌主色或界面主色 - 辅助色策略：选择辅助色的推导方式 - 包含中性色阶：为文本、背景和边框生成可复用的中性色 token 输出包括： - primary-50 到 primary-900 - accent-50 到 accent-900 - 可选 neutral-50 到 neutral-900 - primary、text-muted、bg-canvas 等语义 token - CSS Variables 与 Style Dictionary JSON ## 输入项 - **主色 Hex** (text): #3b82f6 - **辅助色策略** (select) - **包含中性色阶** (checkbox) ## 适用场景 - 在从零开始搭建品牌设计系统或 UI 组件库，需要定义标准色阶时。 - 需要将设计稿中的颜色规范快速转化为前端可用的 CSS 变量或 JSON 配置文件时。 - 希望基于主色自动推导互补色或邻近色，以确保界面色彩搭配的科学性与一致性时。 ## 工作原理 - 输入品牌主色的 Hex 颜色代码，作为整个色彩体系的核心基准。 - 选择辅助色生成策略（如互补色或邻近色），并决定是否包含用于背景和文字的中性色阶。 - 系统根据色彩算法自动计算并生成从 50 到 900 的级联色阶，以及 text-muted、bg-canvas 等语义化 Token。 - 实时预览生成的色彩矩阵，并一键复制 CSS 变量代码或下载 Style Dictionary 兼容的 JSON 文件。 ## 使用案例 - 为新成立的 SaaS 项目快速生成一套符合品牌调性的 CSS 变量色彩系统。 - 设计师在交付设计稿前，利用该工具生成 Style Dictionary JSON 供开发人员同步色彩规范。 - 重构旧项目时，将零散的颜色数值统一收拢为结构化的语义化 Token 体系。 ## 常见问题 ### 支持哪些辅助色生成策略？ 支持互补色（complementary）、邻近色（analogous）和分裂互补色（split-complementary）三种策略。 ### 生成的色阶包含哪些范围？ 每个色系都会生成从 50 到 900 共 10 个梯度的色阶，满足各种 UI 场景需求。 ### 什么是语义化 Token？ 语义化 Token 是指将颜色赋予特定用途的名称，如 primary、text-muted 或 bg-canvas，而非仅使用颜色数值。 ### 导出的 JSON 格式可以直接用吗？ 可以，导出的 JSON 遵循 Style Dictionary 标准格式，可直接集成到自动化构建流程中。 ### 是否可以自定义中性色的色调？ 系统会根据主色的色相自动推导带有微弱冷暖倾向的中性色，以保证视觉上的和谐统一。 ## 相关工具 - [图片调色板转设计令牌](https://elysiatools.com/zh/tools/image-to-design-tokens): 从图片中用 k-means 聚类提取主色，导出为 CSS 变量 / SCSS 变量 / Tailwind 配置 / JSON 设计令牌，并自动为每个颜色生成命名色阶 - [组织架构图生成器](https://elysiatools.com/zh/tools/org-chart-maker): 把层级 JSON 数据渲染成带姓名与职位的垂直组织架构图 - [灰度转换器](https://elysiatools.com/zh/tools/color-grayscale-converter): 将颜色转换为灰度，支持多种转换方法和强度控制 - [Data URI 生成器](https://elysiatools.com/zh/tools/data-uri-generator): 将文件转换为 Data URI（Base64 或百分号编码），用于直接在 HTML、CSS 或 Markdown 中内联图片、字体等资源 - [ECharts 主题 Token 抽取器](https://elysiatools.com/zh/tools/echarts-theme-token-extractor): 从 ECharts 主题 JSON 抽取设计 token——颜色、数字、字号与字符串——并直接导出到你的设计系统。粘贴一个主题对象（即通过 echarts.init(dom, themeName) 注册的那种），工具遍历每个叶子节点，为每个颜色（可选地将命名色/rgb 规范化为 hex）、间距数字、字号与字符串打标，然后输出干净的 CSS 变量、Tailwind theme.extend 配置、Style Dictionary tokens.json 或 SCSS 变量。在 ECharts 可视化主题与 Figma/CSS/Tailwind 设计 token 之间架桥，无需逐个手抄。 - [Figma Tokens 导出](https://elysiatools.com/zh/tools/figma-tokens-export): 粘贴 Figma / Tokens Studio 变量 JSON，导出为 Tailwind、shadcn CSS 变量、Style Dictionary 或 SCSS。通过类型推断保留颜色、间距与字体 token。 - [健身训练 PDF 生成器](https://elysiatools.com/zh/tools/fitness-workout-pdf-generator): 从 JSON 或 CSV 训练计划数据生成可打印 PDF，包含动作表格、进度格子和可选的视频二维码 - [CSV 生成 JSON-LD](https://elysiatools.com/zh/tools/json-ld-generator-from-csv): 把 CSV 或 Excel 行数据转换为适用于 Article、Product、Event 的 Schema.org JSON-LD，方便 SEO 团队直接验证 ## 示例 - [颜色代码示例](https://elysiatools.com/zh/samples/color-code): 用于验证测试的各种格式颜色代码集合（Hex、RGB、HSL、命名颜色） - [Grafana 高级应用示例](https://elysiatools.com/zh/samples/grafana-samples): 全面的 Grafana 示例，涵盖高级仪表板设计、告警配置、数据源集成和插件开发 - [二维码示例](https://elysiatools.com/zh/samples/qrcode-samples): 用于测试二维码读取和生成工具的示例二维码图像 - [Web Python 图像处理示例](https://elysiatools.com/zh/samples/web-image-processing-python): Web Python 图像处理示例，使用 PIL/Pillow 包括读取、保存、缩放和格式转换 ## 相关内容 - [色彩系统与 CSS 效果设计工作流](https://elysiatools.com/zh/hubs/design-generate): 从色板提取、配色关系、可访问性校验到 token 生成，再把 CSS 效果落到真实组件状态中。