С чем сочетается голубой, готовая шкала оттенков и десять палитр с ролями цветов, кодами HEX / RGB / HSL / OKLCH и проверкой контраста.
Голубой лучше всего сочетается с белым и тёплыми нейтральными — песочным, бежевым, светлым тёплым серым; с тёмно-синим и графитом, когда нужна строгость; с коралловым, оранжевым или жёлтым, когда нужен акцент — это его противоположности на цветовом круге. В интерфейсе голубой удобнее всего держать акцентом примерно на 10% экрана, а фон — почти белым или, в тёмной теме, глубоким сине-чёрным. Ниже — шкала оттенков, семь проверенных пар и десять готовых палитр с кодами и контрастом.
В русском языке голубой и синий — разные цвета, в английском оба называются blue. Голубой — светлая часть синего семейства, от ледяного до лазурного; кобальт и полночный — уже синие. Ниже — оттенки, которые чаще всего встречаются в интерфейсах. Если у оттенка есть имя в CSS, оно указано: его можно писать прямо в стилях.
Ледяной
Фон страницы: белый с холодным отливом
Пудровый
Мягкие подложки, пастельные бренды
Небесный
Иллюстрации и метки, не текст на белом
Голубой
Эталонный голубой: акценты на тёмном фоне
Васильковый
Дружелюбный акцент с фиолетовым отливом
Лазурный
Яркие призывы, графики
Ярко-голубой
Ссылки и обводка фокуса в тёмной теме
Стальной
Спокойные технические интерфейсы
Королевский синий
Уверенные кнопки с белым текстом
Джинсовый
Основной цвет финтеха и SaaS
Кобальтовый
Заголовки и строгие корпоративные акценты
Полночный
Тёмные фоны и текст вместо чёрного
Одиннадцать шагов от 50 до 950, построены в OKLCH: шаги ровные по воспринимаемой светлоте, поэтому шкала предсказуемо ведёт себя и в светлой, и в тёмной теме. Цифры под шагом — его контраст с белым и с чёрным. Для основного текста на белом берите 700 и темнее.
□ — контраст с белым · ■ — с чёрным. Для текста нужно от 4.5
Сочетание держится на одном из контрастов: по светлоте, по температуре или по положению на цветовом круге. Каждая пара ниже работает на одном из них.
Самая безопасная пара: чисто и много воздуха. Голубой здесь единственный цвет, поэтому сам становится акцентом. Подходит медицине, SaaS и сервисам, где важна ясность.
Монохром: один оттенок разной светлоты. Выглядит собранно и дорого, но просит тёплый нейтрал или яркий акцент, иначе палитра становится мрачной.
Противоположности на цветовом круге: голубой успокаивает, коралл притягивает взгляд. Коралл — только для главного действия, 5–10% площади.
Энергичная пара для технологичных и молодых продуктов. Жёлтый на белом не читается как текст (1.4:1) — только плашки, маркеры, иллюстрации.
Тепло песка уравновешивает холод голубого: спокойно, но не стерильно. Работает для путешествий, интерьеров, wellness.
Строгая техническая пара: графит держит текст и каркас, голубой отмечает интерактивное. Классика интерфейсов для разработчиков.
Соседи на цветовом круге: мягко и свежо. Чтобы они не слились, разводите их по светлоте.
У каждого цвета — роль: фон страницы, поверхность карточек, текст, главный акцент для кнопок и второй — для меток и выделений. Код копируется нажатием на цвет, CSS-переменные — одной кнопкой, карточку палитры можно сохранить картинкой. Контраст проверен по WCAG: AA — норма для текста, AAA — с запасом.
01 / 10
светлая · холодная · спокойная
Когда брать SaaS, панели управления, клиники — везде, где продают порядок и ясность.
Совет Светло-голубой #BFD9EC — не для текста: только метки, выделения и активные строки таблиц.
| Роль | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|
| Фон | ||||
| Поверхность | ||||
| Текст | ||||
| Акцент | ||||
| Второй акцент |
Пример использования
02 / 10
строгая · деловая · светлая
Когда брать Финансы, юристы, консалтинг, B2B — там, где продают надёжность.
Совет Стальной серый #8A99AD — для второстепенного текста, иконок и рамок; кнопка только синяя.
| Роль | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|
| Фон | ||||
| Поверхность | ||||
| Текст | ||||
| Акцент | ||||
| Второй акцент |
Пример использования
03 / 10
тёплая база · мягкая · природная
Когда брать Путешествия, архитектура, интерьеры, wellness.
Совет Песочный #D9B48F — второй акцент: подложки цитат, иллюстрации. Текст на нём — только тёмный.
| Роль | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|
| Фон | ||||
| Поверхность | ||||
| Текст | ||||
| Акцент | ||||
| Второй акцент |
Пример использования
04 / 10
контрастная · энергичная · светлая
Когда брать Потребительские приложения, образование, события, маркетплейсы.
Совет Коралл — только главное действие и уведомления. Если закрасить им полэкрана, голубой пропадёт.
| Роль | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|
| Фон | ||||
| Поверхность | ||||
| Текст | ||||
| Акцент | ||||
| Второй акцент |
Пример использования
05 / 10
тёмная тема · техничная · собранная
Когда брать Инструменты разработчика, дашборды, финтех в тёмной теме.
Совет Акцент светлее и мягче, чем в светлой теме: насыщенный синий на тёмном фоне «гудит». Надпись на кнопке — тёмная.
| Роль | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|
| Фон | ||||
| Поверхность | ||||
| Текст | ||||
| Акцент | ||||
| Второй акцент |
Пример использования
06 / 10
пастельная · нежная · светлая
Когда брать Бьюти, детские товары, свадьбы, личные бренды.
Совет Акцент пастельный — белый текст на нём не читается. Подпись на кнопке тёмная, а саму кнопку выделяйте формой или обводкой.
| Роль | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|
| Фон | ||||
| Поверхность | ||||
| Текст | ||||
| Акцент | ||||
| Второй акцент |
Пример использования
07 / 10
строгая · техничная · приглушённая
Когда брать Производство, инжиниринг, логистика, промышленное оборудование.
Совет Янтарный #F2A93B — сигнальный цвет: предупреждения и главный призыв. Больше нигде.
| Роль | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|
| Фон | ||||
| Поверхность | ||||
| Текст | ||||
| Акцент | ||||
| Второй акцент |
Пример использования
08 / 10
яркая · технологичная · светлая
Когда брать Стартапы, ИИ-продукты, маркетинговые сайты.
Совет Лимонный #D6F35B — маркер: подсветка слов, бейджи, графики. Как текст на белом не работает.
| Роль | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|
| Фон | ||||
| Поверхность | ||||
| Текст | ||||
| Акцент | ||||
| Второй акцент |
Пример использования
09 / 10
премиальная · тёмная · тёплый акцент
Когда брать Премиальные услуги, недвижимость, отели, частные клубы.
Совет Золото — кнопки и тонкие линии, не заливки. Мягкий голубой #8FB1D6 — ссылки и второстепенные акценты.
| Роль | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|
| Фон | ||||
| Поверхность | ||||
| Текст | ||||
| Акцент | ||||
| Второй акцент |
Пример использования
10 / 10
свежая · спокойная · светлая
Когда брать Медицина, экология, вода, спорт.
Совет Голубой и бирюзовый близки по тону — разводите их по ролям: голубой для действий, бирюзовый для статусов и графиков.
| Роль | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|
| Фон | ||||
| Поверхность | ||||
| Текст | ||||
| Акцент | ||||
| Второй акцент |
Пример использования
01
60% площади — нейтральный фон, 30% — поверхности и текст, 10% — голубой акцент. Когда голубого больше трети экрана, он перестаёт быть акцентом, и кнопки теряются.
02
Основному тексту нужен контраст не меньше 4.5:1 (WCAG AA). Светло-голубой текст на белом почти всегда проваливает проверку: #87CEEB на белом — 1.7:1. Для текста на белом берите голубой от шага 700 по шкале выше: #0F68A2 даёт 6.0:1.
03
Если ссылки, кнопки, иконки и заголовки одного голубого цвета, человек не понимает, что кликабельно. Закрепите голубой за интерактивом, остальное — нейтральным.
04
На тёмном фоне акцент делают светлее и менее насыщенным — шаги 300–400, а фон не чёрным, а глубоким сине-чёрным: контраст мягче, глаза устают меньше.
05
Полностью холодная палитра выглядит стерильно. Один тёплый нейтрал — песочный, бежевый, тёплый серый — делает её живой, не меняя характера.
06
Финтех, медицина, SaaS, B2B-сервисы, образование — сферы, где важны доверие и ясность. Еде, моде и развлечениям рядом обычно нужен тёплый акцент.
«Компьютерный» синий режет глаз и выглядит как ссылка из 1998 года. Сдвигайте его к лазурному или приглушайте.
Популярная кнопка, которую невозможно прочитать: белый на #87CEEB — 1.7:1. Либо затемняйте кнопку, либо делайте текст тёмным.
Оттенки, подобранные на глаз, спорят друг с другом. Берите их из одной шкалы — тогда они различаются только светлотой.
Большие поля насыщенного голубого утомляют. Для фона — шаги 50–100, насыщенный голубой — для акцентов.
Серые с холодным отливом плюс голубой — «больничная» палитра. Добавьте один тёплый нейтрал.
С белым и тёплыми нейтральными — для спокойной базы; с тёмно-синим и графитом — для строгости; с коралловым, оранжевым или жёлтым — для яркого акцента. Коралл и оранжевый стоят напротив голубого на цветовом круге, поэтому дают самый заметный контраст.
Тот, на котором белый текст даёт контраст от 4.5:1: по шкале выше это 700 и темнее, например #0F68A2. Светлые шаги 300–500 оставьте для фонов, меток и тёмной темы.
В русском это разные слова: голубой — светлые оттенки синего, от ледяного до лазурного, синий — насыщенные и тёмные. В английском оба называются blue. В дизайне граница условная: это одна шкала, просто разные её шаги.
Холодный. Но у голубого есть оттенки теплее, с зеленоватым отливом (бирюзовый), и холоднее, с фиолетовым (васильковый). Теплее палитру делает не сам голубой, а нейтралы рядом с ним — песочный, бежевый, тёплый серый.
На светло-голубом (шаги 50–300) — тёмный: почти чёрный с синим отливом, например #0F2233. На насыщенном и тёмном (от 700) — белый. Проверяйте контраст: для обычного текста — от 4.5:1.
Добавьте комплементарный акцент — коралл, оранжевый или лимонный — на 5–10% площади и один тёплый нейтрал для фона. Второй способ — сыграть на светлоте: очень светлый фон, насыщенный акцент и глубокий тёмно-синий текст.
