📌 快速索引

区域	风格	核心色
暖调·大地系	大地色、暖中性、自然	橄榄绿、陶土橙、暖米
冷调·自然系	墨绿、海蓝、薄荷	深青、石灰、雾灰
传统·文化系	中国风、国潮、水墨	朱砂红、墨色、月白
现代·极简系	黑白灰、混凝土	混凝土灰、纯白、墨黑
趋势·2026	年度流行色	摩卡慕斯、云舞者
高能量·大胆系	酸性色、撞色	日落橙、酸性绿
柔和·舒适系	莫兰迪、马卡龙	灰粉、雾蓝、奶油

一、暖调·大地系

适合场景：家居、生活方式、茶品牌、自然/环保、咖啡、手作品牌、有机产品

1. 大地暖调（来源：Framer Sereenity 模板）

角色	色名	HEX
背景	暖米色	`#F8F3EC`
主色	橄榄绿	`#8E9867`
强调色	陶土橙（接近 Claude 橙）	`#E1937D`
文字/辅助	橡木棕	`#8D6959`

这组配色天然契合 better-theme 的“暖调 + Claude 橙”主线。陶土橙与 Claude 橙 #D97757 属同一色系，可以互换使用。

2. 暖中性棕（来源：Framer Harper 模板）

角色	色名	HEX
背景	奶油色	`#FFF3DB`
主色	皮革棕	`#51301F`
辅助色	赤褐色	`#7A3110`
强调色	卡布奇诺	`#AA8867`

适合高端手作、精品咖啡、复古品牌。棕色系作为主色调时，文字用深棕代替纯黑会更协调。

3. 现代暖调（来源：DepositPhotos 2026 春季趋势）

角色	色名	HEX
背景	画布米色	`#F5EFE6`（近似 Canvas Beige）
主色	日光黄	`#F5C542`（近似 Solar Yellow）
强调色	薄荷蓝	`#7EC8C8`（近似 Mint Blue）

画布米色作为大面积背景，日光黄用于 CTA 按钮，薄荷蓝用于次级交互元素。适合活动页、轻品牌。

二、冷调·自然系

适合场景：科技、工具类产品、开发者文档、环保科技、医疗健康、SaaS 后台

1. 墨绿系（来源：Framer Hydra 模板）

角色	色名	HEX
背景	雾灰	`#E9E9E9`
主色	深青	`#122023`
强调色	青柠	`#E1FCAD`
辅助深色	深海蓝	`#1E1E1F`

深青代替纯黑作为主色，青柠作为唯一的亮色点缀。适合科技感但不想太冷的产品页面，深青的暖调让整体不会过于冰冷。

2. 2026 夏季功能系（来源：DepositPhotos 2026 夏季趋势）

角色	色名	HEX
背景/结构	混凝土灰	`#D5D5D7`
主色	泳池蓝	`#539DB6`
强调色	酸性绿	`#AEB73A`
CTA/紧急	日落橙	`#FF5F21`

混凝土灰是极为实用的中性底色，泳池蓝提供清爽感。日落橙用于转化按钮。适合落地页、SaaS 产品页。

三、传统·文化系

适合场景：国潮品牌、文创、茶饮、博物馆、文化专题、中式生活方式

1. 水墨网页（来源：Chinese Color Atlas）

角色	色名	HEX（推荐近似值）
背景	墨色	`#1A1A1A`
文字	月白	`#F0F0E8`
CTA	朱砂红	`#C43A2A`

深色模式国风页面的标杆方案。墨色打底，月白为字，朱砂红只用于关键动作。不牺牲可读性，有水墨气质。

2. 国潮品牌（来源：Chinese Color Atlas）

角色	色名	HEX（推荐近似值）
底色	朱砂红	`#C43A2A`
辅助	描金	`#C9A84C`
文字	墨色	`#2B2B2B`

朱砂红为底、辅以描金和墨色，传统而不失力量感。适合国潮品牌官网、包装、电商首屏。

3. 敦煌丝路（来源：Chinese Color Atlas）

角色	色名	HEX（推荐近似值）
主色	砂绿	`#6B7D5A`
辅助	石青	`#3A6B8C`
强调	赭色	`#A0522D`

壁画矿物感，砂绿、石青和赭色形成层次。适合文化展览、丝巾与茶礼包装。

4. 传统色资源（来自开源项目）

742 枚中国传统色卡（HEX/RGB/CMYK），GitHub 开源项目 nevertoday/zhongguo-traditional-colors，可搜索、下载。
Chinese Color Atlas 提供 21 组场景化调色板，含品牌、婚礼、茶席、宋韵等场景，可直接复制 HEX、CSS、Tailwind 和 JSON。

四、现代·极简系

适合场景：企业官网、SaaS 产品、数据看板、极简品牌、设计工作室

1. 石板灰 + 象牙白（来源：Shopify 案例 Silk & Willow）

角色	色名	HEX（推荐近似值）
背景	象牙白	`#F5F0E8`
主色	木炭灰	`#3A3A3A`
强调色	暖灰	`#8C8C8C`

高端、复古灵感的美学。深色木炭灰与柔和象牙色形成高对比但不刺眼的搭配。

2. 瑞士/国际主义（来源：GitHub 前端设计风格库）

角色	色名	HEX（推荐近似值）
背景	纸白	`#FAFAF8`
文字	墨黑	`#111111`
辅助	灰	`#888888`
分割线	浅线	`#E0E0E0`

四色系统：墨黑、灰、纸白、线。克制色彩逻辑，纯粹依赖排版层级。适合设计工作室、编辑类页面。

五、趋势·2026

适合场景：需要体现当下设计趋势的页面

1. 摩卡慕斯（Pantone 2025 年度色，延续影响）

角色	色名	HEX
主色	摩卡慕斯	`#A47864`

丰富的泥土棕，传递安静 sophistication。适合作为背景、强调色或排版元素。与暖米色、橄榄绿、陶土橙搭配极佳。

2. 云舞者（Pantone 2026 年度色）

角色	色名	HEX（推荐近似值）
背景	云舞者（柔和白）	`#F2F0EB`

2026 年 Pantone 年度色，代表“静默与明净”。适合作为大面积背景底色，与任何强调色搭配都不冲突。

六、高能量·大胆系

适合场景：活动页、创意机构、潮牌、音乐/艺术节、年轻化品牌

1. 日落能量（来源：DepositPhotos 2026 夏季趋势）

角色	色名	HEX
CTA/焦点	日落烈焰	`#FF5F21`
能量点缀	酸性绿	`#AEB73A`
中性基底	混凝土灰	`#D5D5D7`

日落烈焰橙与 Claude 橙同属暖橙家族，但饱和度更高。适合需要强转化的按钮和行动号召。

2. 大胆复古（来源：Shopify 案例 Beefcake Swimwear）

角色	色名	HEX（推荐近似值）
主色	森林绿	`#2D4A3E`
辅助	深蓝	`#1B3A5C`
强调	锈红	`#B35A3E`
中性	沙色	`#D6C9B0`

户外乐趣与怀旧优雅的结合。深色森林绿和深蓝与锈红形成对比，沙色作为中性底色。

七、柔和·舒适系

适合场景：健康、美妆、生活方式、母婴、心理咨询、温和型品牌

1. 柔和暖调（来源：Shopify 案例 Kulala）

角色	色名	HEX（推荐近似值）
背景	柔和琥珀黄	`#F0D9A0`
辅助	深夜红	`#7A2E2E`
点缀	薰衣草	`#C5B8D4`
主色	深海军蓝	`#2C3E5C`
强调	生动橙	`#E8703A`

琥珀黄与深夜红营造宁静温馨感，薰衣草和海军蓝增添舒缓色调，生动橙作为视觉焦点。

2. 复古中性（来源：Shopify 案例 Adorned Vintage）

角色	色名	HEX（推荐近似值）
背景	奶油色	`#F5EFE4`
辅助	淡米色	`#E8DFD0`
点缀	浅绿色	`#A8B89A`

柔和色调和自然色彩，宁静、复古、充满灵感。适合女性向、永恒风格、复古品牌。

🛠 配色工具推荐

工具	用途	链接
Chinese Color Atlas	21 组中国风调色板，含 CSS/Tailwind 导出	chinesecoloratlas.com
传统色开源库	742 枚传统色卡 + 场景测试 + shadcn 主题	github.com/nevertoday/zhongguo-traditional-colors
Framer 优雅配色	10 组高端网页配色案例	framer.com/blog
DepositPhotos 趋势	2026 季节配色趋势 + HEX	blog.depositphotos.com

⚠️ 使用注意

本文件是决策参考库，不是固定模板。Claude 应根据页面主题、行业、受众和情绪主动选用，不需要等用户点名。
硬规则优先于本文件：严禁蓝紫渐变、红绿渐变、紫/靛渐变作为主色调；正文与背景对比度至少 4.5:1；主色不超过 3 种，按 60-30-10 控制比例。
色值可微调：部分色值是根据原文描述推荐的近似值（标注“推荐近似值”的），并非原文直接给出的 HEX。使用时可根据实际效果调整。
优先使用 Claude 橙：#D97757 仍是 better-theme 的默认强调色。本文件中的其他橙色方案仅在场景匹配时作为替代选项。

严格模式（用户按需启用）

以下章节为新增内容，建议在阅读时优先参考。原有内容保持不变。

1. 配色选择决策树

按顺序判断：

用户是否指定品牌色？
- 是 → 以品牌色为主色，从本文件找辅助色 / 强调色，进入第 4 步。
- 否 → 进入第 2 步。
页面类型？
- 品牌落地页 → 暖调大地系 / 高能量大胆系 / 趋势·2026
- 产品官网 / SaaS → 冷调自然系 / 现代极简系
- 文化专题 → 传统·文化系
- 电商 → 手作→暖调大地；潮牌→高能量；美妆→柔和舒适
- 后台 / 文档 → 现代极简系 / 冷调自然系
从对应风格中选一组配色。
应用硬规则过滤器（见第 3 节）。
输出配色方案，包含角色、色名、HEX、使用比例。

2. 场景 → 配色 → 排版联动表

配色组	排版提示
暖调大地系	正文用深棕代替纯黑，标题可选用高对比衬线体，行高 1.6-1.8
冷调自然系	正文保持中性灰，强调色只用于关键元素，避免视觉噪音
传统·文化系	大字标题可用月白，正文降低透明度至 85%，留白充足
现代·极简系	依赖排版层级，字体权重对比明显，字距适中
趋势·2026	大面积背景用云舞者，强调色仅用于 CTA，排版简洁
高能量·大胆系	标题粗重，正文克制，强调色面积不超过 10%
柔和·舒适系	圆润字体，行高宽松，避免尖锐对比

3. 硬规则过滤器

正文与背景对比度 ≥ 4.5:1，大文本 ≥ 3:1
主色不超过 3 种，按 60-30-10 控制比例
严禁蓝紫渐变、红绿渐变、紫 / 靛渐变作为主色调
优先使用 Claude 橙 #D97757 作为强调色
色值可微调，但必须通过对比度检查

4. 品牌色适配策略

用户提供品牌色 → 以其为主色。
从本文件选择：
- 辅助色：与品牌色同色系或互补中性色
- 强调色：若品牌色本身适合做强调，则直接用；否则选 Claude 橙或场景匹配的强调色
保持 60-30-10 比例：品牌色 60%，辅助色 30%，强调色 10%。
如果品牌色对比度不足，调整明度而非色相。

5. 配色 Token 输出格式

:root {
  --color-bg: #f8f3ec;
  --color-primary: #8e9867;
  --color-accent: #e1937d;
  --color-text: #8d6959;
}

或 Tailwind config / JSON，方便直接落地。