冷色指色轮中从绿到蓝紫的一段（色相约 120°-270°）。它天生带着理性、距离与专业感，是科技、金融、医疗、SaaS 页面最常用的色域。但冷色用不好容易显得冰冷、有距离感。这一篇我们讲清楚冷色系的情绪表达、适用场景，以及尧图这套"湿巾温柔风"如何用奶白把冷色调软，最后给三组可直接复制的实战色板。

冷色系的情绪表达

蓝、绿、青各自传递不同的专业气质，选色前先想清楚页面要建立哪种信任。

• 蓝色：信任、专业、理性。金融、科技、SaaS 的首选主色，#3A6B9C 做主色稳重不老气，比纯蓝 #0000FF 更有质感。
• 绿色：生长、健康、自然。教育、健康、环保类页面常用，#4A7C3A 比 #00FF00 更耐看，也避免廉价感。
• 青色：清洁、清新、现代。医疗、日护、清洁类页面首选，#5BA8A8 介于蓝绿之间，干净又柔和。

冷色的明度可以拉得比暖色高一些。浅蓝 #A8C8E8、浅绿 #A8D5BA 做大面积辅色时非常透气，适合信息密度高的后台与数据页面。

适用场景：哪些页面该用冷色

冷色压得住信息密度，也更容易建立"可信赖"的感受：

• 科技、SaaS、企业服务：蓝为主色，传递稳定与专业，配合浅蓝雾色做卡片层次。
• 金融理财、保险：深蓝建立信任感，强调色用一抹绿表示"增长"。
• 医疗健康、日护：青绿组合传递清洁与安心，避免红的紧张感。
• 教育、环保、自然：绿色为主，呼应"生长"与"可持续"的语义。

反过来，餐饮、节日、促销这类需要"温度"和"冲动"的场景，冷色做主色会显得疏离——除非你刻意走"高端克制"路线，否则暖色更合适。

与奶白搭配：让冷色不冷冰

纯冷色容易显得冰冷、有距离感，尤其在生活方式、设计类页面里会"没有人情味"。尧图这套"湿巾温柔风"的解法是：用奶白 #FBF9F2 做大面积底（60%），冷色做主色与点缀（30%），再让浅绿 #A8D5BA 做蓝绿之间的过渡色（10%），整体就软下来了。

奶白比纯白 #FFFFFF 多了一点暖偏色，能中和冷色的"硬"。正文用 #2A3328 这种偏绿的深灰，而不是纯黑，整页气质会从"科技冷"变成"温柔的专业"。这也是尧图全站底盘的来由。

实战色板与 CSS 代码

下面三组色板来自尧图真实项目，每组都标注了 hex，可直接复制使用。

色板 A — 晨雾静谧（科技 SaaS）

#3A6B9C / #6B9BD1 / #A8C8E8 / #E0ECF7 / #FBF9F2

色板 B — 森野呼吸（健康教育）

#2D5028 / #4A7C3A / #7FB069 / #A8D5BA / #FBF9F2

色板 C — 湿巾温柔（生活设计）

#4A7C3A / #6B9BD1 / #A8D5BA / #A8C8E8 / #FBF9F2

:root {
  --cool-bg:        #FBF9F2;  /* 奶白底，60% 主背景 */
  --cool-mist:      #E0ECF7;  /* 浅蓝雾，30% 次要色 */
  --cool-blue-soft: #A8C8E8;  /* 浅蓝 */
  --cool-blue:      #6B9BD1;  /* 中蓝 */
  --cool-blue-deep: #3A6B9C;  /* 深蓝主色 */
  --cool-green-soft:#A8D5BA;  /* 浅绿过渡 */
  --cool-green:     #7FB069;  /* 中绿 */
  --cool-ink:       #2A3328;  /* 偏绿深灰，正文 */
}
.cool-page {
  background: var(--cool-bg);
  color: var(--cool-ink);
}
.cool-page .panel {
  background: var(--cool-mist);
  border-left: 4px solid var(--cool-blue-deep);
}
.cool-page .cta {
  background: linear-gradient(135deg, var(--cool-blue-soft), var(--cool-blue));
  color: #fff;
}
.cool-page .accent {
  color: var(--cool-blue-deep);
}

冷色的关键不是"用蓝"，而是"用蓝的同时不冷冰"。把背景换成奶白、把正文换成偏绿深灰、在蓝绿之间留一个过渡色，冷色就会从"有距离"变成"可信赖的温柔"。至此，色彩理论、暖色、冷色三条线就串完了，回到配色总览可以再挑一组色板动手试试。