Elysia Tools
导航
Design
输入一个主色 Hex，自动生成主色、辅助色、中性色和语义化设计 token，并输出 CSS 变量与 Style Dictionary JSON
详情
输入一个主色 Hex 后，工具会自动推导品牌色阶、辅助色阶和可选的中性色阶，并生成一套适合设计系统的语义 token。
填写说明：
输出包括：
执行
填写表单、运行工具，并在同一页面查看结果。
案例
相关内容
等待运行
工具使用指南
颜色 Token 级联生成器是一款专为 UI 设计师和前端开发者打造的工具，只需输入一个品牌主色 Hex 值，即可自动推导出完整的色阶体系、辅助色、中性色以及语义化 Token，并直接导出为 CSS 变量或 Style Dictionary JSON 格式，极大地简化了设计系统色彩规范的搭建流程。
背景
正在为一个企业级 SaaS 平台设计 UI Kit，需要一套严谨的色彩梯度。
问题
手动计算 10 个梯度的色阶非常耗时，且难以保证辅助色与主色的视觉平衡。
如何使用
输入主色 #3b82f6，选择“互补色”策略并勾选“包含中性色阶”。
{"primaryHex": "#3b82f6", "accentStrategy": "complementary", "includeNeutralScale": true}结果
获得了一套完整的品牌蓝、互补橙以及配套的中性灰色系，包含 50-900 色阶及语义 Token。
背景
需要在 Web 和移动端同步色彩规范，避免硬编码颜色值。
问题
颜色数值散落在各处难以维护，需要一种标准化的 JSON 格式进行分发。
如何使用
输入主色 #8b5cf6，生成后直接复制 Style Dictionary JSON 内容。
{"primaryHex": "#8b5cf6", "accentStrategy": "analogous", "includeNeutralScale": true}结果
导出的 JSON 文件被直接引入 Style Dictionary 流程，自动编译为各端所需的色彩配置文件。
支持互补色（complementary）、邻近色（analogous）和分裂互补色（split-complementary）三种策略。
每个色系都会生成从 50 到 900 共 10 个梯度的色阶，满足各种 UI 场景需求。
语义化 Token 是指将颜色赋予特定用途的名称，如 primary、text-muted 或 bg-canvas，而非仅使用颜色数值。
可以，导出的 JSON 遵循 Style Dictionary 标准格式，可直接集成到自动化构建流程中。
系统会根据主色的色相自动推导带有微弱冷暖倾向的中性色，以保证视觉上的和谐统一。