#9EB8C4 缥

Q: Какой это цвет — #9EB8C4?

缥 — это #9EB8C4, в верхнем регистре #9EB8C4. В RGB — rgb(158,184,196), в HSL примерно hsl(199 24% 69%), в OKLCH — oklch(0.767 0.033 227.4).

Q: Как применять 缥 в дизайне?

Выделите один фокусный элемент, держите основной текст нейтральным и проверьте контраст 2.08 на белом и 9.09 на чёрном.

Q: Доступен ли 缥?

Контраст составляет 2.08 на белом (FAIL) и 9.09 на чёрном (AAA). Для крупного текста используйте его только при уровне AA.

Преобразование цвета

CMYK profile: Coated FOGRA39 · Запись следует CSS Color 4 и правилам контраста WCAG 2.2.

Кратко

Название	缥
Транслитерация	piǎo
Традиция	Китайские традиционные цвета
Признак	Дерево
Семейство	Синий
HEX	#9EB8C4
RGB	rgb(158,184,196)
HSL	hsl(199 24% 69%)
HSV	hsv(199, 19%, 77%)
OKLCH	oklch(0.767 0.033 227.4)
LAB	lab(73.24 -6.25 -9.03)
XYZ	41,46,59
CMYK	cmyk(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 Classic

Pebble grey · RAL 7032 RAL ΔE 0.017

Попробовать другой цвет

Место в библиотеке цветов

Эти числа получены ранжированием всех 116 традиционных цветов сайта на этапе сборки, а не написаны вручную.

Светлота L* 73.2 — 27-е место из 116 (светлая треть).
Насыщенность C 10.986 — 94-е место (низкая насыщенность).
Оттенок 199°, семейство синее семейство.
Ближайший сосед в том же семействе оттенков: «天青», ΔE OK 0.073.

Могут ли три ступени одного оттенка работать вместе

Три ступени из шкалы 50–950 цвета «缥»: оттенок тот же, различается только светлота. Ниже — контраст 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)

Пар с 4,5:1 (основной текст AA): 1 из 3. Пар с 3:1 (крупный текст, иконки, рамки): 1 из 3. Остальные ниже 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 жирный)	Иконки и элементы UI
AAA	7 : 1	4.5 : 1	—
AA	4.5 : 1	3 : 1	3 : 1
Не пройдено	< 4.5 : 1	< 3 : 1	< 3 : 1

Крупный текст — 18pt обычный или 14pt жирный. Элементам UI нужен контраст 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

Практические форматы

Готовые значения

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

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

Симулятор дальтонизма

Как выглядит при нарушении цветового зрения

Предпросмотр

#9EB8C4

Protanopia

#B2B6C5

Deuteranopia

#ACB1C4

Tritanopia

#95BCBC

Как выглядит при нарушении цветового зрения · ΔE 9.8