这类颜色更容易在第一眼传达出的整体气质,可以帮助你快速判断是否适合当前页面方向。
热门颜色专题
绿色
绿色既可以表达自然、增长和健康,也经常承担成功状态、通过反馈和积极结果。在网页里,它是少数兼顾功能感和情绪感的颜色。 这页会把色值、场景建议、常见误区和继续处理工具放在一起,方便直接查阅和落地。
优先在这些位置使用,会比把同一个颜色铺满整页更稳,也更容易形成清晰层级。
偏黄的亮绿容易发荧光,低质量绿色也容易显廉价,需要控制纯度和层级。
基础色值
如果你需要先和设计稿、CSS 或组件变量对齐,可以直接从这三种写法开始。
- HEX
- #16A34A
- RGB
- rgb(22, 163, 74)
- HSL
- hsl(142, 76%, 36%)
先看结论
如果你现在只想快速判断这类颜色值不值得继续深入,可以先看这几条。
- 绿色既能承担成功反馈,也能表达自然、增长和可持续主题。
- 相比红色和橙色,绿色更容易让页面显得轻一点,但纯度控制不好会显得发荧光。
- 绿色很适合和白色、灰色、深色文字搭配,再扩展成一套层级色板。
绿色最常见的两种角色
第一种是功能型角色,也就是成功、通过、启用、上升和健康状态。这类绿色更多出现在按钮反馈、表单提示、数据看板和状态标签里。
第二种是情绪型角色,也就是自然、环保、成长和轻松感。这时绿色更接近品牌氛围色,会出现在品牌主视觉、包装调性和内容封面中。
绿色在网页里适合怎么落地
如果你做的是工具、数据、教育、健康、可持续或生活方式产品,绿色很适合用来建立积极、轻量、不压迫的界面感受。
绿色尤其适合拿来做成功状态和增长表达,因为用户对绿色上涨、通过和正常运行已经有很强的通用认知。
- 适合成功提示、表单通过、增长曲线和正常运行状态。
- 适合环保、健康、教育、植物和效率提升等主题品牌。
- 适合和大面积白底、浅灰底配合,显得更干净。
绿色配色时要控制什么
最需要控制的是纯度和偏色。偏黄的亮绿很容易出现荧光感,偏灰过头又会发脏。所以绿色最好通过色轮、色板工具去微调,而不是只凭肉眼拍板。
同时,绿色如果既做品牌主色、又做成功状态、又做强调按钮,角色会混在一起。更稳的方式是把品牌绿和状态绿分成不同层级。
- 品牌绿色和成功反馈绿色可以相近,但不建议完全同一个色值。
- 文字压在亮绿色上时要特别检查可读性。
- 绿色搭配深灰、米白和浅灰最稳,搭配红色时要慎重控制比例。
适合继续搭配的颜色工具
确定方向后,可以直接从这些工具继续做取色、扩色板、配色和可读性检查。
颜色选择器
在线选择颜色并实时查看 HEX、RGB、HSL 和 CSS 写法,支持原生色板和浏览器吸管取色。
色轮工具
基于主色生成互补色、邻近色、三角色等配色方案,实时输出 HEX、HSL 和 CSS 变量。
品牌色板生成器
输入品牌主色后自动生成 50-900 色板层级、CSS 变量和设计系统常用 token。
对比度检测
检测前景色与背景色的可读性,输出 WCAG 对比度结果。
相关知识
如果你还想继续补基础概念、网页配色和对比度规则,可以继续往下看。
常见问题
把高频疑问集中回答,方便快速查找。
绿色为什么常被用来表示成功或通过?
因为用户对绿色“正常、通过、增长”的认知已经非常稳定,所以绿色在交互反馈里非常高效。
绿色适合做品牌主色吗?
适合,尤其在健康、教育、效率、环保和成长型主题里都很常见。但最好同时准备深浅层级,不要只靠一个绿色撑完整站。
绿色最容易出现什么问题?
最常见的是偏黄过亮导致发荧光,或偏灰过头显得脏。另一个问题是把品牌绿和状态绿混为一谈,结果层级不清。
继续浏览其它热门颜色
如果你在比较不同主色方向,可以继续看这组高频颜色专题。