库里的海洋青配色
卡片标了主色与正文对比度。这个色系在暗屏上容易接近黑,对比度那个数字尤其值得看。
#2f8f83饱和 51%13.99:1 · AAA#177796饱和 73%14.08:1 · AAA#2698ba饱和 66%14.27:1 · AAA#1d6996饱和 68%14.41:1 · AAA#1a9589饱和 70%13.76:1 · AAA#196d9b饱和 72%14.41:1 · AAA#1f5f5b饱和 51%13.34:1 · AAA#49768d饱和 32%14.41:1 · AAA海洋青在界面里指什么
它借的是海水的颜色:浅处偏青绿,深处偏蓝。在界面里通常指那一段既不像纯蓝那么冷、也不像青绿那么亮的色。
与「青」标签的区别在色相范围:青可以偏绿,海洋青只取 170 到 205 这一段。与「蓝」的区别在饱和度与明度:纯蓝更艳,海洋青带一点灰。这一页 8 套的主色明度在 25% 到 44% 之间,深的那一端适合做整片底色,浅的那一端更适合图表线、链接与图标。选哪一端,取决于它要铺多大面积。
三条使用规则
一、底色用白或极浅灰
海洋青做主色时已经够深,底色再压深就分不出层次。这 8 套的正文对比度在 13.34:1 到 14.41:1 之间,底色都在浅色区。
二、不要混绿色系
海洋青与森林绿放在一起会互相拉偏:一个偏冷青,一个偏黄绿,中间没有过渡。要加第二色,选沙色或暖灰。
三、数据可视化里用它做「正常」状态
这个色在仪表盘上比纯蓝更容易与告警红区分,也比绿更中性。用它做默认状态色,红色与黄色留给异常。
海洋青和青、蓝都不是一回事
「青」在库里是更宽的标签,包含偏绿的一端;「蓝」更艳更冷。同时带「青」标签的有 4 套,其余海洋青没有打那个标签,但色相确实落在这一段。
什么时候别用海洋青
- 需要温暖与食物感的场景。青蓝在餐饮里会压低食欲。
- 与「水、清洁」完全无关的行业要慎用。这个色的联想太强,用在金融或法律上会显得轻。
- 低亮度屏幕上的大面积使用。深海青在暗屏上接近黑,卡片边界会消失。
常见问题
- 海洋青和青色标签有什么区别?
- 色相范围。青包含偏绿的一端,海洋青只取 170 到 205 度这一段,也就是海水从浅滩到深处的那一段。
- 为什么这个色系适合数据可视化?
- 因为它与红、黄的距离都够远,作为正常状态色不会与告警色混。这一点在色盲模拟下也成立:蓝青是红绿色盲最容易分辨的方向。
- 海洋青能做深色模式吗?
- 可以,但主色要提亮一档,否则在深底上接近黑,卡片边界会消失。