色导网中文配色工作台与色彩资料馆

冷调科技色组方案 · 色导网方案库

冷色方案的风险是冷到发闷。这一套用一个彩度更高的青绿做强调，只在交互元素上出现，其余全部交给靛蓝的五级明度。

本方案的全部颜色

色卡

#0F1B2D

靛 900

最深底色，也用作代码块背景。

白底 17.28:1墨底 1.01:1

在对比度工具中检查

#1F3A5F

靛 700

主色。页头、主按钮。

白底 11.48:1墨底 1.51:1

在对比度工具中检查

#2F5A91

靛 500

链接与可点文字。

白底 7.02:1墨底 2.48:1

在对比度工具中检查

#7FA3CC

靛 300

深底上的次级文字。不要用在白底上。

白底 2.62:1墨底 6.63:1

在对比度工具中检查

#E3EAF4

靛 100

浅底与选中态背景。

白底 1.21:1墨底 14.35:1

在对比度工具中检查

#1B7A74

强调青绿

强调色。只给交互元素，不做装饰。

白底 5.14:1墨底 3.38:1

在对比度工具中检查

#D6EAE7

青绿浅

强调色的提示底。

白底 1.25:1墨底 13.89:1

在对比度工具中检查

#F7F8FA

冷纸底

页面底色，极淡的冷灰。

白底 1.06:1墨底 16.35:1

在对比度工具中检查

强调色为什么选青绿

靛蓝的补色在橙黄一侧，但橙在冷色方案里一出现就会抢走全部注意力，而且和警告态撞车。往补色侧偏一点取青绿，既与靛蓝有足够色相差，又保持冷调，还留出了橙黄给真正的警告。

强调色只给交互元素：链接、主按钮、当前项。一旦拿它做图标或分隔装饰，强调就失效了。

实测对比度

比值按 WCAG 2.1 相对亮度算出，门槛为正文 4.5:1、大字 3:1、正文 AAA 7:1。
文字／底色用途对比度判定
靛 700／冷纸底标题与正文10.81:1正文 AAA
靛 500／冷纸底链接6.60:1正文 AA
靛 300／冷纸底想当次级文字用（看判定）2.47:1不达标
靛 300／靛 900深底上的次级文字6.60:1正文 AA
冷纸底／靛 700主按钮上的文字10.81:1正文 AAA
强调青绿／冷纸底强调文字4.84:1正文 AA
靛 100／靛 900深底上的正文14.27:1正文 AAA

落地要点

CSS 自定义属性

:root {
  --ct-900: #0F1B2D;
  --ct-700: #1F3A5F;
  --ct-500: #2F5A91;
  --ct-300: #7FA3CC;
  --ct-100: #E3EAF4;
  --ct-accent: #1B7A74;
  --ct-accent-soft: #D6EAE7;
  --ct-paper: #F7F8FA;
}