Тёмно-синий и белый, графит и серебро, чёрный с красным: 12 строгих цветов, холодная серая шкала и 10 палитр для деловых сайтов — с кодами и контрастом текста от 7:1.
Строгим сочетание делают три вещи: холодные нейтралы вместо тёплых, сильный контраст по светлоте и не больше одного акцента. База — тёмно-синий, графит или чёрный на белом и холодных серых, акцент — бордо, бутылочный зелёный или одна сигнальная красная деталь. Ниже — 12 строгих цветов с кодами, холодная серая шкала 50–950, семь сочетаний и десять палитр: пять светлых и пять тёмных, у всех текст с контрастом от 7:1.
Строгие цвета — тёмные и приглушённые, а светлые — холодные: белый и серые с едва заметным синеватым подтоном. Ярких среди них нет, даже акценты здесь глубокие: тёмно-синий, петроль, бутылочный, бордо.
Белый
Фон: строгой палитре чистый белый к лицу
Холодный белый
Второй фон, подложки разделов
Платиновый
Карточки, строки таблиц, разделители
Серебристый
Рамки, неактивные элементы
Стальной
Иконки и крупные подписи
Сланцевый
Второстепенный текст на белом
Графит
Основной текст, кнопки
Чёрный
Заголовки и фон тёмной темы
Тёмно-синий
Главный строгий цвет: шапка, кнопки
Петроль
Сине-зелёная замена тёмно-синему
Бутылочный
Тёмно-зелёная база для финансов и клубов
Бордо
Единственный акцент: линия, метка, кнопка
Одиннадцать шагов от 50 до 950, построены в OKLCH на одном синеватом тоне с очень низкой насыщенностью: серые остаются холодными от начала до конца и не уходят ни в зелень, ни в фиолетовый. Цифры под шагом — контраст с белым и с чёрным. Для текста на белом берите 600 и темнее, для основного текста — 700 и темнее.
□ — контраст с белым · ■ — с чёрным. Для текста нужно от 4.5
В каждом сочетании один цвет глубокий, другой светлый, а третий либо поддерживает нейтралы, либо становится единственным акцентом.
Классика деловых сайтов: банки, юристы, консалтинг. Синий вызывает доверие, белый даёт воздух, сталь берёт на себя второстепенное.
Самое строгое и самое контрастное. Архитектура, мода, редакционные сайты — там, где говорит типографика.
Мягче чёрно-белого, но так же собранно. Технологии, инженерия, B2B-сервисы.
Университетская классика: синий — база, бордо — нитка акцента. Образование, право, издательства.
Строго, но живо: тёмно-зелёный вместо синего. Финансы с историей, частные школы, консалтинг.
Холодный сине-зелёный — строгость без банковской скуки. Инженерия, медицина, аналитика.
Швейцарский стиль: два нейтрала и одна сигнальная деталь. Красного — не больше пары процентов экрана.
В каждой палитре одна глубокая база и не больше одного акцента. Основной текст везде с контрастом от 7:1 — строгость начинается с читаемости. Код копируется нажатием на цвет, CSS-переменные — одной кнопкой, карточку палитры можно сохранить картинкой.
01 / 10
светлая · холодная · деловая
Когда брать Банки, юристы, консалтинг, страховые компании.
Совет Синий — тёмный и приглушённый, почти чернильный: яркий корпоративный синий выглядит шаблоном.
| Роль | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|
| Фон | ||||
| Поверхность | ||||
| Текст | ||||
| Акцент | ||||
| Второй акцент |
Пример использования
02 / 10
светлая · монохром · редакционная
Когда брать Архитектура, мода, фотография, редакционные сайты.
Совет Всю иерархию держат типографика и сетка: кегль, начертание, линии в 1 px.
| Роль | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|
| Фон | ||||
| Поверхность | ||||
| Текст | ||||
| Акцент | ||||
| Второй акцент |
Пример использования
03 / 10
светлая · контрастная · графичная
Когда брать Дизайн-студии, архитектурные бюро, мероприятия, медиа.
Совет Красный — только кнопка и одна-две метки. Больше — и строгость превращается в крик.
| Роль | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|
| Фон | ||||
| Поверхность | ||||
| Текст | ||||
| Акцент | ||||
| Второй акцент |
Пример использования
04 / 10
светлая · спокойная · классика
Когда брать Инвестиции, частные школы, консалтинг, экологичные бренды.
Совет Фон — холодная слоновая кость, а не жёлтый крем: зелёному нужна светлая база без желтизны.
| Роль | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|
| Фон | ||||
| Поверхность | ||||
| Текст | ||||
| Акцент | ||||
| Второй акцент |
Пример использования
05 / 10
светлая · строгая · благородная
Когда брать Юридические фирмы, университеты, аукционные дома, издательства.
Совет Бордо на холодном сером выглядит благородно, на тёплом — уже уютно и винно. Держите фон холодным.
| Роль | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|
| Фон | ||||
| Поверхность | ||||
| Текст | ||||
| Акцент | ||||
| Второй акцент |
Пример использования
06 / 10
тёмная · глубокая · деловая
Когда брать Финтех, инвестиционные платформы, аналитические панели.
Совет Тёмная тема на синем, а не на чёрном, — так же строго, но появляется глубина.
| Роль | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|
| Фон | ||||
| Поверхность | ||||
| Текст | ||||
| Акцент | ||||
| Второй акцент |
Пример использования
07 / 10
тёмная · холодная · техничная
Когда брать Инженерные и IT-компании, SaaS, промышленность.
Совет Акцент — светлая сталь, а не цвет: кнопка выделяется светлотой, и этого хватает.
| Роль | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|
| Фон | ||||
| Поверхность | ||||
| Текст | ||||
| Акцент | ||||
| Второй акцент |
Пример использования
08 / 10
тёмная · контрастная · энергичная
Когда брать Спорт, автомобили, безопасность, мероприятия.
Совет На чёрном красный ярче, чем на белом, — площадь ему давайте ещё меньше.
| Роль | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|
| Фон | ||||
| Поверхность | ||||
| Текст | ||||
| Акцент | ||||
| Второй акцент |
Пример использования
09 / 10
тёмная · спокойная · техничная
Когда брать Медицина, инженерия, энергетика, аналитика.
Совет Все серые в этой палитре держите с сине-зелёным отливом: нейтральный серый рядом с петролем выглядит грязным.
| Роль | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|
| Фон | ||||
| Поверхность | ||||
| Текст | ||||
| Акцент | ||||
| Второй акцент |
Пример использования
10 / 10
тёмная · классика · металл
Когда брать Частные клубы, инвестиции, гольф, крепкие напитки.
Совет Латунь на тёмно-зелёном — строгость английского клуба. Металл приглушённый, без блеска.
| Роль | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|
| Фон | ||||
| Поверхность | ||||
| Текст | ||||
| Акцент | ||||
| Второй акцент |
Пример использования
01
Белый и холодные серые занимают 90% экрана, а один глубокий цвет — тёмно-синий, графит или бутылочный — уходит на кнопки, заголовки и шапку.
02
Серые с синеватым подтоном читаются деловыми, с тёплым — домашними. Для строгости берите нейтралы из холодной шкалы, а тёплые оставьте премиальным и уютным сайтам.
03
Строгость — это ясность. Основной текст — от 7:1 (AAA), второстепенный — не светлее сланцевого #4A5462 на белом. Бледно-серый текст «для изящества» строгой палитре вредит.
04
Бордо, бутылочный или сигнальный красный — только один и не больше 5% экрана: кнопка, метка, линия. Два акцента рядом — это уже флаг, а не строгость.
05
Строгая палитра работает вместе со строгой вёрсткой: ровная сетка, линии в 1 px, одинаковые отступы. Цвет отмечает структуру — заголовки, разделы, действия, — а не украшает.
06
Характер дают не новые цвета, а глубокий цвет вместо чёрного, крупная типографика и хорошие фотографии. Тёмно-синий вместо #000000 уже делает палитру узнаваемой.
Насыщенный синий вроде #0066FF выглядит шаблоном конструктора сайтов. Строгий синий — тёмный и приглушённый, чернильный #1B2B4B.
Светло-серые подписи на холодном сером выглядят строго в макете и с трудом читаются на реальном экране. Второстепенному тексту тоже нужно от 4.5:1.
Бордо и зелёный, синий и красный поровну — это флаг или форма, а не строгость. Один акцент, остальное — нейтралы.
Бежевый фон с холодными серыми карточками выглядит грязно. Строгая палитра холодная от начала до конца.
Строгий стиль плоский: иерархию держат линии, отступы и светлота. Градиенты и мягкие тени делают его рекламным.
Тёмные и приглушённые — чёрный, графит, тёмно-синий, бутылочный зелёный, бордо, петроль, — а также белый и холодные серые. У всех низкая насыщенность и холодный или нейтральный подтон.
Надёжная основа — тёмно-синий или графит на белом с холодными серыми, например #1B2B4B, #FFFFFF и #E3E7EB. Если нужен акцент — один: бордо, бутылочный или сдержанный красный.
С белым, холодными серыми и серебристым — это классика. Для акцента подходят бордо #5E1F2C или приглушённая латунь, для тёмной темы — светлая сталь #C7D1E0.
Не добавлять цвета, а работать светлотой и типографикой: тёмно-синий или петроль вместо чёрного, крупные заголовки, хорошие фотографии и одна маленькая акцентная деталь.
Тёмный текст на белом, заголовки и плашки — тёмно-синим или графитом, один акцент — для главной цифры на графике. Остальные ряды графика — шагами одной серой шкалы.
Строгая — холодная и контрастная: белый, серые с синеватым подтоном, тёмно-синий, графит. Премиальная — тёплая и мягкая: молочный, грейж, тауп, эспрессо, контраст держится на полутонах.
