博客

高转化登陆页的色彩心理学

July 16, 2026

为什么我们的 AI 会为不同行业选择特定的调色板——以及 WCAG 对比度要求如何实际提高转化率。

颜色是访客在阅读任何文字之前最先处理的东西。它能在几毫秒内传达行业、可信度和基调。它还直接影响文本的可读性，而文本的可读性又影响人们是否会停留在页面上。

本文将解释 PAGEnza 的调色板系统的工作原理，以及我们对颜色选择施加的限制为何实际上比赋予 AI 无限自由能产生更好的结果。

让 AI “挑选好看的颜色”所带来的问题

如果你让一个 LLM 为网站选择颜色，你会得到十六进制颜色代码。有时它们搭配起来看起来不错。有时则不然。该模型没有可靠的方法来评估颜色是否真的有效——文本是否可读，调色板是否适合行业，组合是否在视觉上连贯而不是偶然的匹配。

我们在早期测试中清楚地看到了这个问题。不受限制的颜色生成产生了从优秀到完全无法使用的调色板。没有一致性。

解决方案是将颜色选择完全从 LLM 的手中移开，并构建一个保证特定属性的算法系统。

每个 PAGEnza 网站都使用精确的四种命名颜色：

ink — 主要文本颜色。始终为深色（与背景有高亮度对比度）。用于需要阅读的标题、正文和 UI 元素。

bg1 — 主要背景。通常是调色板中最浅的颜色。用于主页面背景和浅色区域。

bg2 — 次要背景。在不同区域之间创建视觉差异。必须与 bg1 具有不同的色温——如果 bg1 是暖奶油色，则 bg2 应该是冷灰色或带蓝色的白色。

accent — 品牌颜色。用于按钮、链接、高亮和装饰元素。通常是调色板中最饱和的颜色。

这种限制——四种命名角色，而不是任意的十六进制颜色代码——是调色板系统得以工作的关键。AI 从不决定颜色放在哪里；它只从预先审核的集合中选择要使用的调色板。

我们维护着 20 多个调色板组，每个组都围绕一个原型构建：

在每个组内，有多种具有不同色温、饱和度和强调色调的调色板。系统根据行业和原型选择一个组，然后从中选择一个特定的调色板。

WCAG AA 要求普通文本与背景的对比度至少为 4.5:1。大号文本需要 3:1。交互式元素与相邻颜色需要 3:1 的对比度。

我们系统中的每个调色板在包含之前都会根据这些比例进行验证。具体来说：

其效果是，每个生成的网站默认都是可读的。但还有一个次要的好处：高对比度设计转化率更高。一个清晰可见的按钮比一个融入背景的按钮获得更多点击。可访问性要求实际上也成为了转化率要求。

一个容易被忽视的细节：bg1 和 bg2 必须具有对比鲜明的色温。如果两个背景都是暖色调，交替的部分会显得单调——页面看起来像一个连续的色块，而不是不同的内容区域。

我们系统中的规则是：如果 bg1 具有暖色调（橙色/黄色方向，或暖中性色如奶油色），则 bg2 必须是冷色调（蓝色/灰色方向）。如果 bg1 是冷白色，则 bg2 可能是暖米白色。

这就是为什么即使没有沉重的分隔线或阴影，我们的各个部分也感觉很清晰——仅仅是背景色温的变化就创造了一个清晰的视觉分隔。

某些颜色选择与行业紧密相关。访客的期望是基于多年来接触同一类别网站的经验形成的。

医疗保健和健康：蓝色和绿色象征信任和平静。在这种情况下，饱和的红色和橙色会显得令人担忧。

法律和金融：深海军蓝、炭灰色、保守的灰色。明亮的强调色是可以接受的，但需要克制。俏皮的调色板会削弱可信度。

食品和酒店业：暖色调——赤陶色、琥珀色、奶油色——会激活食欲联想。冷色调的临床调色板会让人感觉不适。

科技和 SaaS：蓝色仍然占主导地位，但范围更广。电光蓝、靛蓝甚至紫罗兰色都显得科技感十足。纯黑色背景适用于开发者工具。

奢侈品和高端：关键在于克制。有限的颜色范围，近乎黑色的或深海军蓝作为主色，金色或铂金色强调色。高对比度，从不饱和。

设计指令中的原型选择将行业+业务类型映射到相应的调色板组，因此健康教练不会像律师事务所那样获得相同的调色板，即使两者都被描述为“专业”。

生成后，客户可以在 Gutenberg 中编辑他们的网站。编辑器中的颜色选择器仅显示四种品牌颜色——仅此而已。这意味着：

这种限制是故意的。客户破坏专业设计网站最常见的方式是从全光谱色轮中选择颜色。将调色板限制为四种命名颜色，在不修改代码的情况下，不可能做到这一点。