代码、主题展示页和参考说明见 Han Design 项目仓库。
前言
如果你做过品牌站、活动页、茶/咖啡/美妆类产品页，大概率遇到过一个问题：
现成的设计系统要么太「科技感」——黑底 + 霓虹蓝 + 发光粒子，标题里塞满「未来、智能、重构、颠覆」；要么太「中国风」——水墨卷轴 + 朱砂印 + 青花瓷，跟你的客户行业完全对不上。
但客户想要的往往只是一种自然一点、轻盈一点、漂亮一点的感觉。
前 2 天我在刷抖音的时候，刷到了 6 张很有意思的配色海报，盯着它们看了老一会，很喜欢，突然灵感开始狂涌。
于是我把它们做成了 Han Design 里的 6 套当代配色主题，覆盖茶品牌、AI 产品、咖啡家居、轻食健康、活动营销、美妆服饰等场景，改一行 data-theme 就能用。
6 套主题速览
| 主题名 | 英文名 | 气质关键词 | 适合场景 |
|---|---|---|---|
| 松麦 | pine-wheat | 安静、自然、克制 | 茶、植物、家居、生活方式 |
| 藤紫 | plum-blush | 柔和、浪漫、轻奢 | 美妆、服饰、女性向品牌 |
| 海兰 | ocean-orchid | 冷静、清透、专业 | 设计服务、科技、AI、作品集 |
| 焦糖 | caramel-cream | 温暖、复古、干净 | 咖啡、家居、餐饮、手作 |
| 薄荷 | mint-lavender | 轻盈、春天、放松 | 健康、轻食、春夏生活方式 |
| 莓果 | berry-butter | 明快、热闹、节庆 | 活动页、节日营销、年轻品牌 |
第一套：松麦 pine-wheat
这套颜色很安静。
松针绿、雾芽青、山丘绿，再配一个麦乳白。它不是那种一眼就冲过来的绿色，而是有点像窗外的植物、晒过太阳的麦田，还有一本放在木桌上的旧书。
它给人的感觉是，东西不用急着证明自己。页面放在那里，用户慢慢看，也不会觉得无聊。
一行代码，页面的背景、表面、文字、边框、按钮、印章、卷轴滚轴、焦点环，全部会跟着主题变量一起变化。不是只把背景换成绿色，其他东西继续各自为战。
一个主题不能只负责换色，它得把页面的情绪一起接住。
第二套：藤紫 plum-blush
这套就明显更软一点。
葡萄夜、丝绒李、杏仁奶、樱花粉，光是把这些名字念一遍，画面就已经出来了。
它有一点浪漫，有一点轻奢，但没有直接滑到「满屏粉色加蝴蝶结」那边去。这是我比较在意的分寸感。
它最有意思的地方，是深色和浅色之间有一个很舒服的落差：深色做标题、按钮和重点区域，浅粉色铺开空间，中间用一点杏仁奶把情绪压住，页面就不会甜得发腻。
很多所谓的「高级感」，最后都败在太用力。
第三套：海兰 ocean-orchid
这一套是我自己最喜欢的几套之一。
深湖蓝、海港蓝、雾兰紫、冰雾蓝，整体很冷静，但不冷漠。有一点海风，有一点玻璃，有一点阴天的城市，还有一点很克制的科技感。
我后来还用这套做了一个 AI 产品页的示例，页面名字叫澄见 AI。就是因为我不太想把 AI 产品都做成千篇一律的黑底霓虹风格——有时候产品只是想把事情讲清楚，海兰就很适合这种气质。
不过冷色也有一个坑：如果文字对比度没处理好，页面很容易变成一大块灰蓝色，漂亮是漂亮，读起来特别累。所以这次主题变量里，正文文字、链接、控件、焦点环，还是使用 Han 的语义颜色，而不是随手拿一个装饰色来顶上去。
颜色可以有情绪。 文字还是得让人看清楚。
第四套：焦糖 caramel-cream
焦糖棕、樱雾粉、奶咖白、胡桃棕。
这套一出来，我脑子里就自动出现了咖啡店、老木柜、皮革、针织衫，还有下午四点左右从窗户斜进来的光。
它不是复古到像一个旧网页，而是把复古的温度留了下来，再把页面做得干净一点。
它还有一个比较讨巧的地方：棕色很适合承载文字和按钮，奶咖白可以撑住大面积留白，樱雾粉则负责给页面加一点不那么严肃的气息。所以即便整个页面没有太多装饰，也不会显得干巴巴的。
不靠大量视觉效果制造氛围，颜色本身就已经在讲故事了。
第五套：薄荷 mint-lavender
湖杉绿、薄荷绿、浅薄荷、薰衣草雾。
这套比松麦更轻，比海兰更暖，也比藤紫更自然。有一种春天刚开始的感觉——不是花已经全部开了，而是风里刚刚有一点新鲜的味道，桌上放着一杯冰饮，旁边可能还有一小束花。
但薄荷系也特别容易被做得很「模板化」：绿色背景，白色卡片，圆角按钮，再加几个叶子图标，完事。
这就有点可惜了。我觉得真正好看的薄荷系页面，应该保留一点紫色的呼吸感，不能从头到尾只剩绿色。所以 mint-lavender 里，薰衣草雾不是一个可有可无的装饰色，它负责把整个页面从「健康食品宣传页」里拉出来，给它留一点更轻、更松的空间。
第六套：莓果 berry-butter
莓果红、珊瑚粉、草莓粉、奶油黄。
这一套就完全不安静了。它明快、热闹、有一点节庆感，也有一点时尚杂志的味道。适合餐饮、活动页、节日营销、年轻品牌，或者任何需要用户一打开就有反应的页面。
但它也最容易失控：红色太多像促销海报，粉色太多会发腻，黄色压不住就像一杯放了太多糖的果汁。
所以莓果主题里，真正的重点不是把所有颜色都铺满，而是让莓果红负责行动（按钮、CTA），让珊瑚粉和草莓粉负责气氛，奶油黄负责把空间托住。
有主角，有配角，页面才不会吵成一团。
这不是色卡，是主题系统
做完这 6 套主题以后，我重新想了一遍「主题」到底是个什么东西。
以前我会把主题理解成一组颜色：蓝色主题就是把背景换成蓝色，按钮换成深蓝，卡片加一点浅蓝。但现在我觉得不是这么回事。
主题更像是一个页面的说话方式。
松麦说话慢一点；藤紫更柔和一点；海兰会把距离拉开一点，让信息更清楚；焦糖会让页面靠近你一点；薄荷让你松口气；莓果直接把音量拧大。
这也是为什么我没有把这 6 套配色做成 6 个孤零零的色卡，而是把它们接进了 Han Design 原本的主题系统里。它们会一起影响：
- 页面背景、卡片表面
- 主文字、辅助文字
- 边框、按钮、印章、导航
- 滚轴、焦点环、装饰层
你换的是 data-theme，不是复制一大段新的 CSS。
全局接入：
<html lang="zh-CN" data-theme="ocean-orchid">
局部接入（不污染全局）：
<section data-han-scope data-theme="mint-lavender">
<button type="button" class="han-btn-seal">开始体验</button>
</section>
局部接入这个能力，在真实项目里太重要了。很多时候你不是要把整个后台系统变成莓果红，也不是要让所有页面都长成一张茶品牌官网。你只是想在某个活动页、某个产品介绍区、某个品牌模块里，借一点颜色的气质。
小范围可控，比全局重写舒服太多了。
主题是起点，不是终点
我也不想把这 6 套主题说得多么不得了。它们不是什么官方色彩规范（但是是人民币选色。哈哈），也不是说松麦就代表自然，海兰就只能做科技。
颜色没有那么死。
这些主题只是从参考图里取了一组比较干净的四色关系，再把它们转成现代网页可以使用的语义变量。你完全可以从焦糖开始，最后做出一个很冷的家居页面；也可以从海兰开始，最后做出一个很温暖的个人主页。
真正决定页面最后长什么样的，还是内容、字体、图片、间距、组件比例，还有最容易被忽略的那件事——什么时候停手。
做设计和做饭有点像：颜色是调味料，你可以有很多瓶，但不能每一瓶都往锅里倒。
最后
这次增加 6 套很值钱的中国风当代配色（没骗人吧，很值钱吧，哈哈），也是因为我越来越觉得，Han Design 不应该只服务于「古代中国风」这个很窄的想象。它可以保留宣纸、墨色、留白和文化语境这些底子，但最终做出来的页面，应该有机会进入更日常、更现代、更复杂的场景。
- 茶品牌可以用松麦
- AI 产品可以用海兰
- 咖啡和家居可以用焦糖
- 轻食和健康生活可以用薄荷
- 活动页可以用莓果
- 品牌主页可以用藤紫
从图片，到色卡；从色卡，到语义变量；再从变量，落回真实页面。这个过程挺有意思的，也让我重新确认了一件事：
设计系统不是把灵感关进代码里，而是让灵感以后还能被继续使用。
如果你正在做一个网页，也许可以先别急着决定它要不要中国风。你可以先问问自己，它今天想用什么颜色说话。
是松麦的安静，藤紫的柔和，海兰的清透，焦糖的温度，薄荷的轻盈，还是莓果的热闹。
然后把它写进 data-theme。剩下的事情，就交给页面慢慢长出来。
Han Design 这次新增的 6 套当代配色主题，已经放进项目里了。代码、主题展示页和参考说明都可以直接看。
如果你也有一组很喜欢的色卡，欢迎丢过来。说不定下一次，脑子里又会开始狂泳。
如果觉得这套思路有点意思，欢迎点赞、收藏、评论三连～ 想第一时间收到更新，也可以给项目点个 ⭐ Star。github.com/you-want/ha…
感谢阅读，我们下次再见。
