清新自然风格网站建设的色彩搭配指南！
0. 先说目标
清新自然风不是“全画面都绿”，而是低饱和+高可读性+大量留白。做配色时优先保证三件事：
文案秒读（正文对比度足够）；2) 重点可扫（主色/强调色有层级）；3) 图片与色彩不互相抢戏。
1. 四套即用的“自然系”主色方案
低饱和、耐看、便于做深浅两套主题。可直接拿去做设计系统或 CSS 变量。
A. 森林青绿（泛用）
| 色彩角色 | HEX | 用途建议 |
|---|---|---|
| 主色 Primary | #2E7D6B | 按钮、关键链接、图表主线 |
| 强调 Accent | #A4D4AE | 卡片高亮、空状态插画 |
| 链接 Link | #2A6F97 | 正文链接/次要按钮 |
| 背景 Base | #F6FAF8 | 页面主背景 |
| 表面 Surface | #FFFFFF | 卡片/模态背景 |
| 正文 Text | #233329 | 主文案 |
| 次文 Muted | #66776D | 说明文字、标签 |
| 边框/分隔 Border | #E4EEE8 | 1px描边、表格线 |
B. 海风蓝（内容型/文旅）
| 角色 | HEX | 用途 |
|---|---|---|
| Primary | #2A6F97 | 主按钮、导航悬停 |
| Accent | #84C5E6 | 信息提示、图表面积 |
| Sand 中性 | #EBDCCB | 次级背景、信息条 |
| Base | #F6FAFC | 页面背景 |
| Text | #1D2B36 | 主文案 |
C. 草木鼠尾草（企业/品牌稳重）
| 角色 | HEX | 用途 |
|---|---|---|
| Primary | #6BAA75 | 主CTA |
| Accent | #CFE8CC | 成功/完成状态 |
| Highlight | #FFDFA3 | 轻提示、营销条 |
| Base | #FAFBF9 | 背景 |
| Text | #1E2A22 | 正文 |
D. 山石木色（户外/农旅/可持续）
| 角色 | HEX | 用途 |
|---|---|---|
| Primary | #5C7041 | 强调 |
| Accent | #B67C65 | 次强调、价格 |
| Base | #F7F5F2 | 背景 |
| Text | #2A2A28 | 正文 |
2. 页面区域与色彩层级（怎么落到组件）
| 区域/组件 | 推荐颜色 | 说明 |
|---|---|---|
| 页面背景 | Base（如 #F6FAF8） | 背景微暖微冷皆可，别纯白大面积直怼眼睛 |
| 顶部导航 | Surface + 1px Border | 透明吸顶时加轻阴影 4–6px blur |
| 主按钮（含悬停/按下） | Primary / Primary-6% / Primary-12% | 悬停加深 6%，按下加深 12% |
| 次按钮 | Surface 边框 + Text | 悬停改边框=Primary |
| 链接 | Link（如 #2A6F97） | 悬停加下划线，不改文字大小 |
| 卡片/模块 | Surface + 阴影极轻 | 阴影透明度 8–12%，避免“脏” |
| 成功/警告/错误 | #4CAF50 / #E6A700 / #C35B5B | 低饱和，文字仍用深色 |
| 标签/徽章 | Accent 系列 | 与背景对比≥3:1 |
3. 对比度与可读性（别只“好看”）
正文文本：建议深色文字配浅背景，目标对比达到 WCAG AA（一般 4.5:1）。
按钮文字：色块上放白字时，按钮色最好深到能达 AA。
浅色背景上的细字：用
Text深色，别用浅灰飘着看不清。
实测组合建议
| 背景 | 文本/元素 | 用途 | 对比结论 |
|---|---|---|---|
| #F6FAF8 | #233329 | 正文/标题 | AA/AAA 可过 |
| #FFFFFF | #2E7D6B | 标题/链接 | AA 可过 |
| #2E7D6B | #FFFFFF | 按钮文字 | AA 可过 |
| #84C5E6 | #1D2B36 | 轻提示条 | AA 可过 |
小技巧：若某色太浅，通过降低明度 6–10% 或 加 1px 内阴影来增对比。
4. 图片与配色的关系
图片偏绿/蓝 → 页面主色就别再“抢色”，用中性 Base 托底。
大图上文字 → 加暗色遮罩（线性渐变到 30–45% 黑）再放白字。
插画风格 → 选线条干净、低饱和插画，与主色系一致即可。
5. 渐变与分隔，轻一点就好
背景渐变：
linear-gradient(180deg, #F6FAF8 0%, #FFFFFF 100%)按钮渐变（可选）：在主色上加细微光泽：
#2E7D6B → #2B7463（角度 180°，差值 < 8%）分隔线：使用 #E4EEE8 之类的浅灰绿，比纯灰更和谐。
6. 深色模式的自然化处理
背景改为深蓝绿/炭黑，文字改高对比的暖白。
主色保持不变或略提亮饱和度 5–8%，保证在深底上依然醒目。
:root{
--bg:#F6FAF8; --surface:#FFFFFF; --text:#233329; --muted:#66776D;
--primary:#2E7D6B; --primary-contrast:#FFFFFF; --accent:#A4D4AE;
--link:#2A6F97; --border:#E4EEE8; --success:#4CAF50;
--warning:#E6A700; --error:#C35B5B;
}
[data-theme="dark"]{
--bg:#0F1715; --surface:#17211E; --text:#EAF1ED; --muted:#A8B6AE;
--primary:#3E9682; --primary-contrast:#0E1614; --accent:#7FB596;
--link:#8BC9EA; --border:#22302B;
}
7. 字体与色彩的配合
中文正文：中性宋/黑/苹方/思源黑体，字重 400–500。
标题：加 1 级字号而非一味加粗；标题颜色可用
Text深色或Primary的 80% 明度。行距：正文 1.6–1.8，更“透气”。
8. 行业落地示例（三种常见场景）
文旅/露营：海风蓝方案 + 沙色分隔，卡片圆角 12–16，图片留白多。
生态环保/ESG：森林青绿方案，图表色从 Primary 派生三阶：
#2E7D6B / #4E9A88 / #72B7A4。农产品电商：草木鼠尾草方案，价格/库存用陶土色 Accent，CTA 按钮保持绿色主色。
9. 常见坑与规避
全站一个主色“刷”到底 → 形成“视觉疲劳”，记得给中性底喘息。
浅灰文本 → 移动端室外环境几乎看不见；用
Muted深一档色。按钮阴影过重 → 自然风格更适合微阴影+清晰边界，别“块状粘土感”。
图片色调乱 → 统一做冷/暖色分组，上线前做一轮色调校正。
10. 快速落地清单（照着做）
选一套主方案（A/B/C/D），做成设计令牌/变量；
给出 Light/Dark 两套 Token；
主页首屏：背景渐变 + 一张自然题材浅色图；
按钮三态（默认/悬停/按下）和禁用态一次定义；
对比度抽查：正文、按钮文字、链接三类必测；
图片上文字一律加遮罩；
组件库示例页（卡片/表格/表单/通知/图表）全套预览。