Бежевый и коричневый цвет в дизайне сайтов

Бежевый и коричневый: сначала роли, потом настроение

Бежевый цвет в дизайне сайта удобно примерить к большим светлым поверхностям: фону статьи, каталога, карточки. Коричневый цвет в дизайне может взять на себя текст, навигацию и главное действие. Начните с этой пары ролей: светлая основа и достаточно тёмные детали. Тогда тёплая гамма не превратится в страницу, на которой всё одного тона.

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

Такой набор ассоциаций — направление для эскиза. В исследовании Jonauskaite и соавторов общие цветовые ассоциации сочетались с языковыми и географическими различиями. Поэтому не будем назначать бежевому универсальное «спокойствие», а коричневому — обязательное «доверие». Покажите макет своей аудитории и послушайте, какими словами она описывает впечатление.

Одна и та же основа допускает разный характер. Кремовый фон с крупным шоколадным заголовком можно подать выразительно; песочный с небольшими кофейными подписями — сдержанно. Решение складывается из масштаба, фотографии, шрифта и свободного пространства. Цвет задаёт материал для композиции, а удобство проверяется на тексте, меню и форме.

От кремового до шоколадного: шесть оттенков с HEX

Ниже — наша учебная шкала тёплых нейтральных. Названия помогают обсуждать образ, HEX закрепляют точные значения для макета и кода. Мы выбрали эти образцы для статьи: это не стандарт соответствия слов «бежевый» или «кофейный» определённому цвету и не палитра Pantone.

Роли в последнем столбце — предложения для первого макета. Например, песочный можно оставить под иллюстрацией, но для рамки поля его придётся отдельно проверить рядом с фоном. Карамельный красив в большом образце, однако небольшая белая надпись на нём не проходит выбранный ниже порог контраста. Название оттенка не заменяет расчёт.

Сравните кремовый и бежевый на одной и той же странице. Если кремовый остаётся основным фоном, бежевым можно выделить блок условий или цитату. Если бежевым залит весь экран, для карточек попробуйте кремовые поверхности. У каждой области должно быть своё назначение; добавлять промежуточные оттенки ради количества не нужно.

Что стоит взять из истории Mocha Mousse

PANTONE 17-1230 Mocha Mousse — цвет Pantone 2025 года. На официальном сайте его описывают как мягкий коричневый, а образ связывают с какао, шоколадом и кофе. Это конкретный исторический выбор Pantone; он не обязывает делать коричневым сайт кофейни, магазина мебели или косметики.

Для практической работы полезнее взять сам приём: искать палитру в предмете, материале и освещении. Наш кофейный #5D4037 выбран независимо и не обозначает точный экранный эквивалент Mocha Mousse. Если проекту нужен именно цвет Pantone, согласуйте его цифровое представление отдельно, а затем проверьте реальные пары текста и фона.

Как распределить тёплую гамму по интерфейсу

Фон и поверхности

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

Разделяйте фон под фотографией и фон под описанием. Например, у карточки стула можно оставить белую область снимка и бежевый блок характеристик. Если хочется единого кремового поля, посмотрите, сохраняются ли края светлой обивки. Не перекрашивайте товар ради совпадения с окружением: оформление выбираем под содержимое.

Текст, ссылки и кнопки

Для основного текста в нашей шкале есть шоколадный #3E2723, для более светлого варианта — кофейный #5D4037. Вспомогательный тёплый #6F584A можно проверить на подписях и характеристиках. Назначьте эти роли один раз и повторяйте по страницам. Цену, срок доставки и объяснение ошибки не стоит делать почти незаметными ради общей мягкости.

Ссылки внутри абзаца рекомендуем подчёркивать. Если основной текст и ссылка оба коричневые, посетителю понадобится понятный дополнительный признак действия. Оттенком можно поддержать состояние наведения, но ссылка должна узнаваться и до него. Проверьте также меню на телефоне: там нельзя рассчитывать только на наведение мыши.

Для главного действия попробуйте шоколадную заливку со светлой надписью, второе действие оставьте с контуром. Подписи «Добавить в корзину» и «Посмотреть состав» объясняют разные шаги лучше одинаковых «Подробнее». Выделите главное действие размером, положением и свободным местом вокруг — не пытайтесь решить всю иерархию ещё одним оттенком коричневого.

Состояния и сообщения

• Наведение и нажатие. Запишите цвет надписи и фон для каждого состояния, затем измерьте контраст. Не осветляйте кнопку до песочного автоматически: надпись может потерять нужное соотношение с заливкой.
• Фокус с клавиатуры. Сделайте различимую обводку и пройдите элементы клавишей Tab. Она должна быть видна на каждой поверхности, включая бежевую секцию и тёмную кнопку.
• Выбор. В фильтре «Бежевый» добавьте галочку или другую отметку. Изменения одного оттенка недостаточно, чтобы объяснить, какой вариант уже выбран.
• Ошибка. Рядом с полем напишите, что исправить. Тёплая гамма оформления не повод прятать сообщение в декоративный коричневый текст без явного пояснения.

Такой набор удобно закрепить в таблице цветов проекта: фон, поверхность карточки, основной текст, подпись, ссылка, кнопка, контур и состояния. Рядом с названием каждой роли запишите HEX. При правке одной заливки будет понятно, какие надписи и значимые детали нужно проверить повторно.

Кофейня, мебель, косметика: примеры задач для макета

Мы не выбираем палитру по правилу «вся отрасль должна выглядеть так». Ниже — учебные ситуации, в которых тёплая гамма может поддержать содержание. Для каждой нужны свои фотографии и сценарий: выбрать кофе, сравнить материалы, узнать состав или найти адрес заведения.

Кафе и кофейни

Для небольшой кофейни попробуйте кремовый фон меню, кофейные названия напитков и шоколадную кнопку перехода к заказу. На первом экране можно показать реальную керамику, стойку или напиток. Если интерьер заведения яркий и совсем не коричневый, начните с него: необязательно подгонять сайт под буквальную ассоциацию с кофе.

На сайте кафе проверьте не только красивую заставку, но и меню с длинными названиями, цены, адрес, часы работы и путь к бронированию. Если все эти сведения набраны светло-карамельным на бежевом, предметная атмосфера не поможет их прочитать. Крупную фотографию лучше отделить от служебной информации спокойной однотонной областью.

Натуральные товары

Для каталога керамики, текстиля или других товаров из натуральных материалов можно собрать бежевую основу вокруг фактуры самих предметов. Попробуйте крупные снимки материала и тёмные краткие подписи. Свяжите палитру с конкретным ассортиментом: грубое льняное полотно, гладкий фарфор и деревянная доска предлагают разные композиции.

Заявление «натуральный» подтверждайте сведениями о товаре: составом, материалом, происхождением, если оно известно и проверено. Бежевый фон этого не доказывает. В карточке оставьте заметными характеристики и ограничения применения; зелёный лист на упаковке или коричневый цвет страницы не должны подменять эти сведения.

Интерьер и мебель

Для интерьерного проекта начните с фотографий отделки. Кремовые поверхности сайта можно сопоставить со стенами, песочные — с камнем, тёмно-коричневые — с деревом на снимке. Здесь полезен крупный кадр всего помещения и отдельная фактура рядом. Описание задачи, планировка и детали проекта должны читаться независимо от фотографии.

В мебельном каталоге отдельно проверьте тёмный орех и светлую обивку. Для первого может понадобиться светлая подложка, для второй — различимый край изображения. Не давайте бежевому фону сливаться со всеми вариантами ткани. Образцы цвета снабдите названиями, а выбранный вариант — отметкой: покупателю нужно понимать свой выбор.

Косметика

Для условной коллекции средств в лаконичной упаковке попробуйте кремовый фон и коричневую типографику, а акцент возьмите из самой упаковки. Сначала соберите карточку с названием, объёмом, составом и способом применения. Она покажет, выдерживает ли сдержанная гамма рабочие сведения, а не только предметный натюрморт.

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

Если задача проекта — яркая афиша или сложная рабочая панель с множеством состояний, начните с иерархии и служебных сигналов. Тёплая основа допустима, но ограничивать все графики, предупреждения и действия только бежево-коричневым рядом не стоит. Сохраните общую гамму в поверхностях, а функциональные цвета подберите отдельно.

Три сочетания с понятными назначениями

На схеме — авторские варианты для старта. В каждой палитре отдельно заданы фон, текст, дополнение и кнопка с надписью. Это удобнее, чем набор красивых образцов без ролей: можно сразу перенести сочетание на карточку товара и посмотреть, хватает ли ему выразительности.

Коричневый и кремовый

Возьмите фон #F7F1E8, основной текст #3E2723 и карамельный #B87945 для декора. Кнопку сделайте шоколадной #3E2723, надпись — белой #FFFFFF. Так тёмный оттенок соберёт типографику и действие, а карамель останется в предметах, небольшой иллюстрации или декоративной плашке.

Этот вариант можно примерить к кофейной подписке, керамике или текстильной коллекции, если именно такой образ нужен проекту. Чтобы страницы не стали однотонными, меняйте композицию и фотографии, сохраняя роли цветов. Не обязательно делать каждый заголовок и каждый раздел отдельным коричневым оттенком.

Бежевый и глубокий зелёный

Основа — #E8DCC8, текст — #3E2723, акцент и кнопка — зелёный #355C4A. На зелёной кнопке используйте светлую надпись #E8DCC8. Эта пара даёт 5,57:1 и проходит порог AA для обычного текста. Если сделать надпись другим светлым оттенком, расчёт нужно повторить.

Попробуйте такой набор на странице растений, текстиля или предметов для дома, где зелёный поддерживает фотографию. При этом не нужно превращать все значки в листья. Другие задачи зелёного разобраны в статье «Зелёный цвет в веб-дизайне»; здесь он отвечает за один заметный акцент на тёплой основе.

Кремовый, коричневый и тёмно-синий

Возьмите фон #F7F1E8, шоколадный текст #3E2723 и тёмно-синюю кнопку #203D56 со светлой надписью #F7F1E8. Контраст надписи и заливки — 10,04:1. Песочный #D8C3A5 можно оставить крупной декоративной поверхностью рядом с изображением.

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

Во всех вариантах предметы на фотографии могут добавлять свои цвета. Не пытайтесь выровнять весь ассортимент под палитру интерфейса. Проверьте несколько разных карточек рядом: цветовой порядок страницы должен сохраняться и с белым флаконом, и с тёмным столом, и с пёстрой тканью.

Бежевый фон вместо белого: что проверить при замене

Меняя белый #FFFFFF на бежевый #E8DCC8, пересчитайте уже выбранные цвета текста, ссылок, контуров и кнопок. Прежний контраст к белому не переносится на новый фон автоматически. Например, наш шоколадный #3E2723 даёт 13,82:1 на белом и 10,20:1 на бежевом. Обе пары проходят порог AA для обычного текста, но числа различаются.

Чистый чёрный #000000 на том же бежевом даёт 15,50:1. Значит, коричневый текст вместо чёрного можно выбрать ради целостной тёплой гаммы, сохранив достаточный контраст. Читаемость выбранного шрифта и удобство длинной страницы оцените в браузере, сравнив оба варианта на одинаковом тексте.

Полезно начать с фона одного раздела, сохранив белые поверхности там, где они нужны изображениям или содержанию. Обе основы можно сопоставить на статье, таблице и карточке товара. Подробнее о роли светлых поверхностей — в статье «Белый цвет в веб-дизайне».

• Снимки на белом фоне. Посмотрите, как прямоугольники фотографий выглядят внутри бежевого каталога. Можно оформить их как отдельные светлые области, а не пытаться скрыть каждую границу.
• Формы и поиск. Поле должно узнаваться. Если вся страница и заливка поля близки, предусмотрите различимый контур и постоянную подпись.
• Иконки и графики. Повторно проверьте детали, которые раньше стояли на белом. Особенно те, без которых нельзя понять действие или прочитать данные.
• Вспомогательные надписи. Не осветляйте их одновременно с заменой фона. Подпись к цене, условие заказа или сообщение формы остаются рабочим текстом.

Тёмный коричневый блок

Если хочется большей глубины, попробуйте отдельную кофейную или шоколадную секцию: например, для истории материала. Светлый текст на ней подберите заново. В нашем варианте белый #FFFFFF на шоколадном #3E2723 даёт 13,82:1. Цвета из светлого макета нельзя просто перенести на тёмную заливку без проверки.

Для тёмного первого экрана оцените и само изображение: видны ли края тёмного товара, хватает ли места для заголовка, можно ли найти меню. Если тёмные поверхности нужны всему сайту, потребуется проработать карточки, формы и состояния. Дополнительные примеры есть в статье о чёрном цвете в веб-дизайне.

Контраст: коричневый текст проверяем вместе с фоном

Для расчётов возьмём WCAG 2.2. Критерий 1.4.3 уровня AA требует контраста обычного текста не ниже 4,5:1, крупного — 3:1. Крупным считается текст от 18 pt обычного или от 14 pt жирного начертания. Для небольшой подписи кнопки ориентируемся на 4,5:1.

У критерия есть исключения, включая логотипы, чисто декоративный текст и текст неактивных компонентов. Подпись в действующей форме не становится исключением из-за того, что она второстепенная. Требования к рабочим надписям сохраняются при наведении и клавиатурном фокусе.

Мы посчитали контраст непрозрачных однотонных цветов sRGB по относительной яркости: (Lсветлого + 0,05) / (Lтёмного + 0,05). В таблице два знака после запятой; с порогом сравнивается результат до округления. Это проверка конкретных пар, а не заключение о доступности всего сайта.

Здесь есть полезная ловушка: карамельная заливка не подошла для обычного текста ни с белой, ни с выбранной шоколадной надписью. Для этой кнопки мы предлагаем более тёмную заливку #3E2723 с белыми буквами. Другой вариант — выбрать иной цвет текста и заново посчитать пару. Переключение между «светлым» и «тёмным» на глаз не гарантирует результата.

Светло-коричневый #A68A72 на кремовом не проходит даже порог 3:1 для крупного текста. Его не стоит назначать рабочей подписи в этой паре. Для заголовка также нужно другое сочетание. А у белого на нашей карамели 3,58:1: для крупного текста числового контраста достаточно, для обычного — нет.

Поверх фотографии или градиента проверяйте контраст в области букв, включая самое неблагоприятное место фона. Если он меняется слишком сильно, попробуйте однотонную подложку под текстом. Тонкие начертания дополнительно посмотрите в браузере: W3C обращает внимание, что сглаживание может сделать их штрихи визуально слабее.

Границы полей и другие значимые детали

Критерий WCAG 1.4.11 уровня AA задаёт минимум 3:1 с соседними цветами для визуальных признаков, необходимых для распознавания элементов управления и их состояний, а также значимых частей графики. Это не требование к каждому декоративному разделителю. У критерия есть исключения для неактивных компонентов, неизменённого оформления браузера и графики, чьё особое представление существенно для смысла.

Например, песочная рамка #D8C3A5 на кремовом #F7F1E8 даёт 1,52:1. Если именно рамка позволяет узнать поле, такой пары недостаточно. Тёмный контур #6F584A рядом с бежевым #E8DCC8 даёт 4,89:1. Для каждого расположения контура проверьте фактические соседние цвета; результат одной рамки не переносится на все поля.

Критерий 1.4.1 запрещает передавать смысл только цветом. Подчёркнутая ссылка, словесное объяснение ошибки и отметка выбранного фильтра помогают сохранить понятность тёплой палитры. Отдельно по 2.4.7 проверяется видимый клавиатурный фокус: пройдите страницу клавишей Tab и убедитесь, что текущий элемент виден.

Ошибки, из-за которых тёплая палитра теряет ясность

• Все уровни почти одинаковые. Кремовый фон, песочная карточка, карамельная подпись и светлая кнопка оставляют мало различий между ролями. Начните исправление с тёмного текста и различимого главного действия, затем верните нужные декоративные оттенки.
• Текст осветляют ради деликатности. Сдержанный образ можно строить размером, отступами и количеством деталей. Для важных условий не снижайте контраст ниже выбранного порога.
• Любой коричневый считают хорошей заливкой кнопки. В таблице карамель с белой надписью не проходит AA для обычного текста. Проверяйте пару и каждое рабочее состояние, а не только красивый образец цвета.
• Фактуру кладут под длинный текст. Древесный рисунок или ткань можно оставить на отдельной фотографии. Для основного описания сначала попробуйте спокойную заливку, где нет перепадов фона под буквами.
• Оформление подменяет сведения о продукте. Для натурального товара нужны данные о материале, для косметики — состав, для мебели — параметры и варианты отделки. Палитра поддерживает подачу, но эти ответы должны находиться в содержании.
• Проверяют только заставку. Перенесите гамму на поиск, фильтр, карточку, форму и сообщение об ошибке. Если там всё приходится срочно затемнять или обводить, пересмотрите роли цветов ещё до вёрстки.

Проверка палитры на реальной странице

Мы бы начали с небольшой подборки настоящего содержания: длинного названия, фотографии светлого и тёмного товара, цены и условия, которое нельзя пропустить. На них проверять оттенки полезнее, чем на заглушках. Для услуги вместо карточки товара возьмите описание этапов и форму запроса.

1. Соберите основной экран. Назначьте фон, текст, ссылку и кнопку. Запишите HEX рядом с каждой ролью, включая цвет надписи внутри кнопки.
2. Добавьте сложное содержание. Разместите фотографию с белой подложкой, длинную характеристику, второстепенную подпись и выбранный фильтр. Посмотрите, где оформление требует уточнений.
3. Посчитайте пары и состояния. Сравните текст с его фоном, значимые детали — с соседними цветами. Проверьте наведение, фокус, раскрытое меню и сообщение об ошибке.
4. Пройдите задачу на телефоне. Найдите нужный товар или услугу, прочитайте условия, сделайте следующий шаг. Оцените реальные размеры букв и то, как переносится длинный текст.
5. Покажите макет человеку из аудитории. Дайте задачу без подсказок по цветам. Наблюдайте, находит ли он меню, цену, выбранный вариант и главное действие.

Если выбираете между белым и бежевым фоном, сравните одинаковые страницы с одинаковым содержанием. Меняя одновременно фон, шрифт, фотографию и расположение кнопки, вы оцените два разных дизайна целиком. Для проверки отдельного цветового решения сохраните остальные условия одинаковыми и заранее определите, что хотите узнать.

Частые вопросы

Можно ли использовать бежевый вместо белого на всём сайте?

Можно попробовать, но замена требует проверки текста, снимков, полей и значимых деталей. Необязательно заливать одним цветом каждую поверхность: белая область фотографии или кремовая карточка могут оставаться частью общей гаммы. Проверяйте длинную страницу и каталог, а не только первый экран.

Какой коричневый выбрать для текста?

Для старта подойдёт наш шоколадный #3E2723: на бежевом #E8DCC8 он даёт 10,20:1. Кофейный #5D4037 на кремовом #F7F1E8 даёт 8,30:1. Обе пары проходят порог AA для обычного текста. При смене фона или добавлении прозрачности расчёт нужно повторить.

Белые буквы подходят любой коричневой кнопке?

Нет. Белый #FFFFFF на карамельном #B87945 даёт 3,58:1 и не проходит AA для обычного текста. На шоколадном #3E2723 тот же белый даёт 13,82:1. Если хотите оставить карамельную заливку, подберите другое сочетание и проверьте его численно.

Mocha Mousse — это любой кофейный оттенок?

Нет. В статье это конкретное название PANTONE 17-1230, выбранного цветом 2025 года. Наши названия и HEX — отдельная учебная шкала. Не используйте произвольный кофейный образец как точное воспроизведение цвета Pantone.

Бежевая палитра подходит только натуральным товарам?

Мы бы выбирали её по содержанию и характеру проекта. Здесь разобраны задачи кофейни, кафе, интерьера, мебели и косметики. Для другого сайта тоже можно сделать тёплую основу, если она поддерживает фотографии, типографику и понятный сценарий. Обязательного отраслевого ограничения в этих примерах нет.

Как избежать однообразия без ярких цветов?

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

Источники

• Цвет Pantone 2025 года — Pantone, 17-1230 Mocha Mousse; описание оттенка — FHI Color Guide, Limited Edition Color of the Year 2025, About This Item.
• Культурный контекст ассоциаций — Jonauskaite D. et al. Universal Patterns in Color-Emotion Associations Are Further Shaped by Linguistic and Geographic Proximity. Psychological Science. 2020;31(10):1245–1260 — аннотация в PubMed.
• Формула относительной яркости и контраста, видимый фокус — W3C, Web Content Accessibility Guidelines (WCAG) 2.2, Recommendation от 12 декабря 2024 года — текст стандарта.
• Контраст текста, размеры крупного текста и оговорки о тонких начертаниях — W3C WAI, Understanding SC 1.4.3: Contrast (Minimum).
• Контраст значимых деталей интерфейса — W3C WAI, Understanding SC 1.4.11: Non-text Contrast; передача смысла помимо цвета — Understanding SC 1.4.1: Use of Color.
• Шестнадцатеричная запись экранных цветов — W3C, CSS Color Module Level 4, §5.2, рабочая спецификация. Палитры и результаты расчёта в статье — авторские примеры на основе описанной методики.