⌕
首页 / 配色方案 / 青色系
🩵

青色配色方案

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

青色系颜色速览

点任意色块复制 HEX
青碧Teal
#008080rgb(0, 128, 128)hsl(180, 100%, 25%)
碧蓝Turquoise
#40E0D0rgb(64, 224, 208)hsl(174, 72%, 56%)
水青Cyan
#00BCD4rgb(0, 188, 212)hsl(187, 100%, 42%)
孔雀蓝Peacock Blue
#116D6Ergb(17, 109, 110)hsl(181, 73%, 25%)
翠青Viridian
#40826Drgb(64, 130, 109)hsl(161, 34%, 38%)
海蓝Aqua
#00E5FFrgb(0, 229, 255)hsl(186, 100%, 50%)
鸭蛋青Duck Egg
#C3D9CErgb(195, 217, 206)hsl(150, 22%, 81%)
青瓷Celadon
#ACE1AFrgb(172, 225, 175)hsl(123, 47%, 78%)
湖青Lagoon
#17A2B8rgb(23, 162, 184)hsl(188, 78%, 41%)
深青Deep Teal
#014D4Ergb(1, 77, 78)hsl(181, 97%, 15%)
薄荷青Mint Teal
#76D7C4rgb(118, 215, 196)hsl(168, 55%, 65%)
蓝绿Aquamarine
#7FFFD4rgb(127, 255, 212)hsl(160, 100%, 75%)

青色 · 实物窗体预览

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

季度业务回顾

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

怎么用好青色系配色

青色是蓝与绿的过渡，清爽、科技、专业，常出现在科技产品、数据看板与医疗健康场景。深青（孔雀蓝 / 深青）显沉稳，浅青（碧蓝 / 鸭蛋青）显干净。

青色·WCAG AA 最佳方案

看全部 4 个方案 →
青瓷茶话Celadon Tea按钮示例
9.22:1 ✓ AA#EDF7F4 · #0C4A46 · #008080
深海数据Deep Sea Data按钮示例
11.62:1 ✓ AA#013334 · #C6F5F0 · #40E0D0
碧波按钮Turquoise Button按钮示例
6.01:1 ✓ AA#00BCD4 · #04323A · #014D4E
鸭蛋清风Duck Egg Breeze按钮示例
6.70:1 ✓ AA#C3D9CE · #1E4A40 · #116D6E

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

常见问题

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

青色是蓝与绿的过渡，清爽、科技、专业，常出现在科技产品、数据看板与医疗健康场景。深青（孔雀蓝 / 深青）显沉稳，浅青（碧蓝 / 鸭蛋青）显干净。

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

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

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

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

其他色系

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