绿色网站配色方案：6套含色值的绿色调色板

6套绿色网站配色方案，附十六进制色值、已检测对比度的文字搭配和适用场景，帮你选出清晰易读又契合品牌的绿色。

常见问题

网站用哪种绿色最好？

没有绝对最好的绿色，但稍微降低饱和度的深绿色，例如 #166534 或 #2D6A4F，是最稳妥的起点。两者在白色背景上都能达到 WCAG AA 要求的 4.5:1 文字对比度（分别为 7.13:1 和 6.39:1），因此适合用于按钮、链接和标题。像 #22C55E 这样的亮绿色在白底上不达标（2.28:1），更适合用在图标或深色背景上。

网站中什么颜色和绿色搭配好看？

暖调的米白色和奶油色（#F6F4EC）、近黑的深绿色（#081C15），再加上琥珀色或赤陶色这样的单一暖色强调色，都很搭。中性色请偏向绿色调，而不要用纯灰，这样页面会更协调；强调色也只保留一种作为行动按钮色。

绿色用作文字颜色符合无障碍标准吗？

深绿色可以，浅绿和中绿往往不行。WCAG 2 AA 要求普通文字至少 4.5:1，大号文字和界面组件至少 3:1。请逐一检测每组搭配，不要凭肉眼判断，因为像 #40916C 这样的中调绿色（白底上为 3.83:1）正好处在只有大号文字才能通过的区间。

绿色在网页设计中传达什么含义？

绿色最常与自然、成长、健康、可持续和金钱联系在一起，所以经常出现在健康、金融、能源和户外类网站上。含义也会随色调变化：深森林绿显得稳重沉静，酸橙绿则显得有活力、很现代。这些只是惯例，并非定论，请用你自己的受众来测试。

行动号召（CTA）按钮可以用绿色吗？

可以，前提是按钮在页面中足够突出，并且按钮文字的对比度达标。在浅色页面上，深绿色按钮配白色文字效果不错。如果页面以绿色为主，暖色强调按钮往往更容易与背景区分。如何取舍，可以参考我们的转化友好型配色方案指南。

需要深色模式的绿色调色板吗？

不是必须的，不过深绿色背景本身就是很受欢迎的设计选择。如果要提供深色模式，不要直接沿用浅色调色板：在白底上不达标的亮绿色，放在近黑的深绿色上往往效果很好，例如 #22C55E 在 #052E16 上的对比度为 6.54:1。

简短回答： 做绿色网站时，按钮、链接和标题使用 #166534 或 #2D6A4F 这样的深绿色，背景使用 #F6F4EC 或 #F0FDF4 这样带色调的米白色，而 #22C55E 这类亮绿色只用于深色背景或装饰。浅色背景上的深绿色可以达到 WCAG AA 4.5:1 的文字对比度标准，而白底上的亮绿色则不能（#22C55E 在白底上只有 2.28:1）。

下面是六套绿色调色板，包含十六进制色值、实测对比度，以及各自适合的网站类型。所有对比度都按 WCAG 相对亮度公式计算，你也可以用颜色对比度检测工具自行验证任何一组搭配。

为什么绿色在屏幕上不好驾驭

绿色处于亮度范围的中段。中调绿色看起来鲜艳，但放在白底上作文字往往太浅，放在黑底上又往往太暗。这就是为什么在 Logo 里很好看的绿色，用作按钮色却可能不达标。

实用原则：按对比度来选绿色，而不是看色板里好不好看。普通文字要做到 4.5:1 或更高。大号文字（大约 24px 常规字重，或 19px 及以上的粗体）以及输入框边框、图标等界面组件，最低要求是 3:1。

六套含色值的绿色网站调色板

每套调色板都列出了背景色、文字色、按钮或链接的强调色，以及关键搭配的对比度。

1. 森林绿与奶油色（杂志风、户外、餐饮）

角色	色值	搭配与对比度
背景	#F6F4EC
文字和标题	#1B4332	在背景上：10.06:1
按钮 / 链接	#2D6A4F	白色文字：6.39:1
柔和面板	#95D5B2	其上 #1B4332 文字：6.56:1

温暖、沉静、易读。奶油色背景避免了冷冰冰的感觉。适合餐厅、农场商店、旅行以及长内容网站。

2. 清新薄荷绿（健康养生、诊所、健康资讯）

角色	色值	搭配与对比度
背景	#F0FDF4
文字和标题	#14532D	在背景上：8.70:1
按钮	#15803D	白色文字：5.02:1
深色区块	#052E16	其上 #DCFCE7 文字：13.57:1

明亮干净。按钮绿色刚刚超过 AA 标准，所以按钮文字请使用常规或更粗的字重，并避免把它放在带色调的面板上。

3. 鼠尾草绿与橄榄绿（工作室、室内设计、手工制品）

角色	色值	搭配与对比度
背景	#E9F5DB
文字和标题	#31572C	在背景上：7.33:1
按钮	#4F772D	白色文字：5.24:1
高亮色	#90A955	其上 #132A13 文字：5.84:1

柔和、质朴的大地色调。适合作品集和精品品牌，既有绿色，又不会过于张扬。

4. 深绿色暗色主题（金融科技、SaaS、高端品牌）

角色	色值	搭配与对比度
背景	#081C15
文字	#B7E4C7	在背景上：12.58:1
强调色 / 链接	#40916C	在背景上：4.62:1
卡片	#1B4332	其上 #95D5B2 文字：6.56:1

深色背景让中调绿色可以作为强调色使用。注意 #40916C 在 #081C15 上达标，但在白底上不达标（3.83:1），所以不要把它用到浅色区块里。

5. 深绿底配荧光酸橙绿（活动、创作者、年轻品牌）

角色	色值	搭配与对比度
背景	#1A2E05
标题 / 按钮	#A3E635	在背景上：9.69:1
备选亮绿	#22C55E	在 #052E16 上：6.54:1

充满活力且非常易读，因为浅酸橙绿放在深色底上。请适度使用：整页都是酸橙绿，眼睛很快就会疲劳。

6. 青绿色（SaaS、健康科技、可持续发展）

角色	色值	搭配与对比度
背景	#CCFBF1
文字和标题	#134E4A	在背景上：8.41:1
按钮	#0F766E	白色文字：5.47:1

偏蓝绿，更有科技感，少一些“自然”气息。适合想用绿色但不想要有机感的场景。

不达标的绿色，以及替代方案

不达标的搭配	组合	对比度	替换为
亮绿色按钮	#22C55E 配白色文字	2.28:1	#15803D 配白色文字（5.02:1）
白底酸橙绿链接	白底上的 #65A30D	3.09:1	白底上的 #4D7C0F（4.99:1）
中绿色正文	白底上的 #40916C	3.83:1	白底上的 #2D6A4F（6.39:1）

中调的这几种仍然能通过 3:1 的标准，所以用于大号标题、图标和边框是可以接受的，只是不适合用于正文段落或小号链接。想进一步了解常见问题，请看糟糕的颜色对比度示例；想了解更强的通用配色搭配，请看高对比度配色方案指南。

分步骤打造你自己的绿色调色板

先确定绿色的作用。 它是品牌色、行动色，还是仅仅作为点缀？仅用于品牌的绿色可以是任意色调，而用于行动的绿色必须通过对比度检测。
选一个深色锚点。 从 #14532D 到 #2D6A4F 之间的绿色入手，作为浅色背景上的标题、链接和按钮颜色。
给背景加一点色调。 用非常浅的绿色或暖奶油色代替纯白，例如 #F0FDF4 或 #F6F4EC。加色调之后记得重新检查文字对比度。
加入一个非绿色的强调色。 在绿色较多的页面上，琥珀色或赤陶色能让按钮更突出。请验证文字对比度：例如 #92400E 文字在 #FEF3C7 上为 6.37:1。
测试每一组文字与背景的搭配。 把标题、正文、链接、按钮和占位符文字都放进检测工具里跑一遍。正文字号下低于 4.5:1 的，都需要换更深或更浅的色调。
检查悬停和禁用状态。 悬停色往往不知不觉就滑到不达标的区间。
把调色板保存为命名变量。 使用 brand-900、brand-700、brand-100 这样的变量名，之后修改只需改一行。我们的 Tailwind CSS 颜色指南介绍了色阶的思路，上面的好几个色值就来自这种色阶。

不同类型的网站选哪种绿色

可持续发展、能源、非营利组织： 森林绿与奶油色，或鼠尾草绿。想看这种氛围的真实案例，可以查看我们的 Greenfield Renewables 模板。
健康养生： 清新薄荷绿或青绿色。
金融和 SaaS： 深绿色暗色主题，配一个明亮的强调色。
餐饮、农场、园艺： 森林绿与奶油色，加暖色强调色。
创作者和活动页面： 深绿底配荧光酸橙绿，仅用于标题和一个按钮。

发布前可直接复制的检查清单

[ ] 正文与背景的对比度至少为 4.5:1
[ ] 大号文字和图标至少为 3:1
[ ] 按钮文字与按钮底色的对比度达到 4.5:1
[ ] 链接与正文的区分不能只靠颜色（加下划线即可）
[ ] 亮绿色只出现在深色背景上或用作装饰
[ ] 除绿色外，强调色不超过一种
[ ] 深色区块使用单独测试过的搭配，而不是沿用浅色模式的搭配
[ ] 调色板已保存为命名变量，可一处修改全局生效

如果你不确定一个网站总共需要几种颜色，网站配色方案指南讲解了基础知识，调色板词汇表条目则解释了这里用到的术语。

把绿色调色板用到真实网站上

有了色值之后，你还需要一个地方把它们用起来。We.Inc 的免费套餐可让你基于现成模板发布最多三个网站；通过提示词生成网站的 AI 构建器，则从每月 $20 的 Starter 套餐开始提供。你可以在这里注册，把背景、文字和按钮的色值粘贴到网站样式中，然后对已发布的页面再做一遍同样的对比度检测。

免费开始 · 无需信用卡

Umair Ali Sadaqat

We.Inc 创始人

Umair 是 We.Inc 的创始人。他撰写有关 AI 建站、代理机构以及经营网站工作室的文章。

准备好打造出色的作品了吗？

加入 15,000+ 家使用 We.Inc 在一个平台上完成上线、增长和自动化的企业。