首页 / 色系 / 海洋青配色方案

海洋青配色方案

海洋青是青与蓝之间的那一段:色相 173 到 202 度,饱和度中等偏高,明度偏深。它比天蓝更绿,比薄荷更沉。全库 100 套里主色落在这个区间的有 8 套,饱和度从 32% 到 73%。

最后更新:2026-10-29

库里的海洋青配色

卡片标了主色与正文对比度。这个色系在暗屏上容易接近黑,对比度那个数字尤其值得看。

海洋青在界面里指什么

它借的是海水的颜色:浅处偏青绿,深处偏蓝。在界面里通常指那一段既不像纯蓝那么冷、也不像青绿那么亮的色。

与「青」标签的区别在色相范围:青可以偏绿,海洋青只取 170 到 205 这一段。与「蓝」的区别在饱和度与明度:纯蓝更艳,海洋青带一点灰。这一页 8 套的主色明度在 25% 到 44% 之间,深的那一端适合做整片底色,浅的那一端更适合图表线、链接与图标。选哪一端,取决于它要铺多大面积。

三条使用规则

一、底色用白或极浅灰

海洋青做主色时已经够深,底色再压深就分不出层次。这 8 套的正文对比度在 13.34:1 到 14.41:1 之间,底色都在浅色区。

二、不要混绿色系

海洋青与森林绿放在一起会互相拉偏:一个偏冷青,一个偏黄绿,中间没有过渡。要加第二色,选沙色或暖灰。

三、数据可视化里用它做「正常」状态

这个色在仪表盘上比纯蓝更容易与告警红区分,也比绿更中性。用它做默认状态色,红色与黄色留给异常。

海洋青和青、蓝都不是一回事

「青」在库里是更宽的标签,包含偏绿的一端;「蓝」更艳更冷。同时带「青」标签的有 4 套,其余海洋青没有打那个标签,但色相确实落在这一段。

什么时候别用海洋青

  • 需要温暖与食物感的场景。青蓝在餐饮里会压低食欲。
  • 与「水、清洁」完全无关的行业要慎用。这个色的联想太强,用在金融或法律上会显得轻。
  • 低亮度屏幕上的大面积使用。深海青在暗屏上接近黑,卡片边界会消失。

常见问题

海洋青和青色标签有什么区别?
色相范围。青包含偏绿的一端,海洋青只取 170 到 205 度这一段,也就是海水从浅滩到深处的那一段。
为什么这个色系适合数据可视化?
因为它与红、黄的距离都够远,作为正常状态色不会与告警色混。这一点在色盲模拟下也成立:蓝青是红绿色盲最容易分辨的方向。
海洋青能做深色模式吗?
可以,但主色要提亮一档,否则在深底上接近黑,卡片边界会消失。

相关工具