直接答案
色彩系统构建器可在浏览器本地将不可变的品牌源颜色推演为 50–950 原始色阶，并映射为可编辑的浅色与深色语义角色，全程零数据上传。
如何使用此工具
1
输入品牌源颜色
粘贴 HEX、oklch() 或 color(display-p3 …) 格式色彩，并为每个源颜色分配主色、中性色或辅助家族及 400/500/600 锚点色阶。
2
创建色彩项目
生成必需的主色与中性色阶、状态色阶以及默认的浅色/深色语义映射，过程中严格保持锁定锚点不变。
3
编辑与实时预览
微调色阶各档或语义映射，在浅色与深色模式下即时预览按钮、卡片、表单与状态组件的视觉效果。
锁定锚点与分层语义架构
品牌源颜色在指定色阶上作为精确锚点保持不变。原始色阶每族包含 50–950 各档基色。语义角色（背景、表面、文本、主操作、反白文字、边框、聚焦与状态角色）在浅色与深色主题下分别引用原始色阶，确保工程语义与底层色板彻底解耦。
- 无法解析的 var()、相对颜色语法与 color-mix() 将被直接拦截并提示明确修复建议。
- 主色与中性色阶为必选项；辅色与强调色可选；成功、警告与危险状态色阶默认完整具备。
- 全套解析与色阶生成均在浏览器本地内存运行，支持本地自动保存，无需登录账号。
实用示例
品牌蓝核心色彩系统
输入： 源输入：#2563eb 作为 Primary @ 500 锚点
输出： 完整 Primary 50–950 色阶 + 浅深模式语义角色（primary、on-primary、focus），就绪待送检
仅需一个品牌主色即可生成标准交付系统，无需使用简陋且割裂的单功能转换工具。
限制
- 不支持未解析的 CSS 变量或动态 color-mix()，请输入具体的 CSS Color 4 标准色彩值。
- 美学色阶建议属于启发式辅助参考，不构成法定无障碍强制认证。
常见问题
无需导出也可以直接进入检查器吗？
可以。共用的工具孤岛在内存中维护同一份色彩系统文档，切换阶段无需页面跳转或重新导入。
色彩系统构建器会把品牌色上传到服务器吗？
绝对不会。所有颜色、色阶与工程文件均保存在本地内存与浏览器的 LocalStorage 中，不会向任何服务器发送数据。
键盘导航如何跨阶段工作？
使用阶段标签栏即可在构建器、检查器与令牌生成器之间无缝切换，焦点状态清晰可见，且切换阶段不会改变页面规范 URL。
权威技术标准与参考文献
- W3C CSS Color Module Level 4 ↗ — Authoritative syntax for HEX, rgb(), hsl(), oklch(), and color(display-p3 …).
- W3C Web Content Accessibility Guidelines (WCAG) 2.2 ↗ — Accessibility baseline referenced when Builder previews contrast-sensitive semantic roles.