网站配色方案：32 种配色附十六进制色值（及转化建议）

32 种网站配色方案（附十六进制色值），来自 We.Inc 模板设计，以及如何建立能提升转化的配色方案：平静的基础色搭配一种专用于行动号召的强调色，并提供行业示例与无障碍检查说明。

常见问题

什么颜色的按钮转化效果最好？

没有一种颜色在所有情况下都能胜出。最佳按钮颜色是与页面形成强烈对比且不用于其他内容的颜色，这样视线会直接落在按钮上。

网站应该使用多少种颜色？

常见做法是使用中性色作为基础（白色或米白色背景和深色文字）、一种品牌主色和一种行动号召强调色，再加上成功与错误提示等语义色。颜色再多通常会削弱视觉层级。

色彩心理学真的会影响转化吗？

颜色联想确实存在，但会随文化、行业和情境而变化，许多流行说法被过度夸大。可靠影响转化的因素是对比度、可读性，以及希望访客采取的行动是否足够醒目。

制造业和工业企业适合使用哪些颜色？

工业客户重视清晰和信任。藏蓝、炭灰和钢灰搭配一种鲜明强调色（常见为安全橙、黄色或亮蓝）很适合这一行业。规格表、询价按钮和电话号码应使用强调色，方便找到。

如何检查配色是否符合无障碍要求？

使用 WebAIM 等对比度检测工具。WCAG 2.2 AA 级要求普通文字至少达到 4.5:1 对比度，大号文字以及按钮边框、表单字段等关键界面元素至少达到 3:1。

没有一种颜色能在所有场景下都实现最佳转化。真正重要的是按钮在页面上的突出程度。能提升转化的配色方案，是那些采用平静、一致的基础色，并以一种高对比度强调色专门用于行动号召的方案。

因此，与其问“哪种颜色最好”，不如问“我最重要的按钮看起来是否与页面上其他所有内容都不同？”本指南介绍如何围绕这一思路建立配色方案。

We.Inc 模板设计中的 32 种网站配色方案

这些配色方案来自 We.Inc 自有模板设计的源文件（每个设计预览图中使用频率最高的四种颜色，不含预览框架的纯灰色）。这些均为模板设计，非真实客户网站，我们不对任何配色的转化效果作出保证。可将十六进制色值复制到十六进制颜色选择器中查看颜色并获取 RGB/HSL 值，使用前请在色彩对比度检测工具中检查每对文字与背景的对比度。

We.Inc 模板设计	风格	颜色（十六进制）	配色特点
Atlas Builders	建筑/工程	`#101d2c` `#0b1521` `#f2a614` `#d18f0a`	深藏蓝底色，琥珀色行动按钮
Summit Trades	工程行业	`#0e2436` `#e4671e` `#16222e` `#f6eeec`	藏蓝搭配安全橙
Ironpeak Roofing	屋顶行业	`#e4671e` `#0e2436` `#17415f` `#16222e`	橙色主导，藏蓝结构
Ridgewater Plumbing	水管行业	`#b08544` `#d8401f` `#f2ede3` `#c9a063`	暖米色上的黄铜色与红色
Sunward Solar	太阳能	`#0b1f3a` `#f5a524` `#d98a0b` `#fff6e6`	深夜蓝与太阳金
Hookline Towing	拖车	`#0e0e0e` `#ffc400` `#f4f1ea` `#161616`	黑色与高亮黄
Redline Auto Group	汽车经销	`#e3262e` `#0e0f11` `#eeeeee` `#17191c`	近黑底上的赛车红
Maple Street Motors	汽车维修	`#1f4d3a` `#1b1b1b` `#f2b134` `#e6efe9`	森林绿搭配芥末黄
Freshpile Carpet Cleaning	清洁	`#ffd23f` `#0d1b52` `#1d3fd8` `#dbe2ff`	明黄搭配深皇家蓝
Tideline Pressure Washing	外墙清洁	`#0b1b2b` `#3fd0c9` `#f3f6f5` `#020617`	深藏蓝搭配水绿色
Mowline Lawn Care	草坪护理	`#eef3e6` `#c6f24e` `#0f1410` `#1a2a17`	浅绿底色，荧光绿强调
Fairway Lawn Co.	园艺绿化	`#f6f1e7` `#1d2b1f` `#e8c872` `#2f5d3a`	米色、深绿与柔和金
Brightside Dental	牙科	`#10312e` `#3f605c` `#0e5f57` `#0a4841`	沉稳的蓝绿色系
Meadowpaw Veterinary	兽医	`#2f6e6a` `#e9f0ef` `#c9d7d4` `#f7f9f8`	薄荷底色上的柔和蓝绿
Vibrant Wellness	健康诊所	`#25382c` `#eef2e6` `#7c9a7e` `#3f6b4a`	鼠尾草绿与森林绿
Kinfolk Home Care	家庭护理	`#0f3d2e` `#f4c542` `#fffdf6` `#0a2e22`	松绿搭配暖黄
Lumora	医疗健康	`#c8a97e` `#182c41` `#0b1220` `#0e1a26`	深夜蓝搭配沙金色
Sterling & Vance LLP	律所	`#8a93a2` `#b08a4f` `#0b0e14` `#f6eeec`	石板蓝、古铜色与墨黑
Harborview Wealth Partners	金融理财	`#102a43` `#b08d57` `#d9bf8f` `#faf8f4`	象牙底上的藏蓝与金色
Harborline Insurance Agency	保险	`#0f2742` `#5fd3c9` `#17a398` `#0b1e33`	藏蓝搭配蓝绿色
Larkfield Partners	咨询	`#1f4d3f` `#f4f1ea` `#14181c` `#4a5560`	纸白底上的深绿
Keystone Realty	房地产	`#f6eeec` `#7a2e2a` `#59606b` `#e9f0ef`	浅粉底搭配赤褐色
Lucia Trattoria	餐厅	`#e9c9a8` `#f7f1e6` `#efe6d4` `#23301f`	暖沙色搭配橄榄黑
Ember & Roast	咖啡/餐厅	`#ede6dc` `#c9642f` `#14100d` `#f6eeec`	燕麦色、焦橙色与浓咖啡色
Kilnhouse Coffee	咖啡馆	`#2b1d16` `#c65d3b` `#f3ebe0` `#fff8ef`	烘焙棕与赤陶色
Parcel No. 9 Wines	葡萄酒庄	`#3a0a15` `#fbe9e3` `#b8324b` `#f4a7a0`	深红搭配玫瑰色
Petalry Florist	花店	`#3e1f2b` `#b4546c` `#fbf5f2` `#f3e3dd`	李子紫与淡粉色
Hollow Oak Farm Shop	农场商店	`#24301f` `#f6f1e4` `#5e7f3a` `#e3a33b`	苔藓绿、米色与蜂蜜色
Suds & Scruff	宠物美容	`#3b1740` `#ffd84d` `#ff8fab` `#fff8e7`	茄紫色、黄色与粉色
Datacore SaaS Hero	SaaS	`#7b39fc` `#a484d7` `#6a2ce0` `#f87b52`	紫色搭配珊瑚色
Mast Security	安保	`#1e2628` `#34e0a1` `#e7ede9` `#8d9a97`	石墨色搭配薄荷绿
Afterglow Sound	活动/音乐	`#efeaff` `#f472b6` `#ec4899` `#8b5cf6`	薰衣草色、粉色与紫色

你会在这些配色中发现一个规律：大多数都将深色或浅色底色与一种饱和强调色（琥珀、橙、黄、荧光绿或珊瑚色）搭配。这正是下文所述的“安静底色，一种行动色”结构。

为什么对比度胜过色彩心理学

许多色彩心理文章会说蓝色代表信任、红色代表紧迫、绿色代表成长。这些通用联想并非全无道理，但非常依赖文化、行业和情境。红色在一种场景里代表警告，在另一种场景里可能代表庆祝。绿色可以表示“开始”、“环保”或“金钱”。

有充分支持的是孤立效应，也称 Von Restorff 效应：与周围环境不同的事物更容易被注意和记住。蓝白页面上唯一一个橙色按钮会被注意到；如果页面到处都是橙色，同一个按钮就不突出。

这可以归纳为适用于各行业的两条规则：

选择一种与基础配色形成对比的强调色。
只将其用于行动号召，不要用于标题、图标或装饰形状。

60-30-10 配色结构

室内设计师使用 60-30-10 比例，这套方法也适用于网站：

比例	用途	常见选择
约 60%	背景和基础色	白色、米白色、浅灰色，或深色主题的深色背景
约 30%	品牌和结构	用品牌主色作为页眉、导航和区块背景
约 10%	强调色/行动色	按钮、关键链接，以及你希望访客点击的唯一重点

再添加一种深色文字（常用近黑色或深灰色，而非纯黑）和语义色：成功状态用绿色，错误用红色，警告用琥珀色。不要让这些语义色与主要按钮混淆，例如避免“立即购买”按钮看起来像错误提示。

五步建立配色方案

1. 从品牌色开始

如果你已有标志，就选其中主要颜色作为主色。如果没有，可选一个符合行业（参见下表）、而且你愿意长期使用的颜色。

2. 根据对比度选择强调色，而非情绪

看看色轮。互补色（色轮上彼此相对）能创造最强烈的视觉跳出感：蓝色与橙色、紫色与黄色、蓝绿色与珊瑚色。如果品牌色是蓝色，橙色或暖黄色强调色会比另一种蓝色更醒目。

3. 确定中性色

选择背景色、卡片表面色、边框灰和文字色。这些颜色承担大部分页面视觉工作，应保持安静。

4. 检查无障碍对比度

使用对比度检测工具测试每种文字和按钮组合（WebAIM 的工具免费）。WCAG 2.2 AA 级要求：

普通正文为 4.5:1；
大号文字为 3:1（大约 24px 常规字重或 18.66px 粗体及以上）；
按钮轮廓和表单边框等界面组件为 3:1。

白底浅灰文字对比度不足，是网页最常见的可读性问题之一。如果用户读不清你的优惠内容，按钮颜色就不那么重要了。

5. 在真实屏幕上测试

在户外使用手机、低价笔记本屏幕，以及网站支持的深色模式中检查配色。设计师的显示器上看起来精致的颜色，在其他屏幕上可能会褪色。

不同行业的配色示例

这些是合理的起点，而非固定规则。每套配色都以安静的基础色搭配一种有对比度的强调色。

行业	基础色和主色	行动按钮强调色	有效原因
制造业/工业	藏蓝、炭灰、钢灰	安全橙或黄色	稳重可靠，“请求报价”醒目
医疗/牙科	白色、浅蓝或蓝绿色	暖珊瑚色或绿色	干净平和，预约按钮突出
法律/金融	深藏蓝或森林绿、米色	金色或亮蓝	传统可信，并有清楚的联系入口
餐厅/食品	暖中性色、深红或橄榄绿	亮黄色或橙色	令人有食欲，且“下单”或“预订”很醒目
SaaS/科技	白色或近黑色、靛蓝或蓝色	亮绿、橙或粉色	简洁，并突出高对比度的“免费开始”按钮
美容/健康	胭脂粉、鼠尾草绿、米色	深李子色或黑色	品牌柔和，预约按钮有信心
家庭服务（水管、HVAC、屋顶）	白色、深蓝	红色或橙色	紧急情况的电话按钮有明显紧迫感
电商/时尚	主要使用黑白	一种品牌强调色	让产品照片呈现色彩

对于制造业，客户通常会进入产品或能力页面，希望获取规格表或报价。建议页面上只有“请求报价”、“下载规格表”和电话号码使用强调色。

实例：修复页面上没有任何内容突出的情况

想象一家景观公司网站：标志是绿色，标题、图标、主视觉背景和“免费估价”按钮也全是绿色。所有内容都符合品牌风格，按钮却消失了。

可以这样调整：

保留绿色，但让它用于结构元素：页眉、区块分隔线和图标。
将标题文字改成深灰色。
将主视觉背景改为带深色遮罩的照片或米白色。
把按钮改成暖橙色；橙色在色轮上与蓝绿相对，并检查白色文字的对比度。
不要在页面其他地方使用这种橙色。

品牌没有任何改变，但行动按钮成了屏幕上最显眼的元素。

如何正确测试配色

流量足够时，可对按钮或强调色做 A/B 测试，但一次只改变一个因素，并让测试持续足够久。流量较少的网站通常无法获得可靠结果，可用更简单的检查方法：

眯眼测试： 模糊视线或截图后，行动号召仍应是最明显的形状。
五秒测试： 给别人看页面五秒，然后问他们觉得应该采取什么行动。
使用分析工具的热图和点击数据，查看用户点击的是按钮还是其他内容。

常见错误

把强调色用作装饰，导致它不再代表“点击这里”。
颜色太多，彼此争抢注意力。
浅灰文字或占位文字的对比度低于 4.5:1。
只用颜色代表错误或状态（还应添加图标或文字；部分访客有色觉障碍）。
直接复制知名品牌配色，却没有该品牌的知名度作为支撑。

快速检查清单

[ ] 一种基础色、一种主色、一种强调色
[ ] 强调色只用于行动号召
[ ] 所有文字达到 4.5:1（大字为 3:1）
[ ] 按钮和表单边框达到 3:1
[ ] 错误和成功状态除颜色外也使用文字或图标
[ ] 已在手机、户外和深色模式中检查

颜色是提升页面转化的因素之一；高转化落地页示例还介绍了其他做法。使用 We.Inc 时，你可以在聊天中描述想要的外观，例如“藏蓝和灰色搭配橙色询价按钮”，浏览模板，然后通过可视化编辑或代码微调颜色。

免费开始

免费开始 · 无需信用卡

Product

AI Website Builder: Describe a site in plain English; it's live in minutes
White Label Platform: Your brand, your domain, your margin
Enterprise: SSO, custom SLAs, and dedicated support
Developer API: Embed site generation into your SaaS

Who It's For

For Agencies: Resell under your brand
For Freelancers: Your own branded builder
For Hosting Providers: Add a builder to your stack
For SaaS Platforms: Embed site creation via API
For Startups
For Financial Services
For Healthcare

Features

Resources

Company

View Sitemap