Irodori彩り

#9EB8C4 缥

颜色转换 · 变化色阶 · 配色组合 · 颜色对比度检测

撰文与审校 Steve 最近更新

颜色转换

#9EB8C4缥

CMYK profile: Coated FOGRA39 · 数值遵循 CSS Color 4 记法与 WCAG 2.2 对比度规则。

速览

名称缥
读音转写piǎo
文化体系中国传统色
文化属性木
色系蓝
HEX#9EB8C4
RGBrgb(158,184,196)
HSLhsl(199 24% 69%)
HSVhsv(199, 19%, 77%)
OKLCHoklch(0.767 0.033 227.4)
LABlab(73.24 -6.25 -9.03)
XYZ41,46,59
CMYKcmyk(19.4% 6.1% 0.0% 23.1%)
RAL#B9B9A8 · Pebble grey · RAL 7032

关于此颜色

piǎo蓝中国传统色

赢得信任的平静

缥 的色值是 #9EB8C4，属于 蓝 色系，文化脉络清晰。单独看它归入 蓝；沿着 中国传统色 的源流看，它又多了一层含义。

设计提示

先把 缥（#9EB8C4）放在中性底色上测试；有了 蓝 的点缀，整体才显得有意为之，而非随手添加。

最佳用途

把 缥 留给最需要被第一眼看到的那一个元素，其余部分交给 蓝 色系去衬托。

平静可信技术稳定冷静

心理学

感知方式

平静可信技术稳定冷静

心理效应

缥 会提升 蓝 画面的能量感，并把视线引向行动。

情绪影响

它给人的感受直接而温暖，因此能让克制的版面提亮，又不至于喧闹。

象征

代表含义

信任、能力与清晰

文化意义

在 中国传统色 语境中，这一色调自带本地参照，投放前请核对其象征含义。

正面联想

正面联想偏向 信任、能力与清晰，这也是它常出现在请柬与季节主题中的原因。

谨慎使用

大面积使用容易被读成 过量时显得冷漠或有距离，因此请只用在点缀和小面积中。

应用场景

常见设计应用

营销落地页
把 缥 留给最需要被第一眼看到的那一个元素，其余部分交给 蓝 色系去衬托。
杂志封面系统
把 缥 留给最需要被第一眼看到的那一个元素，其余部分交给 蓝 色系去衬托。
产品包装标签
把 缥 留给最需要被第一眼看到的那一个元素，其余部分交给 蓝 色系去衬托。
仪表盘状态提示
把 缥 留给最需要被第一眼看到的那一个元素，其余部分交给 蓝 色系去衬托。
卖场导视标识
把 缥 留给最需要被第一眼看到的那一个元素，其余部分交给 蓝 色系去衬托。

设计指导

如何用好它

建议

  • 饱和填充占版面不超过两成。
  • 只把它用在主行动按钮上。
  • 在中性背景上检查小尺寸配色。

避免

  • 不要与刺目的荧光绿或电光蓝并置。
  • 不要用它排长段白色正文。
  • 避免让色相偏移到别的色系的渐变。
品牌契合
金融、科技、医疗、航空

以 统治者、智者 为原型的品牌，往往在开口之前就用它表明性格。

趋势信号
赢得信任的平静

蓝色后退并稳定下来，因此成为界面与机构的默认色。它的范围从近黑的藏青到淡天蓝，始终不失从容。

配色

与之相配的颜色

#C6ADA2需要单一温暖焦点的版式
#68818C需要清晰点缀的界面
#C4ABB7想显得诱人又不喧哗的包装

历史

颜料与源流

在合成染料出现之前，缥 依靠矿物与植物颜料调配，蓝 色系离不开赭石、茜草与靛蓝这类来源。如今屏幕的还原比任何单一颜料都更稳定。

标签

平静可信技术稳定冷静信任、能力与清晰蓝

出处与考据

释义 / 词源: “缥”本义为淡青色的丝帛。《说文·糸部》：“缥，帛青白色也。”后泛指浅青、淡蓝。

文献与出处

变化色阶

深色阶变暗、浅色阶变亮，色相角始终不变。

专业提示: 深色阶变暗、浅色阶变亮，色相角始终不变。

深色阶

在同一色相上加深得到的色阶。

0% #9EB8C4
10% #8EA6B0
20% #7E939D
30% #6F8189
40% #5F6E76
50% #4F5C62
60% #3F4A4E
70% #2F373B
80% #202527
90% #101214
100% #000000

浅色阶

用于表面与背景的提亮色阶。

0% #9EB8C4
10% #A8BFCA
20% #B1C6D0
30% #BBCDD6
40% #C5D4DC
50% #CFDCE2
60% #D8E3E7
70% #E2EAED
80% #ECF1F3
90% #F5F8F9
100% #FFFFFF

设计系统色阶 50–950

50#EFF7FA100#E3EFF5200#CBDCE5300#B1C7D1400#96AEB9500#768F9B600#607782700#4B606A800#374952900#26343A950#182227
深色模式适配值 (AA): #69828D · 4.65:1

使用场景

  • 深色阶 → 悬停、阴影、层次
  • 浅色阶 → 高光、表面
  • 平衡 → 统一的色彩系统

设计技巧

保留一个主色、一个辅助色和一个点缀色。

跨色彩体系对照

各传统色系与设计系统中最接近的具名颜色，按 OKLCH ΔE 计算，数值越小越接近。

亚洲传统色

缥 CN ΔE 0.000
Мөнгө MN ΔE 0.056
สีฟ้า TH ΔE 0.057
显示全部 (6)
空色 JP ΔE 0.082
चंदन IN ΔE 0.106
石黄 TB ΔE 0.107
Kuning ID ΔE 0.119
황 KR ΔE 0.133
Vàng VN ΔE 0.188

设计系统色板

Gray 500 Bootstrap ΔE 0.019
Gray 500 Open Color ΔE 0.019
Gray 400 Chakra ΔE 0.021
显示全部 (11)
Secondary 70 Material ΔE 0.023
Bronze 8 Radix ΔE 0.026
Olive 400 Tailwind ΔE 0.032
Gray 11 Polaris ΔE 0.034
Grey 1 Ant Design ΔE 0.053
Gray 400 UnoCSS ΔE 0.055
Gray 400 Panda ΔE 0.055
Teams 130 Fluent ΔE 0.071
Brand (alternate) vanilla-extract ΔE 0.109
Border default Primer ΔE 0.116
Secondary StyleX ΔE 0.170

RAL 经典色

Pebble grey · RAL 7032 RAL ΔE 0.017
用任意颜色试试

在色库中的位置

下面的数字来自构建期对全站 116 个传统色的排序，不是人工描述。

  • 明度 L* 73.2，在 116 个传统色中排第 27 位（偏亮）。
  • 彩度 C 10.986，排第 94 位（低彩度）。
  • 色相 199°，属于蓝色系。
  • 同色相族里最接近的是「天青」，ΔE OK 为 0.073。

同族三档能不能一起用

从「缥」的 50–950 色阶里取 200 / 500 / 800 三档：同一个色相，只差明度。下面是它们互为文字与背景时的 WCAG 对比度。

200#CBDCE5
500#768F9B
800#374952
  • 200 ↔ 500：2.42:1（FAIL）
  • 500 ↔ 800：2.76:1（FAIL）
  • 200 ↔ 800：6.66:1（AA）

三对里达到 AA 正文（4.5:1）的有 1 对；达到 3:1（大字、图标、描边）的有 1 对。剩下的组合低于 3:1，不要用于文字。

配色组合

旋转色相环，同时保持明度稳定。

如何使用

三步让颜色保持可读且克制。

为何有效

这套配色背后的感知依据。

这六组都按色相旋转生成、明度接近，组内最高对比度落在 1.00:1–1.87:1 之间。它们适合做色块、图表与图形，不适合互相承载文字；需要文字时用中性色或同一色阶的深档。

互补色

位于色相环对面，用对比让主色更锐利。

#9EB8C4#C6ADA2

最佳用途: 行动按钮与单一功能强调

分裂互补

取对面色相的两侧邻色，比直接互补更柔和。

#9EB8C4#C8ABAB#BFB19C

最佳用途: 带两个强调色的营销版面

三角配色

三个色相均分色环，活泼但需要一个主导。

#9EB8C4#C4ABB7#B5B59D

最佳用途: 活动视觉与俏皮的杂志跨页

类似色

色环上的相邻色，安静、统一且易于扫读。

#9CBABB#9EB8C4#A6B4C9

最佳用途: 背景、图表与平静的产品页

单色

同一色相贯穿明度阶梯，克制而高级。

#72848D#9EB8C4#B9CCD5

最佳用途: 设计系统、包装与字体层级

四色配色

两组互补色，层次丰富但需要严格的比例。

#9EB8C4#B1B0C8#C6ADA2#B5B59D

最佳用途: 复杂仪表盘与多业务品牌

导出色阶

CSS

:root {
  --brand-50: #EFF7FA;
  --brand-100: #E3EFF5;
  --brand-200: #CBDCE5;
  --brand-300: #B1C7D1;
  --brand-400: #96AEB9;
  --brand-500: #768F9B;
  --brand-600: #607782;
  --brand-700: #4B606A;
  --brand-800: #374952;
  --brand-900: #26343A;
  --brand-950: #182227;
}

Tailwind

theme: {
  extend: {
    colors: {
      brand: {
        50: '#EFF7FA',
        100: '#E3EFF5',
        200: '#CBDCE5',
        300: '#B1C7D1',
        400: '#96AEB9',
        500: '#768F9B',
        600: '#607782',
        700: '#4B606A',
        800: '#374952',
        900: '#26343A',
        950: '#182227',
      },
    },
  },
}

Figma

{
  "brand": {
    "50": {
      "$type": "color",
      "$value": "#EFF7FA"
    },
    "100": {
      "$type": "color",
      "$value": "#E3EFF5"
    },
    "200": {
      "$type": "color",
      "$value": "#CBDCE5"
    },
    "300": {
      "$type": "color",
      "$value": "#B1C7D1"
    },
    "400": {
      "$type": "color",
      "$value": "#96AEB9"
    },
    "500": {
      "$type": "color",
      "$value": "#768F9B"
    },
    "600": {
      "$type": "color",
      "$value": "#607782"
    },
    "700": {
      "$type": "color",
      "$value": "#4B606A"
    },
    "800": {
      "$type": "color",
      "$value": "#374952"
    },
    "900": {
      "$type": "color",
      "$value": "#26343A"
    },
    "950": {
      "$type": "color",
      "$value": "#182227"
    }
  }
}

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1100" height="120">
  <rect x="0" y="0" width="100" height="90" fill="#EFF7FA"/>
  <rect x="100" y="0" width="100" height="90" fill="#E3EFF5"/>
  <rect x="200" y="0" width="100" height="90" fill="#CBDCE5"/>
  <rect x="300" y="0" width="100" height="90" fill="#B1C7D1"/>
  <rect x="400" y="0" width="100" height="90" fill="#96AEB9"/>
  <rect x="500" y="0" width="100" height="90" fill="#768F9B"/>
  <rect x="600" y="0" width="100" height="90" fill="#607782"/>
  <rect x="700" y="0" width="100" height="90" fill="#4B606A"/>
  <rect x="800" y="0" width="100" height="90" fill="#374952"/>
  <rect x="900" y="0" width="100" height="90" fill="#26343A"/>
  <rect x="1000" y="0" width="100" height="90" fill="#182227"/>
  <text x="50" y="112" font-family="monospace" font-size="10" text-anchor="middle" fill="#444">50</text>
  <text x="150" y="112" font-family="monospace" font-size="10" text-anchor="middle" fill="#444">100</text>
  <text x="250" y="112" font-family="monospace" font-size="10" text-anchor="middle" fill="#444">200</text>
  <text x="350" y="112" font-family="monospace" font-size="10" text-anchor="middle" fill="#444">300</text>
  <text x="450" y="112" font-family="monospace" font-size="10" text-anchor="middle" fill="#444">400</text>
  <text x="550" y="112" font-family="monospace" font-size="10" text-anchor="middle" fill="#444">500</text>
  <text x="650" y="112" font-family="monospace" font-size="10" text-anchor="middle" fill="#444">600</text>
  <text x="750" y="112" font-family="monospace" font-size="10" text-anchor="middle" fill="#444">700</text>
  <text x="850" y="112" font-family="monospace" font-size="10" text-anchor="middle" fill="#444">800</text>
  <text x="950" y="112" font-family="monospace" font-size="10" text-anchor="middle" fill="#444">900</text>
  <text x="1050" y="112" font-family="monospace" font-size="10" text-anchor="middle" fill="#444">950</text>
</svg>

iOS

extension UIColor {
  static let brand50 = UIColor(red: 0.937, green: 0.969, blue: 0.980, alpha: 1.0)
  static let brand100 = UIColor(red: 0.890, green: 0.937, blue: 0.961, alpha: 1.0)
  static let brand200 = UIColor(red: 0.796, green: 0.863, blue: 0.898, alpha: 1.0)
  static let brand300 = UIColor(red: 0.694, green: 0.780, blue: 0.820, alpha: 1.0)
  static let brand400 = UIColor(red: 0.588, green: 0.682, blue: 0.725, alpha: 1.0)
  static let brand500 = UIColor(red: 0.463, green: 0.561, blue: 0.608, alpha: 1.0)
  static let brand600 = UIColor(red: 0.376, green: 0.467, blue: 0.510, alpha: 1.0)
  static let brand700 = UIColor(red: 0.294, green: 0.376, blue: 0.416, alpha: 1.0)
  static let brand800 = UIColor(red: 0.216, green: 0.286, blue: 0.322, alpha: 1.0)
  static let brand900 = UIColor(red: 0.149, green: 0.204, blue: 0.227, alpha: 1.0)
  static let brand950 = UIColor(red: 0.094, green: 0.133, blue: 0.153, alpha: 1.0)
}

Android

<resources>
  <color name="brand_50">#EFF7FA</color>
  <color name="brand_100">#E3EFF5</color>
  <color name="brand_200">#CBDCE5</color>
  <color name="brand_300">#B1C7D1</color>
  <color name="brand_400">#96AEB9</color>
  <color name="brand_500">#768F9B</color>
  <color name="brand_600">#607782</color>
  <color name="brand_700">#4B606A</color>
  <color name="brand_800">#374952</color>
  <color name="brand_900">#26343A</color>
  <color name="brand_950">#182227</color>
</resources>

原则

平衡

保留一个主色、一个辅助色和一个点缀色。

对比

上线前分别用白色和黑色测试正文。

和谐

旋转色相环，同时保持明度稳定。

颜色对比度检测

上线前分别用白色和黑色测试正文。

2.08 :1
FAIL
引用

把 缥 留给最需要被第一眼看到的那一个元素，其余部分交给 蓝 色系去衬托。

WCAG 对比度
预览
Aa / Bb
#9EB8C4 · 缥

WCAG 对比度标准

WCAG 2.2 规定了文字与界面元素的对比度下限。#9EB8C4 对白色的对比度为 2.08:1（FAIL），对黑色为 9.09:1（AAA）。可用下表按字号选择阈值。

等级正文大号文字（18pt+ / 14pt 粗体）图标与界面元素
AAA7 : 14.5 : 1—
AA4.5 : 13 : 13 : 1
不通过< 4.5 : 1< 3 : 1< 3 : 1

大号文字指 18pt 常规或 14pt 粗体；界面元素与相邻色需达到 3:1。AA 是常见的合规基线，AAA 为增强级。

技术格式

各色彩空间写法

HEX
#9EB8C4

CSS Color 4

RGB
158,184,196

sRGB / D65

HSL
199,24,69

HSL

OKLCH
oklch(0.767 0.033 227.4)

perceptual

LAB
73,-6,-9

CIE Lab

LCH
73,11,235

CIE LCH

XYZ
41,46,59

CIE XYZ

LUV
73,-14,-13

CIE LUV

HWB
199,62,23

CSS HWB

CMYK
19,6,0,23

print

实用格式

可直接使用的值

CSS
color: #9EB8C4;

custom properties

Tailwind
bg-[#9EB8C4] text-[#FFF]

arbitrary value

Android
#FF9EB8C4

ARGB

Flutter
Color(0xFF9EB8C4)

dart:ui

Photoshop
R 158 G 184 B 196 · C 19 M 6 Y 0 K 23

RGB / CMYK

Print
CMYK 19,6,0,23

FOGRA39

色彩分析

测量得到的色彩属性

明度
0.455

relative luminance · cool

对比
2.08 : 1

vs white · FAIL · cool

对比
9.09 : 1

vs black · AAA · cool

色相
199°

saturation 24% · cool

LCH
73,11,235

lightness 69% · cool

ΔE
9.8

天青 #A9D1E3 · cool

相近色

按 ΔE 排序，从 Irodori 全色库中找出最接近的颜色。

浅蓝 #B0C4DEΔE 9.5 天青 #A9D1E3ΔE 9.8 Мөнгө #BFC4C9ΔE 9.9 淡青蓝 #ADD8E6ΔE 11.8 银 #C0C0C0ΔE 11.9 璆琳 #9EA6A0ΔE 12.8

色盲模拟

色觉缺陷下的观感

预览
#9EB8C4
Protanopia
#B2B6C5
Deuteranopia
#ACB1C4
Tritanopia
#95BCBC

色觉缺陷下的观感 · ΔE 9.8

创意维度

文化、情绪与故事

情绪
平静, 可信, 技术, 稳定, 冷静

它常被读作能量、温暖、自信，并带一点仪式感。

色系
蓝 · oklch(0.767 0.033 227.4)

它常被读作能量、温暖、自信，并带一点仪式感。

用法
营销落地页

它常被读作能量、温暖、自信，并带一点仪式感。

风格
赢得信任的平静

它常被读作能量、温暖、自信，并带一点仪式感。

灵感来源
木

它常被读作能量、温暖、自信，并带一点仪式感。

同色谱其他颜色

曙色#D5A8B4品红#EC3A78胭脂#9D2933绛#6F2323朱砂#C3272B檀#B36D48绾#A9836D凝脂#EFE3DB琥珀#C8832C杏黄#EFA940秋香#C8AD78竹青#789262豆绿#9CCF9C璆琳#9EA6A0雪白#F0F3F1翠涛#4E8D6B
← 月白↻ नील黛蓝 →

常见问题

#9EB8C4 是什么颜色？
缥 的色值是 #9EB8C4，大写写作 #9EB8C4。RGB 为 rgb(158,184,196)，HSL 约为 hsl(199 24% 69%)，OKLCH 为 oklch(0.767 0.033 227.4)。
设计中如何使用 缥？
只给它一个视觉焦点，正文保持中性，并确认对白 2.08、对黑 9.09 的对比度。
缥 具备无障碍性吗？
对白对比度为 2.08（FAIL），对黑为 9.09（AAA）。级别达到 AA 时才可用于大字号。