设计系统
设计系统配色
给一个品牌色，生成主色、辅助色、强调色、语义色与中性灰阶，导出即用。
主色阶
辅助色
强调色
语义色
中性灰阶
设计系统
语义色
成功 / 警告 / 危险 / 信息用固定的语义含义，别让“红色”既表危险又表强调。
中性灰阶
界面大多由中性色构成，灰阶统一才能显得干净专业。
工具介绍与使用说明
📘设计系统从品牌色出发，自动生成主色、辅助色、强调色与语义色中性灰阶。
- 输入一个品牌色，工具自动推导主色 / 辅助色 / 强调色与中性灰阶。
- 查看每个语义色的用途说明（背景、文字、边框等）。
- 导出 CSS 变量，直接落到设计系统或组件库里复用。
使用提示
💡- 主色阶最深档用于文字、最浅档用于背景，天然和谐。
- 语义色保持固定含义，别让危险色同时承担强调用途。
- 导出 CSS 变量后，全站统一引用，改主题只改变量。