UI 配色方案:每种颜色能做什么,不能做什么
十二套 UI 配色方案,附精确的十六进制色值,按角色逐一测试。哪些强调色既能当按钮又能当链接,哪种灰色文字在带色调的卡片上会失败,以及为什么浅色强调色只能填充,不能写字。
UI 配色方案不是一组好看的颜色。它是一组角色,每种颜色能胜任一些工作,却干不了另一些。这里有十二套配色,每套都针对一个最容易出错的角色做了测试,并附上所有十六进制色值。
UI 配色中的三个角色
墨色负责书写。它是每一行文字的颜色,所以在表面上必须足够深,比如 Indigo Mist #EEF0FB 上的 Ink Navy #141238。强调色撑不住时,链接也用它。
表面色负责承托。它是其他一切背后的页面或卡片。它不一定是白色,你选的色调会改变其他每种颜色的表现。
强调色负责点按。它是那个在说“这里能点”的颜色。听起来只有一份工作,下一节会告诉你其实是两份。
强调色有两份工作
在按钮上,标签必须在强调色上看得清,按钮也必须从页面中凸显出来。在一句话里,同一个强调色是链接,而链接就是文字,所以它必须在同一个页面上可读。两份工作用的是同一组颜色,但第二份的门槛更高。
这意味着一个强调色可以是好按钮,却是糟糕的链接。Sky 和 Coral 正好落在这个缺口里。Indigo 和 Berry 则两关都过。
Indigo
Indigo #4338CA,白色标签:通过
Indigo 在 Indigo Mist #EEF0FB 上作链接:通过
Ink Navy #141238 作链接:通过
Indigo 既能当按钮,也能当链接。一种颜色,两份工作,无需修补。
Berry
Berry #A61E4D,白色标签:通过
Berry 在 Berry Milk #FBEAF0 上作链接:通过
Deep Berry #2A0A18 作链接:通过
Berry 同样如此:按钮上是白色标签,在浅粉色表面上链接清晰可读。
Sky
Sky #248AE4,Harbor Ink 标签:通过
Sky 在 Sky Wash #EAF4FC 上作链接:失败
Harbor Ink #021828 作链接:通过
Sky 是好按钮,却是难读的链接。把它留给按钮,链接用 Harbor Ink 并加下划线。
Coral
Coral #E85446,Burnt Clay 标签:通过
Coral 在 Coral Milk #FDEEEB 上作链接:失败
Burnt Clay #290E0A 作链接:通过
Coral 也是同样的分裂。按钮醒目可见,链接却消失在 Coral Milk 里。
强调色只留给按钮
解决办法很便宜。Sky 和 Coral 只做按钮,链接用墨色并加下划线。同一句话的两种写法如下。
密码
忘记密码?
✕ Sky 作链接:难以阅读
密码
忘记密码?
✓ Harbor Ink 作链接:轻松阅读
带色调卡片上的灰色文字
次要文字通常是约 65% 的墨色。在白色上,这四套配色都很好读;在很浅的表面上变化也很小。但在真正有色调的表面上,它可能掉到及格线以下。
所以要在它实际所在的表面上测试,而不是在白色上。在色调较强的表面上,把灰色提到 70% 就能恢复。
Red Panda
Sombre Night
Red Panda
#636772 在 Sugar Milk #FAF7F0 上:通过
同样 65% 混合的 #656A77 在白色上:通过
Sugar Milk 几乎是白色,所以灰色几乎没变化。在卡片上和白色上都通过。
Warm Purple
English Walnut
Warm Purple
#606146 在 Oh Pistachio #BCDBA4 上:失败
提到 70%,#59573F:通过
Oh Pistachio 是真正的色调。在白色上能过的同一种灰色,在这里掉到了线下,提到 70% 就救回来了。
Mango
Jedi Night
Mango
#5E6C68 在 Heart of Ice #F2F5FA 上:通过
同样 65% 混合的 #626F6A 在白色上:通过
Heart of Ice 是浅淡的冷色调,所以灰色撑得住。
Viridian
Midnight Dreams
Viridian
#535D71 在 Digital Lavender #D3CAEE 上:失败
提到 70%,#495467:通过
Digital Lavender 的色调足够强,同样的灰色会失败。提到 70%,卡片又能读了。
浅色强调色负责填充,从不负责书写
浅色强调色是可爱的填充色,却是无望的文字色。在各自的页面上,这四种都不能当文字读。把同一种颜色变成填充就行得通,前提是你为它选对了文字。
Purple Estate
Blue Horizon #72AFCC 在 Sunwashed Paper #F5EDCE 上作文字:失败
Purple Estate #58287F 在 Blue Horizon 上:仅限大字
Purple Estate 在 Sunwashed Paper 上:通过
浅蓝色在纸色上作文字会失败。作为填充,它配 Purple Estate,用于大号日期可以,小字不行。
Blue Horizon
Blue Horizon #2FA4D7 在 Desert Cream #F5E9D8 上作文字:失败
Cocoa Noir #3E2C23 在 Blue Horizon 上:通过
Cocoa Noir 在 Desert Cream 上:通过
更亮的蓝色在 Desert Cream 上作文字同样失败。作为填充,它能轻松承载 Cocoa Noir。
Herb Garden
Herb Garden #BCD9A2 在 Sun Linen #FEFFD3 上作文字:失败
Red Monarch #A82323 在 Herb Garden 上:通过
Red Monarch 在 Sun Linen 上:通过
四种里在各自页面上最淡的一个。把 Red Monarch 放在绿色上,数字就清晰可读。
Nordic Sky
Nordic Sky #7288AE 在 Manor Cream #EAE0CF 上作文字:失败
白色 #FFFFFF 在 Nordic Sky 上:仅限大字
Velvet Indigo #4B5694 在 Manor Cream 上:通过
Nordic Sky 只能配白色,而且只限大字,所以数字可以,小字不行。页面文字用 Velvet Indigo。
所以要检查填充色和它上面的文字,而不只是页面。如果填充色上的文字只达到大字对比度,就让它保持大号。
十二套配色一览表
| 配色 | 颜色 | 测试的角色 |
|---|---|---|
| Indigo | Ink Navy #141238, Indigo #4338CA, Indigo Mist #EEF0FB | 按钮和链接都通过 |
| Berry | Deep Berry #2A0A18, Berry #A61E4D, Berry Milk #FBEAF0 | 按钮和链接都通过 |
| Sky | Harbor Ink #021828, Sky #248AE4, Sky Wash #EAF4FC | 按钮通过,链接失败 |
| Coral | Burnt Clay #290E0A, Coral #E85446, Coral Milk #FDEEEB | 按钮通过,链接失败 |
| Red Panda | Sombre Night #121A2E, Red Panda #B54302, Sugar Milk #FAF7F0 | 灰色在卡片上通过 |
| Warm Purple | English Walnut #2E1F14, Warm Purple #812E7D, Oh Pistachio #BCDBA4 | 灰色在卡片上失败 |
| Mango | Jedi Night #0E2219, Mango #FAA828, Heart of Ice #F2F5FA | 灰色在卡片上通过 |
| Viridian | Midnight Dreams #0E222D, Viridian #007F5B, Digital Lavender #D3CAEE | 灰色在卡片上失败 |
| Purple Estate | Sunwashed Paper #F5EDCE, Blue Horizon #72AFCC, Purple Estate #58287F | 浅蓝填充,仅限大字 |
| Blue Horizon | Blue Horizon #2FA4D7, Desert Cream #F5E9D8, Cocoa Noir #3E2C23 | 填充配 Cocoa Noir 通过 |
| Herb Garden | Red Monarch #A82323, Sun Linen #FEFFD3, Herb Garden #BCD9A2 | 填充配 Red Monarch 通过 |
| Nordic Sky | Velvet Indigo #4B5694, Nordic Sky #7288AE, Manor Cream #EAE0CF | 填充配白色,仅限大字 |
数字,留给需要为选择辩护的人
每组搭配都用 WCAG 2 对比度公式,在其所处的表面上测量。这是本文中唯一带比值的表格。
| 配色 | 测试 | 比值 | 结果 |
|---|---|---|---|
| Indigo | 白色标签 / 页面上的按钮 / 页面上的链接 | 7.90:1 / 6.96:1 / 6.96:1 | 全部通过 |
| Berry | 白色标签 / 页面上的按钮 / 页面上的链接 | 7.21:1 / 6.22:1 / 6.22:1 | 全部通过 |
| Sky | 墨色标签 / 页面上的按钮 / 页面上的链接 | 5.01:1 / 3.23:1 / 3.23:1 | 通过,通过,失败 |
| Coral | 墨色标签 / 页面上的按钮 / 页面上的链接 | 4.98:1 / 3.21:1 / 3.21:1 | 通过,通过,失败 |
| Red Panda | 卡片上的 65% 灰 / 白色上 | 5.2:1 / 5.4:1 | 两者都通过 |
| Warm Purple | 卡片上的 65% 灰 / 白色上 / 70% 时 | 4.1:1 / 5.0:1 / 4.8:1 | 失败,通过,通过 |
| Mango | 卡片上的 65% 灰 / 白色上 | 5.0:1 / 5.2:1 | 两者都通过 |
| Viridian | 卡片上的 65% 灰 / 白色上 / 70% 时 | 4.2:1 / 5.1:1 / 4.8:1 | 失败,通过,通过 |
| Purple Estate | 浅色强调色作文字 / 其上最佳文字 / 页面上的墨色 | 2.05:1 / 4.31:1 / 8.83:1 | 失败,大字,通过 |
| Blue Horizon | 浅色强调色作文字 / 其上最佳文字 / 页面上的墨色 | 2.36:1 / 4.66:1 / 11.03:1 | 失败,通过,通过 |
| Herb Garden | 浅色强调色作文字 / 其上最佳文字 / 页面上的墨色 | 1.51:1 / 4.64:1 / 6.98:1 | 失败,通过,通过 |
| Nordic Sky | 浅色强调色作文字 / 其上白色 / 页面上的墨色 | 2.75:1 / 3.59:1 / 5.25:1 | 失败,大字,通过 |
如何打造你自己的 UI 配色
- 从墨色和表面色开始。 选一个深色墨色和一个表面色(带色调或白色),并检查墨色在表面上的表现。Sky Wash #EAF4FC 上的 Harbor Ink #021828 就是最简单的例子。
- 为标签选择强调色。 决定上面放白字还是深色字,并检查标签在强调色上的表现。
- 把强调色当链接测试。 把它作为文字放在你的表面上。如果失败,就留给按钮用,链接改用墨色。
- 在每个表面上测试次要文字。 把 65% 的墨色混到每种卡片颜色上。在掉线的地方提到 70%。
- 浅色只用来填充。 在定下之前先选好放在上面的文字。我们关于 UI 配色错误 和 无障碍色彩对比 的文章会更深入地讲阈值。
获取每套配色的文件
每一套都是 Forge 上的免费配色集,带点按复制的色值、适用于 Figma 和 Adobe 的色板文件(ASE)、CSS 变量和设计令牌。
免费配色集
强调色有两份工作:Indigo、Berry、Sky、Coral
所有色值,外加 ASE 色板、CSS 变量和设计令牌。
免费配色集
带色调卡片上的灰色文字:Red Panda、Warm Purple、Mango、Viridian
所有色值,外加 ASE 色板、CSS 变量和设计令牌。
免费配色集
浅色强调色负责填充,从不书写:Purple Estate、Blue Horizon、Herb Garden、Nordic Sky
所有色值,外加 ASE 色板、CSS 变量和设计令牌。
FAQ
UI 配色方案应该有哪些颜色?
至少三个角色:写字的墨色、用于按钮和链接的强调色、用于页面的表面色。Indigo #4338CA 搭配 Ink Navy #141238 和 Indigo Mist #EEF0FB 就是一个完整的例子。
UI 中的链接应该用什么颜色?
只有当强调色在你的表面上作为文字能通过时才用它。Indigo 可以。Sky #248AE4 不行,所以它的链接要用 Harbor Ink #021828 并加下划线。
次要文字应该用什么颜色?
约 65% 的墨色,并在它所在的表面上检查。在 Oh Pistachio #BCDBA4 这样的强色调上它可能失败,提到 70% 就能解决。
为什么灰色文字在彩色卡片上难读?
带色调的卡片比白色更暗,所以灰色和卡片之间的差距缩小了。白色会掩盖这个问题,所以要在真实的表面上测试。
我可以用粉彩色作强调色吗?
作填充可以,作文字不行。Herb Garden #BCD9A2 在 Sun Linen #FEFFD3 上作文字会失败,而作为填充、上面放 Red Monarch #A82323 就行得通。
按钮颜色一定要能当链接颜色吗?
如果两者都用它,就必须如此。按钮需要从页面中凸显并承载标签。链接是文字,所以在同一页面上门槛更高。
来源
- 颜色名称和十六进制色值来自 Forge 上的 UX Brainy 配色集,第 04、08 和 12 卷。对比度使用 WCAG 2 公式,针对每种颜色所处的表面计算。
- 文字与形状的阈值遵循 W3C WCAG 2.2:Contrast (Minimum) 和 Non-text Contrast。
- 每个色块中的灰色是配色的墨色以 65%(标注处为 70%)与表面混合而成,所以该色值由配色推导得出。
- 最初以三组轮播图发布在 UX Brainy:强调色有两份工作、同一种灰色在白色上能过,在你的带色调卡片上却会失败 和 你的浅色强调色可以填充形状。
Want a UI palette built for your product, with every role tested on your real screens? Our team designs interfaces that hold up in every state.
Get Started
