← Все статьи

Туториалы

Сепия и кремовые фоны для лёгкого чтения

17 мая 2026 · автор JustZix Team

Яркие белые фоны нормальны в результате поиска, но мучительны на протяжении долгого чтения. Тёплый бумажный тон убирает блики, успокаивает контраст и позволяет читать час без прищура. Вот как применить его к любому сайту с JustZix.

Почему бы просто не уйти в тёмное?

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

Классический рецепт сепии

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

html, body,
article, main, .post {
  background-color: #f4ecd8 !important;
  color: #4a3b28 !important;
}
article a { color: #8a5a2b !important; }
article a:hover { color: #6b3f17 !important; }

Сочетание коричневого на бежевом держит коэффициент контраста уверенно выше порога доступности, оставаясь мягким.

Более светлый крем

Если сепия кажется слишком тяжёлой, крем остаётся ближе к белому, но убивает блики. Он хорошо работает при обычном дневном свете:

html, body, article, main {
  background-color: #faf6ec !important;
  color: #33302a !important;
}

Не забудьте поверхности под низом

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

article pre,
article blockquote,
.card, .panel, figure {
  background-color: #efe7d2 !important;
  color: #4a3b28 !important;
  border-color: #d8cba8 !important;
}
input, textarea {
  background-color: #fbf8ef !important;
  color: #33302a !important;
}

Смягчите изображения фильтром

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

article img {
  filter: sepia(0.12) brightness(0.97) !important;
}

Держите значение sepia низким — около 0,1–0,2 — чтобы фотографии оставались естественными, а скриншоты и диаграммы вписывались.

Тон по времени суток

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

html, body, article, main {
  background-color: #e8ddc2 !important;
  color: #3a2f1f !important;
}

Сделайте это правилом

Создайте правило JustZix, наведите его шаблон URL на издание, которое вы читаете чаще всего, вставьте блоки фона, поверхностей и изображений в панель CSS и сохраните. Сайт теперь встречает вас бумагой вместо лампочки. Держите переключатель под рукой, чтобы переключаться между дневным кремом и вечерней сепией.

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