#9B8EC2 藤色

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

藤色 — это #9B8EC2, в верхнем регистре #9B8EC2. В RGB — rgb(155,142,194), в HSL примерно hsl(255 30% 66%), в OKLCH — oklch(0.677 0.077 295.7).

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

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

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

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

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

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

Кратко

Название	藤色
Транслитерация	fuji-iro
Традиция	Японские традиционные цвета
Признак	Весна
Семейство	Фиолетовый
HEX	#9B8EC2
RGB	rgb(155,142,194)
HSL	hsl(255 30% 66%)
HSV	hsv(255, 27%, 76%)
OKLCH	oklch(0.677 0.077 295.7)
LAB	lab(61.83 15.67 -25.20)
XYZ	33,30,55
CMYK	cmyk(20.1% 26.8% 0.0% 23.9%)
RAL	#86A47C · Pale green · RAL 6021

Об этом цвете

fuji-iroФиолетовыйЯпонские традиционные цвета

Роскошь с секретом

藤色 — это #9B8EC2, тон семейства Фиолетовый с ясным культурным происхождением. Сам по себе он читается как часть этого семейства; его корни (Японские традиционные цвета) добавляют второй смысловой слой.

Совет дизайнеру

Сначала проверьте 藤色 (#9B8EC2) на нейтральной поверхности: акцент из семейства Фиолетовый сделает его осознанным, а не декоративным.

Лучшее применение

Отдайте 藤色 единственному элементу, который должен бросаться в глаза первым, а остальную палитру Фиолетовый оставьте ему в поддержку.

роскошныйтворческийтаинственныйдуховныйизысканный

Психология

Как воспринимается

роскошныйтворческийтаинственныйдуховныйизысканный

Психологический эффект

藤色 повышает воспринимаемую энергию композиции Фиолетовый и направляет взгляд к действию.

Эмоциональное воздействие

Он ощущается непосредственным и тёплым, поэтому оживляет сдержанную вёрстку, не делая её шумной.

Символика

Что означает

творчествопрестиж и воображение

Культурное значение

В контексте, связанном с Японские традиционные цвета, тон несёт местные отсылки, поэтому до кампании проверьте его символику.

Положительные ассоциации

Положительные ассоциации тяготеют к творчество, престиж и воображение; потому он и появляется на приглашениях и в сезонных работах.

Осторожно в применении

Слишком большая площадь читается как искусственность или элитарность при переборе, поэтому держите его в акцентах и малых полях.

Где встречается

Типичные задачи дизайна

Лендинги кампаний: Отдайте 藤色 единственному элементу, который должен бросаться в глаза первым, а остальную палитру Фиолетовый оставьте ему в поддержку.
Системы журнальных обложек: Отдайте 藤色 единственному элементу, который должен бросаться в глаза первым, а остальную палитру Фиолетовый оставьте ему в поддержку.
Этикетки упаковки продуктов: Отдайте 藤色 единственному элементу, который должен бросаться в глаза первым, а остальную палитру Фиолетовый оставьте ему в поддержку.
Акценты статусов на дашборде: Отдайте 藤色 единственному элементу, который должен бросаться в глаза первым, а остальную палитру Фиолетовый оставьте ему в поддержку.
Навигационные вывески в рознице: Отдайте 藤色 единственному элементу, который должен бросаться в глаза первым, а остальную палитру Фиолетовый оставьте ему в поддержку.

Сочетание

Цвета, которые его дополняют

#959E66редакционные макеты, которым нужен один тёплый фокус

#665989интерфейсы, где акцент должен оставаться читаемым

#BD8B69упаковка, которая должна выглядеть аппетитно без крика

История

Пигменты и происхождение

До синтетических красителей 藤色 составляли из минеральных и растительных пигментов; семейство Фиолетовый зависело от охры, марены и индиго. Экраны сегодня воспроизводят его стабильнее любого отдельного пигмента.

Происхождение и источники

Этимология: «Фудзи-иро» — светло-фиолетовый цвет глицинии, любимый аристократами эпохи Хэйан.

Источники

Wikipedia — Traditional colors of Japan

Вариации

Тёмные ступени затемняют, светлые осветляют, а угол тона остаётся прежним.

Профессиональный совет: Тёмные ступени затемняют, светлые осветляют, а угол тона остаётся прежним.

Тёмные ступени

Более тёмные ступени в том же тоне.

0% #9B8EC2

10% #8C80AF

20% #7C729B

30% #6D6388

40% #5D5574

50% #4E4761

60% #3E394E

70% #2F2B3A

80% #1F1C27

90% #0F0E13

100% #000000

Светлые ступени

Более светлые ступени для поверхностей и фона.

0% #9B8EC2

10% #A599C8

20% #AFA5CE

30% #B9B0D4

40% #C3BBDA

50% #CDC7E1

60% #D7D2E7

70% #E1DDED

80% #EBE8F3

90% #F5F4F9

100% #FFFFFF

Шкала дизайна 50–950

50#F6F3FF100#EEE9FF200#DBD3F8300#C5BBE8400#ADA0D2500#8E81B5600#766A9A700#5F547F800#493F64900#342C49950#221D31

Значение тёмной темы (AA): #8477A9 · 4.66:1

Сценарии

Тёмные ступени → ховер, тени, глубина
Светлые ступени → светлые акценты, поверхности
Баланс → целостные цветовые системы

Совет по дизайну

Достаточно одного ведущего тона, одного поддерживающего и одного акцента.

Сравнение цветовых систем

Ближайший именованный цвет в каждой традиции и дизайн-системе по OKLCH ΔE. Чем меньше значение, тем ближе.

Азиатские традиции

藤色 JP ΔE 0.000

चंदन IN ΔE 0.031

碧 KR ΔE 0.038

Показать все (6)

绾 CN ΔE 0.043

金 TB ΔE 0.058

Алт MN ΔE 0.063

Emas ID ΔE 0.065

สีเขียว TH ΔE 0.085

Xanh VN ΔE 0.183

Дизайн-системы

Tertiary 60 Material ΔE 0.019

Teal 400 Chakra ΔE 0.040

Cyan 600 Open Color ΔE 0.041

Показать все (11)

Slate 400 Tailwind ΔE 0.046

Brown 9 Radix ΔE 0.048

Slate 400 UnoCSS ΔE 0.054

Slate 400 Panda ΔE 0.054

Teal 11 Polaris ΔE 0.056

Neutral muted Primer ΔE 0.070

Cyan 7 Ant Design ΔE 0.070

Teams 110 Fluent ΔE 0.071

Teal Bootstrap ΔE 0.107

Secondary StyleX ΔE 0.109

Brand (alternate) vanilla-extract ΔE 0.191

RAL Classic

Pale green · RAL 6021 RAL ΔE 0.024

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

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

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

Светлота L* 61.8 — 43-е место из 116 (средняя треть).
Насыщенность C 29.676 — 82-е место (низкая насыщенность).
Оттенок 255°, семейство фиолетовое семейство.
Ближайший сосед в том же семействе оттенков: «空色», ΔE OK 0.065.

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

Три ступени из шкалы 50–950 цвета «藤色»: оттенок тот же, различается только светлота. Ниже — контраст WCAG, когда одна ступень служит текстом на другой.

200#DBD3F8

500#8E81B5

800#493F64

200 ↔ 500: 2.46:1 (FAIL)
500 ↔ 800: 2.73:1 (FAIL)
200 ↔ 800: 6.74:1 (AA)

Пар с 4,5:1 (основной текст AA): 1 из 3. Пар с 3:1 (крупный текст, иконки, рамки): 1 из 3. Остальные ниже 3:1 — текст на них лучше не размещать.

Цветовые сочетания

Вращайте цветовой круг, сохраняя светлоту.

Как использовать

Три шага сохраняют читаемость и осознанность цвета.

Почему работает

Перцептивное обоснование палитры.

Все шесть наборов построены поворотом оттенка при близкой светлоте, поэтому лучший контраст внутри набора лежит в диапазоне 1.00:1–1.77:1. Используйте их для плашек, графиков и фигур, а не как текст друг на друге; для текста берите нейтральный цвет или более тёмную ступень той же шкалы.

Комплементарная

Напротив в цветовом круге; контраст обостряет фокусный цвет.

#9B8EC2#959E66

Лучшее применение: Призывы к действию и акценты одной функции

Раздельно-комплементарная

Два соседа противоположного тона; мягче прямого контраста.

#9B8EC2#AD945F#79A47B

Лучшее применение: Сбалансированные маркетинговые макеты с двумя акцентами

Триада

Три равноудалённых тона; живо, но нужен один ведущий голос.

#9B8EC2#BD8B69#60A795

Лучшее применение: Айдентика событий и игривые журнальные развороты

Аналоговая

Соседние тоны круга; спокойно, цельно и легко читается взглядом.

#8197C8#9B8EC2#B087B1

Лучшее применение: Фоны, графики и спокойные страницы продукта

Монохромная

Один тон по ступеням светлоты; дисциплинированно и премиально.

#70668C#9B8EC2#B7AED3

Лучшее применение: Дизайн-системы, упаковка и типографическая иерархия

Тетрада

Две комплементарные пары; богато, но требует строгих пропорций.

#9B8EC2#BE8499#959E66#60A795

Лучшее применение: Сложные дашборды и бренды с несколькими сервисами

Экспорт шкалы

CSS

:root {
  --brand-50: #F6F3FF;
  --brand-100: #EEE9FF;
  --brand-200: #DBD3F8;
  --brand-300: #C5BBE8;
  --brand-400: #ADA0D2;
  --brand-500: #8E81B5;
  --brand-600: #766A9A;
  --brand-700: #5F547F;
  --brand-800: #493F64;
  --brand-900: #342C49;
  --brand-950: #221D31;
}

Tailwind

theme: {
  extend: {
    colors: {
      brand: {
        50: '#F6F3FF',
        100: '#EEE9FF',
        200: '#DBD3F8',
        300: '#C5BBE8',
        400: '#ADA0D2',
        500: '#8E81B5',
        600: '#766A9A',
        700: '#5F547F',
        800: '#493F64',
        900: '#342C49',
        950: '#221D31',
      },
    },
  },
}

Figma

{
  "brand": {
    "50": {
      "$type": "color",
      "$value": "#F6F3FF"
    },
    "100": {
      "$type": "color",
      "$value": "#EEE9FF"
    },
    "200": {
      "$type": "color",
      "$value": "#DBD3F8"
    },
    "300": {
      "$type": "color",
      "$value": "#C5BBE8"
    },
    "400": {
      "$type": "color",
      "$value": "#ADA0D2"
    },
    "500": {
      "$type": "color",
      "$value": "#8E81B5"
    },
    "600": {
      "$type": "color",
      "$value": "#766A9A"
    },
    "700": {
      "$type": "color",
      "$value": "#5F547F"
    },
    "800": {
      "$type": "color",
      "$value": "#493F64"
    },
    "900": {
      "$type": "color",
      "$value": "#342C49"
    },
    "950": {
      "$type": "color",
      "$value": "#221D31"
    }
  }
}

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1100" height="120">
  <rect x="0" y="0" width="100" height="90" fill="#F6F3FF"/>
  <rect x="100" y="0" width="100" height="90" fill="#EEE9FF"/>
  <rect x="200" y="0" width="100" height="90" fill="#DBD3F8"/>
  <rect x="300" y="0" width="100" height="90" fill="#C5BBE8"/>
  <rect x="400" y="0" width="100" height="90" fill="#ADA0D2"/>
  <rect x="500" y="0" width="100" height="90" fill="#8E81B5"/>
  <rect x="600" y="0" width="100" height="90" fill="#766A9A"/>
  <rect x="700" y="0" width="100" height="90" fill="#5F547F"/>
  <rect x="800" y="0" width="100" height="90" fill="#493F64"/>
  <rect x="900" y="0" width="100" height="90" fill="#342C49"/>
  <rect x="1000" y="0" width="100" height="90" fill="#221D31"/>
  <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.965, green: 0.953, blue: 1.000, alpha: 1.0)
  static let brand100 = UIColor(red: 0.933, green: 0.914, blue: 1.000, alpha: 1.0)
  static let brand200 = UIColor(red: 0.859, green: 0.827, blue: 0.973, alpha: 1.0)
  static let brand300 = UIColor(red: 0.773, green: 0.733, blue: 0.910, alpha: 1.0)
  static let brand400 = UIColor(red: 0.678, green: 0.627, blue: 0.824, alpha: 1.0)
  static let brand500 = UIColor(red: 0.557, green: 0.506, blue: 0.710, alpha: 1.0)
  static let brand600 = UIColor(red: 0.463, green: 0.416, blue: 0.604, alpha: 1.0)
  static let brand700 = UIColor(red: 0.373, green: 0.329, blue: 0.498, alpha: 1.0)
  static let brand800 = UIColor(red: 0.286, green: 0.247, blue: 0.392, alpha: 1.0)
  static let brand900 = UIColor(red: 0.204, green: 0.173, blue: 0.286, alpha: 1.0)
  static let brand950 = UIColor(red: 0.133, green: 0.114, blue: 0.192, alpha: 1.0)
}

Android

<resources>
  <color name="brand_50">#F6F3FF</color>
  <color name="brand_100">#EEE9FF</color>
  <color name="brand_200">#DBD3F8</color>
  <color name="brand_300">#C5BBE8</color>
  <color name="brand_400">#ADA0D2</color>
  <color name="brand_500">#8E81B5</color>
  <color name="brand_600">#766A9A</color>
  <color name="brand_700">#5F547F</color>
  <color name="brand_800">#493F64</color>
  <color name="brand_900">#342C49</color>
  <color name="brand_950">#221D31</color>
</resources>

Принципы

Баланс

Достаточно одного ведущего тона, одного поддерживающего и одного акцента.

Контраст

До релиза проверьте основной текст на белом и на чёрном.

Гармония

Вращайте цветовой круг, сохраняя светлоту.

Проверка контраста

До релиза проверьте основной текст на белом и на чёрном.

Цвет текста

Фон

2.98 :1

FAIL

Цитата

Контраст WCAG

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

Aa / Bb

#9B8EC2 · 藤色

Стандарты контраста WCAG

WCAG 2.2 задаёт минимальный контраст для текста и элементов интерфейса. #9B8EC2 даёт 2.98:1 к белому (FAIL) и 6.33:1 к чёрному (AA). Выберите порог по таблице ниже в зависимости от размера текста.

Уровень	Обычный текст	Крупный текст (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

#9B8EC2

CSS Color 4

RGB

155,142,194

sRGB / D65

HSL

255,30,66

HSL

OKLCH

oklch(0.677 0.077 295.7)

perceptual

LAB

62,16,-25

CIE Lab

LCH

62,30,302

CIE LCH

XYZ

33,30,55

CIE XYZ

LUV

62,3,-41

CIE LUV

HWB

255,56,24

CSS HWB

CMYK

20,27,0,24

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

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

CSS

color: #9B8EC2;

custom properties

Tailwind

bg-[#9B8EC2] text-[#FFF]

arbitrary value

Android

#FF9B8EC2

ARGB

Flutter

Color(0xFF9B8EC2)

dart:ui

Photoshop

R 155 G 142 B 194 · C 20 M 27 Y 0 K 24

RGB / CMYK

CMYK 20,27,0,24

FOGRA39

Анализ цвета

Измеренные свойства цвета

Светлота

0.302

relative luminance · cool

Контраст

2.98 : 1

vs white · FAIL · cool

Контраст

6.33 : 1

vs black · AA · cool

Тон

255°

saturation 30% · cool

LCH

62,30,302

lightness 66% · cool

ΔE

25.2

空色 #6AB0E8 · cool

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

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

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

#9B8EC2

Protanopia

#8595C5

Deuteranopia

#8794C0

Tritanopia

#95959E

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