颜色 Token 级联生成器

输入一个主色 Hex，自动生成主色、辅助色、中性色和语义化设计 token，并输出 CSS 变量与 Style Dictionary JSON

输入一个主色 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

示例结果

1 个示例

从一个 SaaS 品牌蓝生成完整 token 阶梯

生成品牌色、辅助色、中性色和语义 token，适合交付给设计师或前端仓库直接使用。

Primary scale

查看输入参数

{ "primaryHex": "#3b82f6", "accentStrategy": "complementary", "includeNeutralScale": true }

主色 Hex *

辅助色策略

包含中性色阶

关键信息

分类: 设计与颜色
输入类型: text, select, checkbox
输出类型: html
样本覆盖: 4
支持 API: Yes

概览

颜色 Token 级联生成器是一款专为 UI 设计师和前端开发者打造的工具，只需输入一个品牌主色 Hex 值，即可自动推导出完整的色阶体系、辅助色、中性色以及语义化 Token，并直接导出为 CSS 变量或 Style Dictionary JSON 格式，极大地简化了设计系统色彩规范的搭建流程。

适用场景

•在从零开始搭建品牌设计系统或 UI 组件库，需要定义标准色阶时。
•需要将设计稿中的颜色规范快速转化为前端可用的 CSS 变量或 JSON 配置文件时。
•希望基于主色自动推导互补色或邻近色，以确保界面色彩搭配的科学性与一致性时。

工作原理

•输入品牌主色的 Hex 颜色代码，作为整个色彩体系的核心基准。
•选择辅助色生成策略（如互补色或邻近色），并决定是否包含用于背景和文字的中性色阶。
•系统根据色彩算法自动计算并生成从 50 到 900 的级联色阶，以及 text-muted、bg-canvas 等语义化 Token。
•实时预览生成的色彩矩阵，并一键复制 CSS 变量代码或下载 Style Dictionary 兼容的 JSON 文件。

使用场景

为新成立的 SaaS 项目快速生成一套符合品牌调性的 CSS 变量色彩系统。

设计师在交付设计稿前，利用该工具生成 Style Dictionary JSON 供开发人员同步色彩规范。

重构旧项目时，将零散的颜色数值统一收拢为结构化的语义化 Token 体系。

用户案例

1. SaaS 品牌色彩规范搭建

UI 设计师

背景原因: 正在为一个企业级 SaaS 平台设计 UI Kit，需要一套严谨的色彩梯度。
解决问题: 手动计算 10 个梯度的色阶非常耗时，且难以保证辅助色与主色的视觉平衡。
如何使用: 输入主色 #3b82f6，选择“互补色”策略并勾选“包含中性色阶”。
示例配置: {"primaryHex": "#3b82f6", "accentStrategy": "complementary", "includeNeutralScale": true}
效果: 获得了一套完整的品牌蓝、互补橙以及配套的中性灰色系，包含 50-900 色阶及语义 Token。

2. 跨平台设计系统同步

前端架构师

背景原因: 需要在 Web 和移动端同步色彩规范，避免硬编码颜色值。
解决问题: 颜色数值散落在各处难以维护，需要一种标准化的 JSON 格式进行分发。
如何使用: 输入主色 #8b5cf6，生成后直接复制 Style Dictionary JSON 内容。
示例配置: {"primaryHex": "#8b5cf6", "accentStrategy": "analogous", "includeNeutralScale": true}
效果: 导出的 JSON 文件被直接引入 Style Dictionary 流程，自动编译为各端所需的色彩配置文件。

用 Samples 测试

json

颜色代码示例

用于验证测试的各种格式颜色代码集合（Hex、RGB、HSL、命名颜色）

title token color

2026-02-01 到 2026-02-10 工具生成的PDF示例

matched family json

Terraform Plan JSON 样本

用于依赖可视化和变更审查的 Terraform plan JSON 文件样本，贴近 terraform show -json 输出结构

matched family json

从基础令牌结构到高级安全实现的全面JWT示例

matched family json

相关专题

JsonConvert工具专题

探索 100 个围绕 json 的 convert 工作流工具，快速找到相近能力。

Json 工具专题

探索 47 个围绕 json 的 utility 工作流工具，快速找到相近能力。

JsonGenerate工具专题

探索 33 个围绕 json 的 generate 工作流工具，快速找到相近能力。

JsonFormat工具专题

探索 9 个围绕 json 的 format 工作流工具，快速找到相近能力。

常见问题

支持哪些辅助色生成策略？

支持互补色（complementary）、邻近色（analogous）和分裂互补色（split-complementary）三种策略。

生成的色阶包含哪些范围？

每个色系都会生成从 50 到 900 共 10 个梯度的色阶，满足各种 UI 场景需求。

什么是语义化 Token？

语义化 Token 是指将颜色赋予特定用途的名称，如 primary、text-muted 或 bg-canvas，而非仅使用颜色数值。

导出的 JSON 格式可以直接用吗？

可以，导出的 JSON 遵循 Style Dictionary 标准格式，可直接集成到自动化构建流程中。

是否可以自定义中性色的色调？

系统会根据主色的色相自动推导带有微弱冷暖倾向的中性色，以保证视觉上的和谐统一。

API 文档

请求端点

POST /zh/api/tools/color-token-cascade-generator

请求参数

参数名	类型	必填	描述
primaryHex	text	是	-
accentStrategy	select	否	-
includeNeutralScale	checkbox	否	-

响应格式

{
  "result": "Processed HTML content",
  "error": "Error message (optional)",
  "message": "Notification message (optional)",
  "metadata": {
    "key": "value"
  }
}

HTML: HTML

AI MCP 文档

将此工具添加到您的 MCP 服务器配置中：

{
  "mcpServers": {
    "elysiatools-color-token-cascade-generator": {
      "name": "color-token-cascade-generator",
      "description": "输入一个主色 Hex，自动生成主色、辅助色、中性色和语义化设计 token，并输出 CSS 变量与 Style Dictionary JSON",
      "baseUrl": "https://elysiatools.com/mcp/sse?toolId=color-token-cascade-generator",
      "command": "",
      "args": [],
      "env": {},
      "isActive": true,
      "type": "sse"
    }
  }
}

你可以串联多个工具，比如：`https://elysiatools.com/mcp/sse?toolId=png-to-webp,jpg-to-webp,gif-to-webp`，最多20个。

如果遇见问题，请联系我们：[email protected]