Полный гид по оттенкам синего цвета

Иван Корнев·26.05.2026·⏱5 мин

Синий — самый популярный цвет в корпоративном и цифровом дизайне благодаря ассоциациям с надежностью, спокойствием и профессионализмом. В этой статье вы найдете структурированную палитру основных оттенков синего с точными HEX и RGB кодами, готовые схемы сочетаний для разных задач и правила использования цвета в интерфейсах, чтобы избежать визуального шума.

Психология и применение синего в дизайне

Синий спектр воспринимается человеком как «холодный» и отступающий, что позволяет использовать его для создания глубины и объема. В брендинге он доминирует в финансовом секторе (банки, финтех), IT-сфере и медицине, так как подсознательно снижает тревожность и повышает доверие.

В веб-дизайне синий выполняет две ключевые функции:

Структурная: темные оттенки (Navy, Midnight) используются для хедеров, футеров и текста.
Интерактивная: яркие оттенки (Royal Blue, Azure) применяются для кнопок (CTA), ссылок и активных состояний элементов.

Для создания современного «чистого» интерфейса избегайте чистого синего #0000FF. Он слишком агрессивен для глаз. Используйте более сложные оттенки с примесью серого (Steel Blue) или белого (Cornflower Blue).

Таблица популярных оттенков синего

Ниже приведены основные оттенки, разделенные по светлоте и насыщенности. Коды универсальны для CSS, графических редакторов и полиграфии (при конвертации в CMYK).

Темные и глубокие оттенки

Идеальны для фона, основного текста и создания контраста.

Название	HEX	RGB	Описание
Midnight Blue	`#191970`	25, 25, 112	Глубокий, почти черный синий. Хорош для ночных тем.
Navy Blue	`#000080`	0, 0, 128	Классический темно-синий. Стандарт для делового стиля.
Zaffre	`#0818A8`	8, 24, 168	Насыщенный пигментный синий.
Indigo	`#4B0082`	75, 0, 130	Граница синего и фиолетового. Мистический оттенок.
Cobalt Blue	`#0047AB`	0, 71, 171	Яркий, но темный. Часто используется в логотипах.

Яркие и насыщенные оттенки

Подходят для акцентов, кнопок и привлечения внимания.

Название	HEX	RGB	Описание
Blue (Pure)	`#0000FF`	0, 0, 255	Базовый синий из модели RGB. Режет глаз в больших пятнах.
Ultramarine	`#0437F2`	4, 55, 242	Глубокий яркий синий. Исторически дорогой пигмент.
Royal Blue	`#4169E1`	65, 105, 225	Сбалансированный яркий синий. Универсален для UI.
Sapphire	`#0F52BA`	15, 82, 186	Цвет сапфира. Благородный и насыщенный.
Cerulean	`#2A52BE`	42, 82, 190	«Небесный» яркий синий. Часто встречается в природе.

Светлые и пастельные оттенки

Используются для фонов, подложек карточек и второстепенных элементов.

Название	HEX	RGB	Описание
Steel Blue	`#4682B4`	70, 130, 180	Серо-синий. Спокойный, не утомляет глаза.
Cornflower	`#6495ED`	100, 149, 237	Васильковый. Мягкий и дружелюбный.
Sky Blue	`#87CEEB`	135, 206, 235	Небесно-голубой. Ассоциируется с легкостью.
Baby Blue	`#89CFF0`	137, 207, 240	Нежный голубой. Популярен в детских темах.
Powder Blue	`#B6D0E2`	182, 208, 226	Пудрово-голубой. Отличный фон для контента.
Light Blue	`#ADD8E6`	173, 216, 230	Светло-голубой стандарт.
Azure	`#F0FFFF`	240, 255, 255	Очень светлый, почти белый с холодным подтоном.

Как читать коды: HEX-код #RRGGBB состоит из трех пар символов, отвечающих за интенсивность Красного (Red), Зеленого (Green) и Синего (Blue). У чистого синего #0000FF красная и зеленая составляющие равны нулю.

Готовые цветовые палитры

Выбор сочетаний зависит от цели дизайна. Вот четыре проверенные схемы для разных задач.

1. Корпоративный стиль (Trust & Stability)

Строгая схема для банков, юридических фирм и B2B-сервисов. Высокий контраст, минимум визуального шума.

Основной: #000080 (Navy Blue)
Вторичный: #4682B4 (Steel Blue)
Фон/Воздух: #F0FFFF (Azure)
Акцент: #FFFFFF (White) или #D3D3D3 (Light Gray)

2. Технологичный SaaS (Modern Tech)

Яркая, энергичная палитра для стартапов, приложений и IT-продуктов. Использует чистые, но не режущие глаза тона.

Основной: #4169E1 (Royal Blue)
Темный для текста: #191970 (Midnight Blue)
Акцент/Кнопки: #00BFFF (Deep Sky Blue — дополнительный яркий тон)
Фон: #F5F9FC (Очень светлый серо-голубой)

3. Премиальный и элегантный (Luxury)

Глубокие, сложные оттенки с низким уровнем яркости. Хорошо работают с золотыми или медными акцентами.

Основной: #0F52BA (Sapphire)
Глубина: #191970 (Midnight Blue)
Мягкий переход: #6495ED (Cornflower)
Акцент: #C0C0C0 (Silver) или #FFD700 (Gold)

4. Легкость и здоровье (Wellness & Medical)

Пастельные, воздушные тона, создающие ощущение чистоты и безопасности.

Основной: #87CEEB (Sky Blue)
Дополнительный: #B6D0E2 (Powder Blue)
Текст: #2F4F4F (Dark Slate Gray — для мягкого контраста)
Фон: #FFFFFF (White)

Частые ошибки при работе с синим

Отсутствие контраста. Светло-голубой текст на белом фоне (#ADD8E6 на #FFFFFF) нечитаем. Всегда проверяйте соотношение контрастности (WCAG AA标准要求 минимум 4.5:1 для обычного текста).
Эффект «холодного морга». Использование только синих оттенков без теплых или нейтральных включений делает интерфейс безжизненным. Добавляйте белый, светло-серый или даже теплый бежевый для баланса.
Игнорирование дальтонизма. Синий цвет обычно хорошо различим, но сочетание синего с фиолетовым или темно-красным может быть проблематичным для людей с нарушением цветовосприятия. Дублируйте смысл цветом иконками или текстом.

Никогда не используйте чистый синий #0000FF для крупного текста на черном фоне. Это вызывает эффект «вибрации» границ (хроматическая аберрация), что быстро утомляет глаза пользователя.

FAQ

Какой синий цвет лучше всего подходит для кнопки «Купить»? Лучше всего подходят оттенки Royal Blue (#4169E1) или Cerulean (#2A52BE). Они достаточно яркие, чтобы выделяться, но не такие агрессивные, как чистый #0000FF.

Чем отличается Navy Blue от Midnight Blue? Navy Blue (#000080) имеет четкий синий подтон и традиционно ассоциируется с морской формой. Midnight Blue (`#191970») темнее и ближе к черному, часто используется как замена черному цвету в дизайне для смягчения контраста.

Можно ли использовать синий в качестве основного цвета для фона всего сайта? Да, но только темные оттенки (Navy, Midnight) в сочетании со светлым текстом. Светлые синие фоны (Sky, Powder) допустимы для отдельных секций, но могут снижать читаемость основного контента, если не подобрать правильный цвет шрифта.

Какой HEX-код у цвета «Индиго»? Классический веб-индиго имеет код #4B0082. Это один из семи цветов радуги, находящийся на стыке синего и фиолетового спектров.