Градиентный QR
Градиентный QR — код, в котором модули окрашены не одним цветом, а плавным переходом двух и более оттенков (linear-, radial- или conic-gradient). Декоративный приём для маркетинга и брендирования. Работает надёжно только при контрасте каждой точки перехода с фоном ≥4:1 и уровне коррекции ошибок H (30%).
Что такое градиентный QR
Градиентный QR — это QR-код, у которого модули (маленькие квадраты матрицы) окрашены не одним цветом, а плавным переходом между двумя или несколькими оттенками. Визуально код перестаёт выглядеть как стандартная чёрно-белая решётка и превращается в элемент дизайна: от спокойного перехода «тёмно-синий → тёмно-фиолетовый» до экспрессивного «бордовый → оранжевый» в зависимости от бренда.
Технически градиент накладывается поверх матрицы модулей как CSS-слой или растровая маска — сканер при этом видит только контраст между тёмными и светлыми зонами. Пока контраст держится, код читается. Как только в светлой части градиента соотношение яркостей падает ниже 4:1 — эти модули начинают «пропадать» для декодера. Именно здесь большинство красивых градиентных кодов и разваливаются.
Поддерживается в современных генераторах, включая QRkoder, QR Code Generator Pro и Adobe Express.
Типы градиентов и их сканируемость
На практике чаще всего встречаются три варианта:
Linear gradient (линейный). Переход идёт по прямой — обычно слева направо или по диагонали. Самый предсказуемый тип: контраст меняется равномерно, и его легко просчитать — нужно проверить оба конца перехода на соотношение с фоном. Пример безопасной пары: #1E3A8A → #0F172A на белом фоне (10.5:1 и 17.8:1 соответственно). Оба конца глубоко тёмные — код читается везде.
Radial gradient (радиальный). Переход от центра к краям (или наоборот). Здесь опасная зона чаще всего в центре, где расположен finder pattern. Если центр — светлая точка радиального перехода, finder pattern теряет контраст раньше всего остального, и сканер не может найти ориентацию кода.
Conic gradient (конический). Переход по кругу вокруг центральной точки. Наименее предсказуемый по контрасту: светлые сектора могут «разрезать» несколько рядов модулей по диагонали. Требует попиксельной проверки контраста — автоматические калькуляторы здесь не помогают.
Правило для любого типа: наименее контрастная точка перехода должна давать соотношение с фоном ≥4:1. Не в среднем, не «почти всегда» — в каждой точке градиента.
6 правил безопасного градиента
- Контраст ≥4:1 в каждой точке перехода. Проверяйте оба конца градиента через WCAG-калькулятор. Если хотя бы один конец даёт 3.8:1 — это уже риск при плохом освещении или печати.
- Finder pattern оставьте монотонным. Три угловых блока — самое критичное место для сканера. Оставьте их в чистом чёрном (#000000): декодер находит ориентацию кода именно по ним. Градиент на finder pattern — главная причина, почему красивый код не читается на Samsung A52 и Xiaomi.
- Timing pattern — тоже лучше в монотоне. Тонкие чередующиеся дорожки между угловыми блоками калибруют сетку модулей. Если градиент делает их серыми — декодер хуже определяет границы ячеек.
- ECL H (30%) — обязательно. Неравномерный контраст градиента создаёт «мягкие» повреждения в светлых зонах. Уровень коррекции ECL-H даёт запас на восстановление до 30% модулей — это страховка там, где градиент недотянул по контрасту.
- Не светлеть к центру при radial-градиенте. Центральная зона — это finder pattern и область наибольшей плотности данных. Радиальный переход «светлое в центре → тёмное к краям» убивает именно то, что сканер проверяет первым.
- Тестируйте на 5+ устройствах. Обязательно: нативная камера iOS (iPhone XR, 13, 15), Android 12+ (Samsung S23), Android 8–9 (Samsung A52), Xiaomi бюджетный, Google Lens. Старые устройства хуже справляются с неравномерным контрастом — если тест пройдёт на Samsung A52 2020 года, остальные прочитают без проблем.
Опасность реальная: красивые градиенты не сканируются на iPhone до 8-й серии и Android до версии 8 при слабом освещении. Градиент, который идеально выглядит в презентации, может давать 20–30% отказов в реальных условиях кафе или магазина.
Частые вопросы
Все генераторы поддерживают градиентный QR?
Нет. Базовые бесплатные инструменты (Google Chart API, qr-code-generator.com в бесплатном тарифе) поддерживают только монохромные коды. Градиент — фича профессиональных и платных генераторов: QRkoder, QR Code Generator Pro, Adobe Express, Canva Pro. При этом реализации отличаются: одни применяют градиент только к модулям данных, оставляя finder pattern чёрными (правильно), другие красят всю матрицу целиком, включая угловые блоки (рискованно). Перед использованием проверьте, можно ли исключить finder pattern из градиента — это ключевой признак качественной реализации.
Градиентный QR хуже сканируется, чем обычный?
При правильно построенном градиенте — незначительно хуже или одинаково. Исследования показывают, что при контрасте ≥5:1 во всех точках перехода и сохранении finder pattern в монотоне надёжность сканирования сопоставима с монохромным кодом на современных устройствах (iOS 14+, Android 10+). Реальная разница появляется на устройствах 2016–2019 года и при сложных условиях: контровой свет, влажная поверхность, расстояние более 40 см от экрана. Если целевая аудитория — широкая (разные возрасты, разные телефоны), безопаснее использовать монохромный код с тёмным фирменным цветом вместо градиента.
Можно ли сделать градиентный QR с логотипом одновременно?
Можно, но это двойная нагрузка на механизм коррекции ошибок. Логотип перекрывает 15–20% модулей, градиент создаёт зоны пониженного контраста — вместе они могут исчерпать 30% запаса ECL-H. Правила при совмещении: ECL-H обязателен (не ECL-Q), логотип — не более 15% площади (обычные 20% уже рискованно), finder pattern в чёрном монотоне, белая подложка под логотипом. После сборки — тест минимум на 7 устройствах, включая старые. Если хотя бы два из семи дают сбой — уберите либо логотип, либо градиент.
Какой тип градиента самый безопасный для QR?
Линейный градиент «тёмный → тёмный» по горизонтали или вертикали — самый предсказуемый и безопасный вариант. Оба конца перехода должны быть глубоко тёмными: например, тёмно-синий #1E3A8A → тёмно-фиолетовый #3B0764 на белом фоне. Контраст в самой светлой точке перехода — 10.5:1, нет ни одной зоны риска. Радиальный и конический градиенты сложнее контролировать и требуют попиксельной проверки контраста. Градиент «тёмный → средний → светлый» (например, тёмно-синий → голубой → белый) использовать нельзя — светлая зона гарантированно не читается.
Градиент или цветной QR — что выбрать для бренда?
Зависит от задачи. Цветной монохромный QR (один тёмный фирменный цвет на белом фоне) надёжнее и проще в производстве: один раз выбрали тёмный оттенок из палитры, проверили контраст — и всё работает на любом устройстве. Градиентный QR даёт больше дизайнерской свободы и выглядит эффектнее на промо-материалах, витринах, презентациях. Но требует дополнительной работы: проверки контраста в нескольких точках, тестирования на реальных устройствах, ECL-H как минимума. Для тиражной печати (упаковка, полиграфия 1000+ экземпляров) без обширного тестирования предпочтительнее монохромный. Для цифровых носителей (экраны, POSM, сторис) — градиент вполне оправдан.