大号界面

品牌主色配色生成器

基于专业色彩理论，为您的品牌快速构建高对比度、可落地、符合无障碍标准的完整调色系统。

主色输入

支持输入 HEX 或 rgb(r, g, b)，也可以直接打开原生取色器。

主色输入

配色规则

亮度50%

饱和度85%

主色权重中

可用性验证

提示：当前主色更适合搭配推荐按钮文字使用，长篇阅读区域建议优先使用 Surface / Background 语义色。

AAA正文文字对比度 15.14:1

AA主按钮对比度 6.71:1

当前主色与推荐文字色的对比度为 6.71:1. 通过

对比度 5.71:1 相对于背景色

配色方案结果

单色

主色

#0058BD

品牌主视觉与主要按钮

RGB 0, 88, 189

HSL 212°, 100%, 37%

辅助色

#2D5D95

辅助功能区与次级组件

RGB 45, 93, 149

HSL 212°, 54%, 38%

强调色

#14447B

高亮动作、标签和信号色

RGB 20, 68, 123

HSL 212°, 72%, 28%

表面色

#F9FAFA

卡片、面板与输入容器

RGB 249, 250, 250

HSL 180°, 9%, 98%

背景色

#EAEDF0

整体页面底色

RGB 234, 237, 240

HSL 210°, 17%, 93%

文本色

#1D232A

正文阅读与高密度信息

RGB 29, 35, 42

HSL 212°, 18%, 14%

静默色

#617489

弱化说明和分割信息

RGB 97, 116, 137

HSL 212°, 17%, 46%

实时预览效果

主色 / 辅助色 / 表面色

MoreColor Studio

品牌主题启动当前系统预览

主色、辅助色和语义背景已经映射到真实组件层级，方便在进入设计系统前先判断品牌调性是否稳定。

导出 Tokens

Tailwind / CSS / JSON

export const colors = {
  primary: "#0058BD",
  secondary: "#2D5D95",
  accent: "#14447B",
  surface: "#F9FAFA",
  background: "#EAEDF0",
  text: "#1D232A",
  muted: "#617489",
};

色盲视觉模拟

主色、辅助色、强调色和表面色的视觉替代结果。

红色盲 (Protanopia)

绿色盲 (Deuteranopia)

蓝色盲 (Tritanopia)

常见问题

这不是单纯的取色卡片页，而是从品牌主色出发、能直接服务设计和开发交付的主题系统工作台。

品牌主色配色生成器如何从一个颜色生成完整系统？

生成器会先读取您的种子色，再按照选定的色彩规则推导出主色、辅助色、强调色、表面色、背景色、文本色和静默色。亮度、饱和度和主色权重滑杆用于整体校准，让结果既保留品牌方向，也更适合界面落地。

页面里的 Harmony 配色规则分别是什么意思？

单色会保留同一色相，通过明度和饱和度变化建立层级；类似色使用相邻色相，视觉过渡更柔和；互补色使用对向色相，冲突感最强；三角色将三个色相均匀分布在色轮上；分裂互补则在保留对比的同时降低纯互补的尖锐感。

为什么这个页面要展示无障碍对比度？

很多品牌主色适合做按钮或大面积背景，但并不一定适合做正文文字。页面中的对比度检查会帮助您快速判断哪些颜色组合满足 WCAG 的最低可读性要求，从而减少落地时返工。

这个生成器可以导出哪些格式？

当前支持复制整组 HEX，并导出 Tailwind 配置片段、CSS Variables 和 JSON Tokens。分享功能会把当前主色、规则和滑杆状态编码到链接里，方便团队直接查看同一套结果。