大号界面

品牌主色配色生成器

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

配色设置

先设定品牌主色，再确定配色结构，最后在方向成立后再做细调。

01设定品牌主色

02选择配色结构

03校准落地强度

设定品牌主色

从品牌主色开始。支持直接输入 HEX、rgb(r, g, b)，也可以使用原生取色器。

当前主色

#0058BE

主色输入

建议先输入品牌主色，再选择配色关系，最后用亮度、饱和度和主色权重做整体校准。

选择配色结构

先确定颜色关系，再细调参数。这一步决定整体是克制、柔和、丰富还是高对比。

配色规则

当前方向单色

更适合后台、SaaS 和阅读密度较高的产品界面。

校准落地强度

只有当配色方向已经成立时，再用亮度、饱和度和主色权重做交付层微调。

亮度50%

饱和度85%

主色权重中

亮度50%

饱和度85%

主色权重中

当前微调状态

建议先把结构调顺，再使用随机变体。它会探索邻近方案，但不会推翻当前策略。

可用性验证

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

审计状态当前配色已经接近可上线的可读性标准

正文和主按钮都通过了基础对比检查。

AAA正文文字对比度 15.14:1

正文阅读安全，可以承担设置页、表格区和说明文本。

AA主按钮对比度 6.71:1

主按钮动作成立，适合主要 CTA 和高优先级操作。

主要风险主要风险较低，但复杂状态色仍需在真实界面里继续验证。

建议动作可以继续看预览与色盲模拟，再确认是否进入导出。

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

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

当前方案结论

这套方案已经接近可交付的品牌系统

当前风格稳定、克制、系统化

适用场景适合 SaaS 产品、品牌官网和日常产品界面

主要风险当前风险较低，但状态色仍需结合具体界面验证。

下一步建议继续查看双预览和色盲模拟，确认场景是否成立后再导出。

配色方案结果

单色

如何阅读这套结果

建议分两层读结果：先判断品牌识别色是否成立，再判断界面结构色是否足够稳定，避免高存在感颜色直接进入阅读区。

Token 概览7

语义 Token

当前方向单色

中

当前主色#0058BE

角色定位

核心品牌色

Primary、Secondary 和 Accent 负责建立品牌识别、操作重点和视觉节奏。

primary主色

#0058BD

品牌主视觉与主要按钮

推荐文字色: #FFFFFF

语义 Token: color.primary

RGB 0, 88, 189

HSL 212°, 100%, 37%

secondary辅助色

#2D5D95

辅助功能区与次级组件

推荐文字色: #FFFFFF

语义 Token: color.secondary

RGB 45, 93, 149

HSL 212°, 54%, 38%

accent强调色

#14447B

高亮动作、标签和信号色

推荐文字色: #FFFFFF

语义 Token: color.accent

RGB 20, 68, 123

HSL 212°, 72%, 28%

界面结构色

Surface、Background、Text 和 Muted 决定页面是否稳定、易读、可扩展。

surface表面色

#F9FAFA

卡片、面板与输入容器

推荐文字色: #191B23

语义 Token: color.surface

RGB 249, 250, 250

HSL 180°, 9%, 98%

background背景色

#EAEDF0

整体页面底色

推荐文字色: #191B23

语义 Token: color.background

RGB 234, 237, 240

HSL 210°, 17%, 93%

text文本色

#1D232A

正文阅读与高密度信息

推荐文字色: #FFFFFF

语义 Token: color.text

RGB 29, 35, 42

HSL 212°, 18%, 14%

muted静默色

#617489

弱化说明和分割信息

推荐文字色: #FFFFFF

语义 Token: color.muted

RGB 97, 116, 137

HSL 212°, 17%, 46%

场景预览

不要只看色卡，用真实界面和品牌场景判断这套方案

同一套品牌色可以同时适合产品界面和宣传页面，也可能只适合其中一种，这正是双预览存在的意义。

实时预览效果

用于判断这套颜色在后台、设置页、SaaS 模块和表单界面里是否稳定、清晰、易读。

tobecolor单色

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

对比度 15.14:1主色权重中

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

正文可读性AAA / 15.14:1

按钮对比AA / 6.71:1

品牌展示预览

用于判断这套颜色在官网 Hero、活动 Banner 和品牌宣传模块里是否足够有识别度和情绪张力。

tobecolor

品牌主色不仅要能生成颜色，更要能撑起真实品牌语气。

这一组预览用于判断当前方案在官网 Hero、活动 Banner 和品牌宣传模块里是否有足够识别度，同时不会显得过度刺激。

主色辅助色表面色

推荐投放适合 SaaS 产品、品牌官网和日常产品界面

导出 Tokens

建议在角色分工、可读性判断和预览场景都成立后再导出。如果正文或按钮仍不稳定，先回到 Color Analyzer 继续验证。

当前导出格式Tailwind

适合前端项目直接接入，便于快速映射语义色和主题配置。

配色规则单色

语义角色数7

品牌权重中

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

export default brandPalette;

色盲视觉模拟

重点不是看单个颜色是否好看，而是判断 Primary、Secondary、Accent 和 Surface 在不同色觉条件下是否仍然能被区分。

主色辅助色强调色表面色

原始方案

当前 Primary、Secondary、Accent 和 Surface 的原始层次关系。

红色盲 (Protanopia)

重点观察强调色和辅助色是否仍能拉开层次。

绿色盲 (Deuteranopia)

重点观察状态色和操作色是否还保留识别差异。

蓝色盲 (Tritanopia)

重点观察冷暖关系消失后，界面层级是否仍然成立。

如果强调色和辅助色在模拟后变得非常接近，界面就不应只靠颜色表达状态，还需要文字、图标或描边补充。

常见问题

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

如果目标是真实产品而不是单纯好看，应该如何选择配色规则？

如果希望系统克制、稳定，优先选单色；如果希望页面更柔和、适合内容展示，可选类似色；如果需要更强 CTA 和营销强调，可选互补；如果产品模块较多、层级更丰富，可选三角色；如果既想保留对比又不想太刺激，分裂互补通常更容易控制。

为什么页面要把品牌角色和界面结构角色分开显示？

Primary、Secondary、Accent 负责识别和强调，但它们并不适合承担所有阅读任务。把 Surface、Background、Text、Muted 单独拆出来，是为了让设计和开发更容易判断哪些颜色用于品牌表达，哪些颜色用于稳定界面结构。

如果品牌展示预览很好看，但产品界面预览显得吵，应该怎么处理？

这通常说明品牌表达层已经成立，但高存在感颜色进入了本该更克制的界面区域。处理方式通常不是推翻整套主色，而是降低主色权重、收敛辅助色强度，或者把更多界面任务交给 Surface 和 Text 角色。

什么情况下不应该立刻导出这套颜色？

不要因为色卡本身好看就直接导出。如果正文对比度还不稳定、色盲模拟后关键角色不容易区分，或者这套颜色只适合营销页却不适合产品界面，那就说明它还没有进入可交付状态。

一套生成结果能同时用于官网、产品后台和活动页面吗？

可以，但前提不是所有颜色都同强度使用，而是同一套核心 Token 在不同场景承担不同角色。产品后台更依赖 Surface 和 Text 的稳定性，官网和活动页则可以更积极地使用 Accent 和 Secondary 去放大品牌气质。