⌕
首页 / 配色方案 / 中性色系
⚪

中性色配色方案

14 个中性色系命名颜色 · HEX / RGB / HSL 与对比度，附实物窗体预览

中性色系颜色速览

点任意色块复制 HEX
象牙白Ivory
#FFFFF0rgb(255, 255, 240)hsl(60, 100%, 97%)
雪白Snow
#FFFAFArgb(255, 250, 250)hsl(0, 100%, 99%)
米白Off White
#F5F2ECrgb(245, 242, 236)hsl(40, 31%, 94%)
珍珠白Pearl
#EAE6DFrgb(234, 230, 223)hsl(38, 21%, 90%)
银灰Silver
#C0C0C0rgb(192, 192, 192)hsl(0, 0%, 75%)
雾灰Mist Gray
#B8B8B0rgb(184, 184, 176)hsl(60, 5%, 71%)
暖灰Warm Gray
#A79E92rgb(167, 158, 146)hsl(34, 11%, 61%)
冷灰Cool Gray
#9AA3ABrgb(154, 163, 171)hsl(208, 9%, 64%)
铅灰Slate Gray
#708090rgb(112, 128, 144)hsl(210, 13%, 50%)
青灰Blue Gray
#5A6672rgb(90, 102, 114)hsl(210, 12%, 40%)
石墨Graphite
#3B3F45rgb(59, 63, 69)hsl(216, 8%, 25%)
炭黑Charcoal
#2B2B2Brgb(43, 43, 43)hsl(0, 0%, 17%)
曜石黑Obsidian
#1C1E1Argb(28, 30, 26)hsl(90, 7%, 11%)
纯黑Black
#000000rgb(0, 0, 0)hsl(0, 0%, 0%)

中性色 · 实物窗体预览

同一套色在网页亮色 / 暗色 / PPT 里的效果
示例标题 · #F1F2F4
标签已选中
卡片标题
正文示例文字，看这套配色读起来累不累。
示例标题 · #1D242B
标签已选中
卡片标题
正文示例文字，看这套配色读起来累不累。

季度业务回顾

用中性色系配色导出的幻灯片长这样。

怎么用好中性色系配色

中性色（白 / 灰 / 黑）是配色的地基：它不抢戏，能让任何主色最舒服地发挥。UI 里背景、边框、正文几乎都是中性色。掌握米白到石墨灰这一条明度阶梯，页面就专业了一半。

中性色·WCAG AA 最佳方案

看全部 4 个方案 →
米白纸感Paper Off-White按钮示例
15.04:1 ✓ AA#F5F2EC · #1C1E1A · #12554A
深灰面板Dark Panel按钮示例
13.51:1 ✓ AA#1C1E1A · #EAE6DF · #C0C0C0
石墨卡片Graphite Card按钮示例
9.06:1 ✓ AA#3B3F45 · #F0EDE7 · #B8B8B0
银灰分隔Silver Divider按钮示例
8.51:1 ✓ AA#EAE6DF · #3B3F45 · #708090

以上方案的正文对比度均 ≥ 4.5:1，达到 WCAG AA 无障碍标准，可直接用于网页与 PPT。

常见问题

中性色系配色怎么搭才不土？

中性色（白 / 灰 / 黑）是配色的地基：它不抢戏，能让任何主色最舒服地发挥。UI 里背景、边框、正文几乎都是中性色。掌握米白到石墨灰这一条明度阶梯，页面就专业了一半。

中性色系里哪个颜色最常用？

列表里的颜色按明度大致排开，深色适合做文字与导航，中段适合做按钮与图标，浅色适合做背景与卡片底。

这些颜色可以商用于 PPT 吗？

可以。这里给的都是色值（HEX / RGB / HSL），不是图片，直接填进 PPT 或设计软件的自定义颜色即可，无版权问题。

其他色系

全部色系 →
红色系配色 · 橙色系配色 · 黄色系配色 · 绿色系配色 · 青色系配色 · 蓝色系配色 · 紫色系配色