Динамически инвертировать цвет логотипа в CSS

К чему это служит

Статичные элементы интерфейса (например, логотип) могут «теряться» на странице, когда они накладываются на секцию с тем же цветом фона. Вместо ручного подбора цвета для каждой секции можно заставить браузер динамически инвертировать цвет логотипа, используя только CSS. Это особенно полезно для липких заголовков, сайдбаров и плавающих элементов интерфейса.

MacBook Pro в лесу

Быстрый пример поведения

Белый логотип на светлом фоне → логотип остаётся белым или слегка инвертируется, в зависимости от фона.
Белый логотип над тёмным фоном → благодаря mix-blend-mode он будет выглядеть как чёрный (инвертируется) и останется видимым.

Исходные файлы и стартовый проект

Скачайте стартовый код из репозитория на GitHub и откройте index.html в браузере. Страница содержит логотип и четыре секции с чередующимися фонами. В стилях есть правило nth-child(even), которое делает чёрный фон у чётных секций — поэтому логотип, если он чёрный, «исчезает» на этих секциях.

Скриншот стартового проекта

Шаг 1. Сделать логотип липким только на больших экранах

Чтобы логотип следовал за прокруткой, примените position: sticky. Часто это нужно только на десктопе — на мобильных экранах липкий элемент может мешать UX.

Пример медиа‑запроса из статьи:

@media(width > 980px) {  
  .logo {   
    position: sticky;   
    top: .5rem;   
  }  
}

Заметьте: синтаксис медиа‑запроса здесь взят из исходного примера; у вас может быть привычный синтаксис @media (min-width: 980px) для совместимости.

Шаг 2. Включить mix-blend-mode

Ключевое свойство — mix-blend-mode: difference. Оно вычисляет побитовую разницу между цветом элемента и фоном, инвертируя каналы в местах совпадения. Это даёт эффект, когда белый логотип становится чёрным на тёмном фоне и наоборот.

Добавьте в CSS:

@media(width > 980px) {   
  .logo {   
    position: sticky;   
    top: .5rem;   
    mix-blend-mode: difference  
  }  
}

Важно: если не установить исходный цвет логотипа (например, color: white), результат может быть неожиданным — элемент может полностью пропасть.

.logo {   
  color: white;   
  /* Другие свойства */  
}

Теперь при прокрутке логотип будет менять видимый цвет при переходе между светлыми и тёмными секциями.

Скриншот страницы с динамическим логотипом

Как цвета взаимодействуют с difference

difference вычитает значения каналов; совпадающие цвета дают чёрный.
белый (#ffffff) на белом фоне → чёрный; на чёрном фоне → белый.
для цветных логотипов итог может быть неожиданный: например, бирюзовый (#008080) на белом даёт розовый оттенок.

Скриншот с бирюзовым логотипом и инверсией

Рекомендуем использовать белый логотип для предсказуемого результата.

Работа с изображением вместо текста

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

Если вы используете изображение, контролируйте размер через width/height, а не font-size:

.logo {  
  color: white;  
  width: 10rem;  
  /* Другие свойства */  
}

Чтобы смешение работало и на маленьких экранах, перенесите mix-blend-mode вне медиа‑запроса:

.logo {  
  color: white;  
  width: 10rem;  
  mix-blend-mode: difference;  
  /* Другие свойства */  
}

Но учтите: если вы убрали position: sticky для мобильных, логотип не будет следовать за прокруткой и поведение визуально изменится.

Скриншот логотипа на белом фоне

Скриншот логотипа на тёмном фоне

Частые проблемы и способы их решения

Логотип обрезан у верха страницы

Причина: логотип находится вне секции, а фон body не белый. Решение: явно указать background-color: white для body.

Логотип полностью пропадает

Причина: не задан color: white для текста или используется не тот формат изображения. Решение: убедитесь, что исходный логотип белого цвета (или задайте color: white для текста/цвета fill для SVG).

Непредсказуемые цвета при цветном логотипе

Если логотип цветной, difference может выдавать неожиданные оттенки. Решения:

использовать монохромную белую версию логотипа;
применять blend-mode только для маски (mask) или градиента;
применять другой режим (например, exclusion) и тестировать.

Альтернативные подходы

JavaScript + IntersectionObserver: определяйте текущую секцию и переключайте класс логотипа (например, .logo–inverse). Это даёт полный контроль, но требует JS.
Использовать CSS переменные на уровне секций: каждая секция задаёт –logo-color и через наследование вы переключаете цвет вручную.
Фильтр invert на изображениях: filter: invert(1) инвертирует изображение, но не фон; применим к растровым картинкам, даёт разный эффект на SVG.

Пример JavaScript подхода (схематично):

const sections = document.querySelectorAll('section');
const logo = document.querySelector('.logo');
const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting && entry.target.classList.contains('is-dark')) {
      logo.classList.add('is-inverted');
    } else if (entry.isIntersecting) {
      logo.classList.remove('is-inverted');
    }
  });
}, {threshold: 0.5});
sections.forEach(s => observer.observe(s));

Этот подход полезен при сложных слоях, полупрозрачностях и когда mix-blend-mode даёт артефакты.

Критерии приёмки

Логотип остаётся видимым при прокрутке через тёмные и светлые секции на десктопе.
При переключении фон/содержание секции не создают мерцаний или заметных артефактов.
На мобильных экранах поведение не нарушает доступность и не закрывает важный контент.
Если используется SVG, цвет задаётся через fill/stroke и корректно инвертируется.

Руководство по внедрению (SOP)

Добавьте белую версию логотипа (текст или SVG) в HTML.
В CSS задайте .logo { color: white; mix-blend-mode: difference; }
Добавьте position: sticky внутри медиа‑запроса для десктопа.
Проверьте на страницах со сложными слоями/градиентами и скорректируйте, если артефакты появляются.
Тестируйте в браузерах (особенно WebKit и Chromium) и на мобильных.
При необходимости реализуйте fallback через JS.

Контроль качества и тесты приёмки

Тест 1: прокрутка от первой до последней секции на десктопе — логотип остаётся читаемым.
Тест 2: смена темы/цветов на сайте — логотип инвертируется корректно.
Тест 3: отключение mix-blend-mode (симулировать старые браузеры) — логотип остаётся видимым с запасным стилем (например, .logo.fallback { color: black }).

Доступность и SEO примечания

Убедитесь, что контраст между логотипом и фоном достаточен для пользователей с плохим зрением. mix-blend-mode визуально помогает, но автоматический контраст может не подходить для WCAG-оценок; рассмотрите явные альтернативы.
Для SEO используйте осмысленный alt у изображения: он должен описывать бренд или логотип.

Ментальная модель: как думать о blend modes

Представьте mix-blend-mode как световой фильтр, который смешивает цвета пикселей элемента и фона. difference — это «разница»: одинаковые цвета дают чёрный, противоположные — инвертируют тон. Для предсказуемых результатов начните с монохромных белых или чёрных элементов.

Примеры и вариации кода

Полный минимальный набор стилей:

body { background-color: white; }
.logo { color: white; mix-blend-mode: difference; }
@media (min-width: 980px) {
  .logo { position: sticky; top: .5rem; }
}
section:nth-child(even) { background: black; color: white; }
section:nth-child(odd) { background: white; color: black; }

Вариант с изображением (SVG):

.logo img { width: 10rem; height: auto; display: block; }
.logo { mix-blend-mode: difference; }

Когда mix-blend-mode не подходит

На страницах с множеством полупрозрачных слоёв, где blending даёт нежелательные артефакты.
Если вам нужно соблюдать строгие критерии контраста для доступности (WCAG) — динамическая инверсия может давать непредсказуемые значения.
На старых браузерах с ограниченной поддержкой blend modes.

Резюме

mix-blend-mode: difference — простой и элегантный способ заставить логотип автоматически «менять» цвет без JavaScript. Для надёжной работы используйте белую исходную версию логотипа, задайте background-color для body и тестируйте поведение в разных браузерах и на мобильных. Если вам нужен полный контроль или поддержка старых браузеров, реализуйте fallback на JavaScript.

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

Ключевые шаги: 1) белый логотип, 2) mix-blend-mode: difference, 3) position: sticky в медиа‑запросе, 4) body background белый.

Краткое руководство по тестам и приёмке приведено выше.