Интерактивная статья · 7 минут чтения

Два цвета,
из которых
собрано всё

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

Смотреть сравнение Как сочетать
HEX #606c38 HEX #fefae0 контраст 5.40:1 WCAG AA

Почему именно эта пара

Оливковый #606c38 — не «зелёный из палитры», а цвет, который human-центристами называют pistachio. Он берёт у овощей зелень, у земли — глубину, у мха — спокойствие. Он темнее, чем кажется, и идеально держит текст на светлом фоне.

Кремовый #fefae0 — не чистый белый. Чистый белый утомляет и «светится» на OLED, крем же отражает на 2–3% мягче: он даёт тепло, сохраняет контраст и ощущается дороже.

копировать

#606c38

Роль
Тёмная. Текст, рамки, акценты, инверсные блоки
RGB
96 · 108 · 56
Настроение
Земляное, тихое, честное, «своё»
копировать

#fefae0

Роль
Светлая. Фон, поверхности, поля ввода
RGB
254 · 250 · 224
Настроение
Тёплое, мягкое, премиальное

Что палитра делает с человеком

Оливковый снижает пульс восприятия: в нём нет ни чистого красного «тревоги», ни синего «холода». Он читается как природа, но без пафоса — поэтому работает и в студии, и в e-commerce, и в игре.

01

Комфорт для глаз

Низкая насыщенность и отсутствие чистого белого убирают «жёсткий край» страницы. Глаз меньше устаёт, текст читается в 2–3 раза дольше без переключения вкладок.

02

Ощущение земли

Оттенок ассоциативно связан с почвой, глиной, сушёными травами. Интерфейс перестаёт быть «пластиковым» и начинает ощущаться материальным.

03

Премиальность

Крем — признак «бумажной» роскоши: он встречается в упаковке, парфюмерии, печатных каталогах. С оливковым он даёт сдержанную, не кричащую дороговизну.

04

Эко-минимализм

Два цвета — это сознательное ограничение. Такая палитра честно говорит: здесь важны структура, воздух и типографика, а не количество заливок.

Сравнительная таблица

Один параметр — одна строка. Наведи курсор на строку или кликни, чтобы подсветить её целиком; клик по HEX копирует значение.

Сравнение цветов #606c38 и #fefae0 по техническим и воспринимаемым параметрам
Параметр #606c38 #fefae0
HEX #606c38 #fefae0
RGB 96 · 108 · 56 254 · 250 · 224
Контрастность 5.40:1 — AA для текста 5.40:1 — фон, на котором текст читается
Светлота ~13.5% — тёмный, контрастный ~94.8% — светлый, воздушный
Восприятие Спокойствие, честность, природа, «своё» Тепло, чистота, премиальность, бумага
Эмоция Успокаивает, заземляет Смягчает, обволакивает
Веб Текст, кнопки, иконки, границы, футер Фон страницы, карточки, поля, hover-заливки
Геймдев Интерфейс, полоса здоровья, карта, тени Освещение, HUD-панели, текст поверх тёмного
Интерьер Стены, мебель, текстиль, декор Пол, потолок, бумага, свет, посуда
Как дополняют Держит контраст: даёт структуру и вес Даёт воздух: отступает, чтобы тёмное читалось

Одна строка — один смысл. В сумме: тёмное задаёт иерархию, светлое даёт ей место. Без кремового оливковый «кричит», без оливкового кремовый «исчезает».

Где пара работает

Нажми на вкладку: сцены оживают, когда попадают в поле зрения.

Сайты, лендинги, SaaS-интерфейсы

  • Фон — кремовый. Тёмное используется только для текста, рамок и акцентов.
  • Кнопка — инверсная. Заливка #606c38, подпись #fefae0.
  • Ховер — прозрачность. Тот же оливковый, но 10–15% прозрачности.
  • Тени. Только rgba(96, 108, 56, …) — они не окрашивают фон.
  • Инверсные блоки. Фон оливковый, текст кремовый — ритм без третьего цвета.

Рецепт идеального использования

Делать

  • Отдавать ~75% площади кремовому и ~25% оливковому.
  • Проверять контраст: минимум 5.4:1 для основного текста.
  • Держать рамки в 2px — это вся графика, которая нужна.
  • Чередовать инверсные секции, чтобы ритм не был плоским.
  • Использовать прозрачности вместо новых оттенков.

Не делать

  • Добавлять третий цвет «для акцента» — ломается логика.
  • Писать кремовым по оливковому в мелкий кегль.
  • Смешивать оливковый с белым ради «светлоты».
  • Заполнять экран плитками и плашками обеих красок.
«Хорошая палитра — это не два цвета, а два цвета и дисциплина».