Дизайн QR-кода: как изменить цвет, форму и добавить логотип без потери сканируемости

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

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

Разберём, какие части QR-кода можно менять, где проходит граница безопасной стилизации и как проверить результат перед публикацией или печатью.

6 мин чтения1 301 словРазное-иное22 июля 2026 г.

Александр Владимиров

Автор CompanionAI

Что можно менять в QR-коде, а что нельзя нарушать

QR-код состоит из небольших элементов — модулей. Кроме них, в структуре есть три крупных квадрата по углам — поисковые маркеры, служебные области и свободное поле вокруг кода.

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

Элемент	Можно менять	Основной риск
Цвет модулей	Да	Недостаточный контраст
Форма обычных модулей	Да	Потеря различимой структуры
Угловые маркеры	Ограниченно	Камера не определит положение кода
Логотип	Ограниченно	Перекрытие данных
Фон	Да	Код сольётся с изображением
Свободное поле	Убирать нельзя	Код не отделяется от окружения

Инфографика анатомия QR-кода — угловые маркеры, область данных, центральная зона и свободное поле

На возможности оформления влияет и объём записанных данных. Чем длиннее ссылка, тем больше модулей появляется и тем плотнее становится код. Плотный QR-код хуже переносит уменьшение, крупный логотип и сильное изменение формы элементов.

Для печатных материалов лучше использовать короткий адрес или редирект на собственном домене. Внешний сокращатель ссылок может перестать работать, и изменить уже напечатанный статический QR-код не получится.

Как изменить цвет QR-кода

QR-код не обязан быть чёрно-белым

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

Наиболее надёжный вариант — тёмные модули на светлом однотонном фоне. Например:

тёмно-синий код на белом фоне;
бордовый на светло-бежевом;
тёмно-зелёный на светло-сером;
графитовый на фирменной светлой плашке.

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

Контраст важнее фирменного цвета

Не каждый цвет из брендбука подходит для QR-кода. Пастельные и светлые оттенки часто не дают достаточного контраста.

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

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

Тёмный фон, инверсия и градиенты

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

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

Безопасно: тёмно-синий QR-код на белой подложке.

Рискованно: светло-золотой градиент поверх фотографии с бликами.

Можно ли изменить форму модулей QR-кода

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

Проблемы начинаются, когда точки становятся слишком маленькими, а промежутки между ними — слишком большими. На мониторе такой код может выглядеть аккуратно, но после уменьшения отдельные модули потеряются.

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

Какая стилизация мешает сканированию

Риск повышают:

очень мелкие или разреженные точки;
несколько разных форм внутри одного кода;
линии, текстуры и орнаменты поверх модулей;
декоративные элементы внутри угловых маркеров;
попытка превратить весь QR-код в круг;
смешение кода с фоновым узором.

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

Иллюстрация: безопасная и чрезмерная стилизация одного QR-кода

Как добавить логотип в QR-код

Логотип обычно размещают в центре. Так он не перекрывает угловые маркеры и меньше мешает камере определять положение кода.

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

Зачем логотипу нужна подложка

Если поместить сложный знак прямо поверх модулей, его детали могут смешаться со структурой QR-кода. Однотонная подложка отделяет логотип и делает его заметнее.

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

Как подобрать размер логотипа

Универсального процента, который гарантированно подходит для любого QR-кода, нет. Допустимый размер зависит от плотности кода, уровня коррекции ошибок, итогового размера и условий использования.

Практический подход:

Добавьте небольшой логотип в центр
Проверьте код в итоговом размере
Постепенно увеличивайте изображение, повторяя тест
Уменьшите логотип, если распознавание стало медленнее или нестабильнее

Чем плотнее QR-код, тем меньше должна быть закрытая область.

Как коррекция ошибок помогает QR-коду с логотипом

В QR-код записываются избыточные данные, благодаря которым он может работать при небольшом повреждении или перекрытии. Для этого используются уровни коррекции L, M, Q и H.

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

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

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

Как разместить QR-код на фотографии или цветном фоне

Размещать код прямо поверх фотографии рискованно. Тени, блики, текстуры и детали изображения могут сливаться с модулями.

Надёжнее использовать однотонную плашку. Она отделяет QR-код от изображения и сохраняет контраст.

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

Зачем нужно свободное поле вокруг кода

Свободное поле — пустая область вокруг QR-кода, которая помогает камере отделить его от окружающего макета.

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

Текст, рамки и декоративные элементы нельзя ставить вплотную к коду. Подпись или призыв к действию располагают за пределами свободного поля:

«Открыть сайт»;
«Посмотреть каталог»;
«Получить инструкцию»;
«Оставить отзыв».

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

Как проверить дизайн QR-кода перед публикацией или печатью

Один успешный тест с большого монитора не подтверждает качество QR-кода. Рабочий вариант должен быстро распознаваться несколькими обычными смартфонами без подбора идеального угла.

Проверяйте код по следующему алгоритму:

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

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

Чек-лист безопасного дизайна QR-кода

Перед публикацией или отправкой макета в печать убедитесь, что:

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

В генераторе QR-кодов CompanionAI https://companionai.ru/tools/qr-code-generator/ можно настроить цвет и форму модулей, добавить логотип, выбрать коррекцию ошибок и скачать готовый файл в PNG или SVG.