UI 配色方案怎么定 - 生成界面配色与 Design Token

🌟 UI 配色不是”选几个好看的颜色”#

一套可用的界面配色，需要分工明确：主色负责品牌与操作，背景色负责承载，文字色保证可读，边框与状态色负责区分与反馈。星点设计辅助让你输入主色，直接预览真实 UI 结构并导出代码。

🎨 一套 UI 配色的构成#

🚀 怎么用#

1. 打开设计辅助；
2. 选择或输入主色（也可从图片颜色工具取色）；
3. 调整辅助色、背景、文字、边框、状态色；
4. 在真实 UI 结构（按钮/表单/Dashboard/深浅色）中预览；
5. 导出 CSS 变量 / Design Token。

💡 深色模式#

深色模式不是把颜色简单反转：

• 背景用深灰而非纯黑（纯黑对比过强、易疲劳）；
• 主色适当降低亮度/饱和度，避免刺眼；
• 文字避免纯白，用浅灰；
• 保留足够的对比度（≥ 4.5:1）。

用对比度检测逐组核对。

🧾 导出成 Design Token#

导出的 CSS 变量可直接用：

1
:root {
2
  --color-primary: #409eff;
3
  --color-text: #1f2937;
4
  --color-bg: #ffffff;
5
  --color-border: #e5e7eb;
6
}

也可套用 Material / Tailwind / Ant Design 的命名习惯。

🔧 常见问题#

💬 总结#

UI 配色的关键是”分工”：主色、辅助色、背景、文字、边框、状态色各司其职。用设计辅助预览并导出 Token，再配合对比度检测保证可读性。

立即体验：访问 设计辅助