首页 / 配色方案 / 绿色系

🟢

绿色配色方案

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

绿色系颜色速览

点任意色块复制 HEX

松柏绿Pine Green

#2E8B57rgb(46, 139, 87)hsl(146, 50%, 36%)

翡翠Emerald

#50C878rgb(80, 200, 120)hsl(140, 52%, 55%)

碧绿Jade

#00A86Brgb(0, 168, 107)hsl(158, 100%, 33%)

森林绿Forest

#228B22rgb(34, 139, 34)hsl(120, 61%, 34%)

草绿Grass

#7CB342rgb(124, 179, 66)hsl(89, 46%, 48%)

苹果绿Apple

#8DB600rgb(141, 182, 0)hsl(74, 100%, 36%)

青柠Lime

#BFFF00rgb(191, 255, 0)hsl(75, 100%, 50%)

薄荷绿Mint

#98FF98rgb(152, 255, 152)hsl(120, 100%, 80%)

抹茶Matcha

#99B92Ergb(153, 185, 46)hsl(74, 60%, 45%)

苔绿Moss

#8A9A5Brgb(138, 154, 91)hsl(75, 26%, 48%)

鼠尾草Sage

#9CAF88rgb(156, 175, 136)hsl(89, 20%, 61%)

橄榄绿Olive Green

#6B8E23rgb(107, 142, 35)hsl(80, 60%, 35%)

军绿Army Green

#4B5320rgb(75, 83, 32)hsl(69, 44%, 23%)

墨绿Deep Green

#12554Argb(18, 85, 74)hsl(170, 65%, 20%)

绿色 · 实物窗体预览

同一套色在网页亮色 / 暗色 / PPT 里的效果

案例 ① · 网页亮色

示例标题 · #EDF7ED

标签已选中

卡片标题
正文示例文字，看这套配色读起来累不累。

案例 ② · 网页暗色

示例标题 · #0E390E

标签已选中

卡片标题
正文示例文字，看这套配色读起来累不累。

案例 ③ · PPT（16:9）

季度业务回顾

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

怎么用好绿色系配色

绿色代表自然、健康、安全与「通过」，是金融涨势与环保主题的标配。深浅跨度大：深松柏绿沉稳权威，浅薄荷 / 抹茶清新年轻。做后台系统建议深绿做导航，浅绿做状态色。

绿色·WCAG AA 最佳方案

看全部 4 个方案 →

森林晨雾Forest Mist按钮示例

9.20:1 ✓ AA#EEF6EF · #1E4A2C · #2E8B57

松柏导航Pine Nav按钮示例

8.06:1 ✓ AA#12554A · #EAFBEF · #98FF98

薄荷清爽Mint Fresh按钮示例

8.43:1 ✓ AA#98FF98 · #134A20 · #0E7A3C

抹茶便当Matcha Box按钮示例

7.29:1 ✓ AA#F2F5E3 · #4A5510 · #99B92E

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

常见问题

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

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

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

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

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

其他色系

全部色系 →

红色系配色 · 橙色系配色 · 黄色系配色 · 青色系配色 · 蓝色系配色 · 紫色系配色 · 中性色系配色