⌕
首页 / 配色方案 / 蓝色系
🔵

蓝色配色方案

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

蓝色系颜色速览

点任意色块复制 HEX
宝蓝Sapphire
#0F52BArgb(15, 82, 186)hsl(216, 85%, 39%)
群青Ultramarine
#120A8Frgb(18, 10, 143)hsl(244, 87%, 30%)
天蓝Sky Blue
#87CEEBrgb(135, 206, 235)hsl(197, 71%, 73%)
藏青Navy
#14213Drgb(20, 33, 61)hsl(221, 51%, 16%)
靛蓝Indigo
#4B0082rgb(75, 0, 130)hsl(275, 100%, 25%)
湖蓝Lake Blue
#2E8BC0rgb(46, 139, 192)hsl(202, 61%, 47%)
皇家蓝Royal Blue
#4169E1rgb(65, 105, 225)hsl(225, 73%, 57%)
钢蓝Steel Blue
#4682B4rgb(70, 130, 180)hsl(207, 44%, 49%)
蔚蓝Cerulean
#2A6FDBrgb(42, 111, 219)hsl(217, 71%, 51%)
午夜蓝Midnight Blue
#191970rgb(25, 25, 112)hsl(240, 64%, 27%)
婴儿蓝Baby Blue
#89CFF0rgb(137, 207, 240)hsl(199, 77%, 74%)
雾霾蓝Haze Blue
#7A93ACrgb(122, 147, 172)hsl(210, 23%, 58%)
克莱因蓝Klein Blue
#002FA7rgb(0, 47, 167)hsl(223, 100%, 33%)

蓝色 · 实物窗体预览

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

季度业务回顾

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

怎么用好蓝色系配色

蓝色是信任与专业的代名词，科技、金融、政务、企业官网用得最多，也是最不容易出错的颜色。深蓝（藏青 / 靛蓝）稳重，亮蓝（天蓝 / 蔚蓝）年轻，克莱因蓝高级。

蓝色·WCAG AA 最佳方案

看全部 4 个方案 →
蔚蓝天窗Cerulean Sky按钮示例
9.76:1 ✓ AA#EEF3FC · #123B7A · #2A6FDB
藏青夜幕Navy Night按钮示例
12.82:1 ✓ AA#14213D · #DCE7FA · #89CFF0
宝蓝按钮Sapphire Button按钮示例
7.15:1 ✓ AA#0F52BA · #FFFFFF · #FFD700
克莱因宣言Klein Statement按钮示例
10.69:1 ✓ AA#002FA7 · #FFFFFF · #87CEEB

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

常见问题

蓝色系配色怎么搭才不土？

蓝色是信任与专业的代名词，科技、金融、政务、企业官网用得最多，也是最不容易出错的颜色。深蓝（藏青 / 靛蓝）稳重，亮蓝（天蓝 / 蔚蓝）年轻，克莱因蓝高级。

蓝色系里哪个颜色最常用？

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

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

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

其他色系

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