#2196F3 Яркий Синий

Q: Какой это цвет — #2196F3?

Яркий Синий — это #2196F3, в верхнем регистре #2196F3. В RGB — rgb(33,150,243), в HSL примерно hsl(207 90% 54%), в OKLCH — oklch(0.658 0.169 248.8).

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

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

Q: Доступен ли Яркий Синий?

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

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

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

Кратко

Название	Яркий Синий
Транслитерация	Яркий Синий
Традиция	цифровой цвет
Семейство	Синий
HEX	#2196F3
RGB	rgb(33,150,243)
HSL	hsl(207 90% 54%)
HSV	hsv(207, 86%, 95%)
OKLCH	oklch(0.658 0.169 248.8)
LAB	lab(60.43 2.08 -55.11)
XYZ	28,29,89
CMYK	cmyk(86.4% 38.3% 0.0% 4.7%)
RAL	#D15B8F · Heather violet · RAL 4003

Об этом цвете

Яркий СинийСинийцифровой цвет

Спокойствие, вызывающее доверие

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

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

Сначала проверьте Яркий Синий (#2196F3) на нейтральной поверхности: акцент из семейства Синий сделает его осознанным, а не декоративным.

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

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

спокойныйнадёжныйтехническийустойчивыйпрохладный

Психология

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

спокойныйнадёжныйтехническийустойчивыйпрохладный

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

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

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

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

Символика

Что означает

довериекомпетентность и ясность

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

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

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

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

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

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

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

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

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

Сочетание

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

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

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

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

История

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

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

Вариации

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

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

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

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

0% #2196F3

10% #1E87DB

20% #1A78C2

30% #1769AA

40% #145A92

50% #114B7A

60% #0D3C61

70% #0A2D49

80% #071E31

90% #030F18

100% #000000

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

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

0% #2196F3

10% #37A1F4

20% #4DABF5

30% #64B6F7

40% #7AC0F8

50% #90CBF9

60% #A6D5FA

70% #BCE0FB

80% #D3EAFD

90% #E9F5FE

100% #FFFFFF

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

50#DEF9FF100#C6F2FF200#9EE0FF300#75C9FF400#4CAFFF500#138FEB600#0076CD700#005EAC800#00478A900#003266950#002146

Значение тёмной темы (AA): #0080DC · 4.59:1

Сценарии

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

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

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

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

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

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

สีเขียว TH ΔE 0.065

हरा IN ΔE 0.071

浅葱 JP ΔE 0.072

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

Ягаан MN ΔE 0.074

碧 KR ΔE 0.079

金 TB ΔE 0.097

琥珀 CN ΔE 0.098

Emas ID ΔE 0.100

Xanh VN ΔE 0.163

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

Teams 100 Fluent ΔE 0.011

Indigo 400 Tailwind ΔE 0.016

Blue 500 Open Color ΔE 0.016

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

Blue 5 Ant Design ΔE 0.016

Purple 400 Chakra ΔE 0.020

Indigo 400 UnoCSS ΔE 0.025

Indigo 400 Panda ΔE 0.025

Blue 9 Radix ΔE 0.026

Blue 11 Polaris ΔE 0.027

Primary 60 Material ΔE 0.042

Teal Bootstrap ΔE 0.099

Done Primer ΔE 0.105

Secondary StyleX ΔE 0.181

Brand (contract) vanilla-extract ΔE 0.187

RAL Classic

Heather violet · RAL 4003 RAL ΔE 0.074

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

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

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

200#9EE0FF

500#138FEB

800#00478A

200 ↔ 500: 2.37:1 (FAIL)
500 ↔ 800: 2.71:1 (FAIL)
200 ↔ 800: 6.42:1 (AA)

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

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

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

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

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

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

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

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

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

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

#2196F3#D27900

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

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

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

#2196F3#E5653A#AC9100

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

Триада

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

#2196F3#E45D7C#71A412

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

Аналоговая

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

#00A7D6#2196F3#7D82F6

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

Монохромная

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

#186CAF#2196F3#5FB3F6

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

Тетрада

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

#2196F3#AF70DF#D27900#71A412

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

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

CSS

:root {
  --brand-50: #DEF9FF;
  --brand-100: #C6F2FF;
  --brand-200: #9EE0FF;
  --brand-300: #75C9FF;
  --brand-400: #4CAFFF;
  --brand-500: #138FEB;
  --brand-600: #0076CD;
  --brand-700: #005EAC;
  --brand-800: #00478A;
  --brand-900: #003266;
  --brand-950: #002146;
}

Tailwind

theme: {
  extend: {
    colors: {
      brand: {
        50: '#DEF9FF',
        100: '#C6F2FF',
        200: '#9EE0FF',
        300: '#75C9FF',
        400: '#4CAFFF',
        500: '#138FEB',
        600: '#0076CD',
        700: '#005EAC',
        800: '#00478A',
        900: '#003266',
        950: '#002146',
      },
    },
  },
}

Figma

{
  "brand": {
    "50": {
      "$type": "color",
      "$value": "#DEF9FF"
    },
    "100": {
      "$type": "color",
      "$value": "#C6F2FF"
    },
    "200": {
      "$type": "color",
      "$value": "#9EE0FF"
    },
    "300": {
      "$type": "color",
      "$value": "#75C9FF"
    },
    "400": {
      "$type": "color",
      "$value": "#4CAFFF"
    },
    "500": {
      "$type": "color",
      "$value": "#138FEB"
    },
    "600": {
      "$type": "color",
      "$value": "#0076CD"
    },
    "700": {
      "$type": "color",
      "$value": "#005EAC"
    },
    "800": {
      "$type": "color",
      "$value": "#00478A"
    },
    "900": {
      "$type": "color",
      "$value": "#003266"
    },
    "950": {
      "$type": "color",
      "$value": "#002146"
    }
  }
}

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1100" height="120">
  <rect x="0" y="0" width="100" height="90" fill="#DEF9FF"/>
  <rect x="100" y="0" width="100" height="90" fill="#C6F2FF"/>
  <rect x="200" y="0" width="100" height="90" fill="#9EE0FF"/>
  <rect x="300" y="0" width="100" height="90" fill="#75C9FF"/>
  <rect x="400" y="0" width="100" height="90" fill="#4CAFFF"/>
  <rect x="500" y="0" width="100" height="90" fill="#138FEB"/>
  <rect x="600" y="0" width="100" height="90" fill="#0076CD"/>
  <rect x="700" y="0" width="100" height="90" fill="#005EAC"/>
  <rect x="800" y="0" width="100" height="90" fill="#00478A"/>
  <rect x="900" y="0" width="100" height="90" fill="#003266"/>
  <rect x="1000" y="0" width="100" height="90" fill="#002146"/>
  <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.871, green: 0.976, blue: 1.000, alpha: 1.0)
  static let brand100 = UIColor(red: 0.776, green: 0.949, blue: 1.000, alpha: 1.0)
  static let brand200 = UIColor(red: 0.620, green: 0.878, blue: 1.000, alpha: 1.0)
  static let brand300 = UIColor(red: 0.459, green: 0.788, blue: 1.000, alpha: 1.0)
  static let brand400 = UIColor(red: 0.298, green: 0.686, blue: 1.000, alpha: 1.0)
  static let brand500 = UIColor(red: 0.075, green: 0.561, blue: 0.922, alpha: 1.0)
  static let brand600 = UIColor(red: 0.000, green: 0.463, blue: 0.804, alpha: 1.0)
  static let brand700 = UIColor(red: 0.000, green: 0.369, blue: 0.675, alpha: 1.0)
  static let brand800 = UIColor(red: 0.000, green: 0.278, blue: 0.541, alpha: 1.0)
  static let brand900 = UIColor(red: 0.000, green: 0.196, blue: 0.400, alpha: 1.0)
  static let brand950 = UIColor(red: 0.000, green: 0.129, blue: 0.275, alpha: 1.0)
}

Android

<resources>
  <color name="brand_50">#DEF9FF</color>
  <color name="brand_100">#C6F2FF</color>
  <color name="brand_200">#9EE0FF</color>
  <color name="brand_300">#75C9FF</color>
  <color name="brand_400">#4CAFFF</color>
  <color name="brand_500">#138FEB</color>
  <color name="brand_600">#0076CD</color>
  <color name="brand_700">#005EAC</color>
  <color name="brand_800">#00478A</color>
  <color name="brand_900">#003266</color>
  <color name="brand_950">#002146</color>
</resources>

Принципы

Баланс

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

Контраст

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

Гармония

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

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

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

Цвет текста

Фон

3.12 :1

FAIL

Цитата

Контраст WCAG

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

Aa / Bb

#2196F3 · Яркий Синий

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

WCAG 2.2 задаёт минимальный контраст для текста и элементов интерфейса. #2196F3 даёт 3.12:1 к белому (FAIL) и 6.04: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

#2196F3

CSS Color 4

RGB

33,150,243

sRGB / D65

HSL

207,90,54

HSL

OKLCH

oklch(0.658 0.169 248.8)

perceptual

LAB

60,2,-55

CIE Lab

LCH

60,55,272

CIE LCH

XYZ

28,29,89

CIE XYZ

LUV

60,-35,-88

CIE LUV

HWB

207,13,5

CSS HWB

CMYK

86,38,0,5

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

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

CSS

color: #2196F3;

custom properties

Tailwind

bg-[#2196F3] text-[#FFF]

arbitrary value

Android

#FF2196F3

ARGB

Flutter

Color(0xFF2196F3)

dart:ui

Photoshop

R 33 G 150 B 243 · C 86 M 38 Y 0 K 5

RGB / CMYK

CMYK 86,38,0,5

FOGRA39

Анализ цвета

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

Светлота

0.286

relative luminance · cool

Контраст

3.12 : 1

vs white · FAIL · cool

Контраст

6.04 : 1

vs black · AA · cool

Тон

207°

saturation 90% · cool

LCH

60,55,272

lightness 54% · cool

ΔE

48.3

天青 #A9D1E3 · cool

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

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

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

#2196F3

Protanopia

#7192F8

Deuteranopia

#567AF1

Tritanopia

#00ADB2

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