Грейж, тауп, кофе с молоком, графит и эспрессо: 12 благородных нейтралов, тёплая серая шкала и 10 палитр — пять светлых и пять тёмных — с кодами и проверкой контраста.
Сайт выглядит дорого, когда палитра тихая: вместо чистого белого, чистого чёрного и ярких акцентов — приглушённые нейтралы с одним общим подтоном: грейж, тауп, кофе с молоком, графит, эспрессо. Контраст держится на светлоте, а не на цвете, а единственный акцент приглушён — бронза или графит. Ниже — 12 благородных нейтралов с кодами, тёплая серая шкала 50–950, семь сочетаний и десять палитр: пять светлых и пять тёмных.
Каждый оттенок здесь почти серый, но ни один не «мёртвый»: у каждого едва заметный подтон — тёплый коричневатый, розоватый или холодный. Именно подтон делает нейтрал дорогим. Желтизны нет ни в одном.
Молочный
Фон страницы вместо чистого белого
Жемчужный
Второй фон, подложки разделов
Сливочно-серый
Карточки и разделители на молочном
Грейж
Метки, рамки, неактивные элементы
Камень
Иконки и второстепенные линии
Пепельный
Холодный нейтрал для графитовых палитр
Кофе с молоком
Тёплый акцент без яркости
Тауп
Крупные подписи и иконки на светлом
Бронза
Тихий металл: кнопки и тонкие линии
Графит
Кнопки и заголовки вместо чёрного
Эспрессо
Тёплый почти-чёрный для текста
Уголь
Фон тёмной темы
Одиннадцать шагов грейжа от 50 до 950, построены в OKLCH с очень низкой ровной насыщенностью: шкала тёплая от начала до конца, но нигде не уходит в жёлтый. Цифры под шагом — контраст с белым и с чёрным. Для основного текста на светлом фоне берите 700 и темнее.
□ — контраст с белым · ■ — с чёрным. Для текста нужно от 4.5
Каждое сочетание держится на светлоте: один глубокий нейтрал, один светлый и третий — тихое связующее звено.
Тёплое, глубокое и мягкое одновременно. Сочетание хороших отелей, кофейных брендов и интерьеров.
Строго и архитектурно. Графит заменяет чёрный, камень его смягчает — для архитектуры, технологий и B2B.
Самое мягкое из набора: тёплый серо-коричневый на сливочно-белом. Бьюти, wellness, украшения.
Тёмная вечерняя база, светлый нейтрал и нитка металла. Часы, автомобили, частные клубы.
Два шага одного коричневого семейства. Монохромное тепло, которое не выглядит плоским, — для еды, кожи и интерьеров.
Холодная пара: сине-чёрные чернила с пепельным. Для финансов, права и технологий.
Светлая база с металлическим акцентом — читается как качество без единого яркого пикселя.
Без ярких цветов: акцент всегда приглушён — бронза, кофе с молоком, графит или светлый нейтрал на тёмном фоне. Код копируется нажатием на цвет, CSS-переменные — одной кнопкой, карточку палитры можно сохранить картинкой. Контраст проверен по WCAG.
01 / 10
светлая · тёплая · классика
Когда брать Отели, рестораны, интерьерные студии, премиальные услуги.
Совет Кнопка — эспрессо, а не чёрная: на тёплом фоне чистый чёрный выглядит дырой.
| Роль | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|
| Фон | ||||
| Поверхность | ||||
| Текст | ||||
| Акцент | ||||
| Второй акцент |
Пример использования
02 / 10
светлая · мягкая · металл
Когда брать Украшения, часы, косметика, бутики.
Совет Бронза — тонкой линией и кнопкой, но не большой заливкой, иначе станет просто коричневой.
| Роль | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|
| Фон | ||||
| Поверхность | ||||
| Текст | ||||
| Акцент | ||||
| Второй акцент |
Пример использования
03 / 10
светлая · строгая · архитектурная
Когда брать Архитектура, девелопмент, технологии и консалтинг.
Совет Почти нейтральный фон с каплей тепла не даёт графиту казаться холодным и офисным.
| Роль | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|
| Фон | ||||
| Поверхность | ||||
| Текст | ||||
| Акцент | ||||
| Второй акцент |
Пример использования
04 / 10
светлая · уютная · тёплая
Когда брать Кофейни и пекарни, товары для дома, лайфстайл-бренды.
Совет Держите все тона палитры в одной коричневой семье — один холодный серый ломает всё тепло.
| Роль | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|
| Фон | ||||
| Поверхность | ||||
| Текст | ||||
| Акцент | ||||
| Второй акцент |
Пример использования
05 / 10
светлая · нежная · тихая
Когда брать Бьюти, wellness, клиники эстетической медицины, свадьбы.
Совет Тауп — самый тихий из возможных акцентов: ему нужно много воздуха и лёгкая типографика.
| Роль | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|
| Фон | ||||
| Поверхность | ||||
| Текст | ||||
| Акцент | ||||
| Второй акцент |
Пример использования
06 / 10
тёмная · тёплая · вечерняя
Когда брать Рестораны, вино и крепкие напитки, вечерние заведения.
Совет На тёплом тёмном фоне акцент — светлый латте, а подпись на кнопке тёмная.
| Роль | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|
| Фон | ||||
| Поверхность | ||||
| Текст | ||||
| Акцент | ||||
| Второй акцент |
Пример использования
07 / 10
тёмная · холодная · техничная
Когда брать Премиальная техника, аудио, автомобили, продукты для разработчиков.
Совет Фон не чёрный, а графит с холодным отливом: на больших площадях чёрный убивает глубину.
| Роль | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|
| Фон | ||||
| Поверхность | ||||
| Текст | ||||
| Акцент | ||||
| Второй акцент |
Пример использования
08 / 10
тёмная · роскошная · металл
Когда брать Часы, украшения, частный банкинг, элитная недвижимость.
Совет Бронза на угольном читается как золото, но без дешёвого блеска жёлтого.
| Роль | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|
| Фон | ||||
| Поверхность | ||||
| Текст | ||||
| Акцент | ||||
| Второй акцент |
Пример использования
09 / 10
тёмная · мягкая · тёплая
Когда брать Интерьеры, мебель, мода, галереи.
Совет Самая мягкая тёмная тема: не чёрная, а тёплая серо-коричневая. Фотографии и товары на ней выглядят богаче.
| Роль | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|
| Фон | ||||
| Поверхность | ||||
| Текст | ||||
| Акцент | ||||
| Второй акцент |
Пример использования
10 / 10
тёмная · контрастная · современная
Когда брать Студии, агентства, портфолио архитекторов, мода.
Совет Холодная тёмная база и тёплый сливочный акцент — единственный контраст температур в наборе, и его достаточно.
| Роль | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|
| Фон | ||||
| Поверхность | ||||
| Текст | ||||
| Акцент | ||||
| Второй акцент |
Пример использования
01
Молочный #F6F3EF вместо #FFFFFF и эспрессо #2A211C вместо #000000. Контраст почти не меняется, а резкость уходит.
02
Держите все нейтралы либо тёплыми, либо холодными. Тёплый и холодный серый рядом выглядят грязно, даже если каждый красив сам по себе.
03
Дорогая палитра разводит элементы не цветом, а светлотой: молочный, сливочно-серый, грейж, тауп, эспрессо. Глаз читает иерархию спокойно.
04
Бронза, кофе с молоком, графит — акценты, которые ощущаются как материал. Кнопки и тонкие линии, не больше 5–10% экрана.
05
Сдвигайте бежевый к серому или едва розоватому, насыщенность — очень низкая. Проверка: рядом с белым он должен выглядеть как лён, а не как старая бумага.
06
Тихой палитре нужны большие отступы и сдержанная типографика. В тесной вёрстке те же цвета выглядят скучно, а не дорого.
Бежевый из CSS (beige, #F5F5DC) и его родственники выглядят как состаренная бумага. Дорогой бежевый серее и тише по насыщенности.
Холодная серая карточка на тёплом бежевом фоне выглядит ошибкой. Выберите один подтон и держите его везде.
Бледно-серый текст на светлом фоне изящен в макете и нечитаем на реальном экране. Основному тексту нужно от 4.5:1.
Блестящие золотые градиенты и блёстки читаются как подделка. Настоящая роскошь — плоские приглушённые тона металла.
Серые, подобранные на глаз, плывут по температуре. Берите их из одной шкалы — тогда они различаются только светлотой.
Приглушённые нейтралы с одним общим подтоном — грейж, тауп, кофе с молоком, графит, эспрессо — и один приглушённый акцент вроде бронзы. Чистые белый, чёрный и яркие цвета удешевляют сайт.
Берите бежевый с очень низкой насыщенностью, сдвинутый к серому или едва розоватому, например #EFEBE5 или #E3DCD3. Сравните с белым: он должен выглядеть как лён, а не как старая бумага.
Почти-чёрным с подтоном: эспрессо #2A211C в тёплых палитрах, графитом #3F4145 или сине-чёрным #23272D — в холодных. Для фона тёмной темы — уголь #161515 или графит #1B1D20.
Акцент нужен, но не яркий. Кнопки и ключевые линии — бронза, кофе с молоком или графит: они отличаются от нейтралов светлотой, а не насыщенностью.
Обе могут. Светлая на молочном и сливочном читается спокойной и открытой, тёмная на угле или эспрессо — вечерней и закрытой. Важно в обеих уйти от чистого чёрного и белого.
Грейж — серый, смешанный с бежевым, тёплый светлый нейтрал вроде #CFC7BC. Тауп — более глубокий серо-коричневый, например #8B7D72. Оба лежат в основе большинства дорогих палитр.
