Как изменить цвет логотипа онлайн

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

Почему перекрасить можно только вектор

Вся лёгкость держится на одном свойстве SVG: в нём цвет хранится отдельно от формы. Внутри тега <path> стоит атрибут вроде fill="#005BFF", отдельный параметр рядом с рисунком. Поменяли значение, и залилось иначе, а линии, кривые и пропорции остались нетронутыми. По сути вы правите текстовый файл.

У PNG всё устроено наоборот. Отсюда и вся разница. В растре цвет впечатан в каждый пиксель: чтобы сделать синий логотип белым, нужно перекрасить тысячи точек, аккуратно обходя сглаженные края. Это полноценная работа в графическом редакторе вместо смены одного значения. Поэтому правило простое: перекрашивается легко только SVG. Если у вас на руках PNG, сначала понадобится вектор; почему и как, разбирали в сравнении SVG или PNG для логотипа.

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

Как изменить цвет в Trace Logo's

Именно так устроен редактор на страницах каталога: он вытаскивает цвета прямо из SVG и позволяет заменить любой.

1. Откройте страницу нужного логотипа в каталоге.
2. Нажмите на логотип, чтобы открыть панель редактирования.
3. В блоке «Цвета бренда» видны все цвета, использованные в SVG, ровно те самые значения fill.
4. Кликните по цвету и выберите новый в HSV‑пикере или введите точный HEX‑код, если он уже известен.
5. Скачайте результат в SVG или PNG либо скопируйте готовый код для вставки на сайт.

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

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

Где это реально нужно

Дальше идут ровно те ситуации, из‑за которых вы и открыли эту статью.

• Белый логотип для тёмного фона. Замените основной цвет на #FFFFFF. Стандартное решение для футеров, тёмных хедеров и слайдов с тёмной темой, тот самый случай из начала статьи.
• Одноцветная версия. Сведите все цвета к одному: чёрный для печати на визитках, серый для водяного знака на фото. Чем меньше цветов, тем дешевле и предсказуемее печать.
• Логотип для футболок и мерча. Здесь одноцветный вариант нужен почти всегда: многоцветная печать по ткани дороже и не везде доступна, поэтому бренд заранее готовит моно‑версию.
• Favicon или иконка приложения. На крошечном размере упрощённая одноцветная версия читается лучше многоцветной, подробнее в разборе про фавикон.
• Адаптация под палитру проекта. Подгонка логотипа партнёра под цвета вашего макета, но только если это разрешено гайдлайном бренда. К гайдлайнам вернёмся ниже.

Три из пяти сценариев требуют точного цвета. А точность на глаз не берётся.

Как узнать точный HEX перед перекраской

Если вы подбираете оттенок в пикере визуально, итог почти всегда чуть промахивается мимо фирменного, и разница между «примерно таким синим» и точным #005BFF заметна сразу, особенно рядом с оригиналом. Поэтому, когда нужен конкретный цвет бренда, HEX‑код надо знать заранее.

Для исходного файла код уже показан в блоке «Цвета бренда» на странице логотипа, искать его не придётся. Но если оттенок нужен от стороннего логотипа, скриншота или элемента чужого дизайна, его сначала придётся считать. Как это сделать надёжно (пипеткой, из скриншота, из кода) разобрано в отдельной статье «Как узнать точный цвет логотипа». С готовым HEX перекраска превращается в подстановку одного значения, и промахнуться уже невозможно.

Как проверить контраст цифрами

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

Пороги заданы стандартом доступности WCAG: для крупной графики и элементов интерфейса контраст с фоном должен быть не ниже 3:1. Логотип формально к тексту не относится, но если он несёт название компании, читаемость подчиняется тем же цифрам. Проверить пару цветов можно любым онлайн‑калькулятором контраста: вводите два HEX и получаете коэффициент.

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

Что делать, если у вас только PNG

Всё описанное работает при одном условии: на руках есть вектор. Но чаще всего приходит именно PNG, скачанный когда‑то с сайта, и вопрос «как его перекрасить» встаёт заново.

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

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

Частые ошибки

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

Последняя ошибка уводит из интерфейса в область права. О ней стоит сказать отдельно: инструмент вам всё разрешит, а бренд может запретить.

Техническая свобода не отменяет прав

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

Типичные ограничения повторяются от бренда к бренду, и знать их полезно заранее. Монохромная версия обычно разрешена только в двух вариантах: полностью чёрный и полностью белый знак. Перекраска в произвольный цвет чаще всего запрещена совсем. Инверсия (белый знак на фирменном фоне) разрешается почти всегда, а вот фирменный цвет на чужом цветном фоне — почти никогда. То, что вы физически можете сделать белый логотип из синего, ещё не значит, что бренд разрешает его так показывать. Где проходит граница между «можно» и «нельзя» с чужим знаком, подробно разобрано в статье «Можно ли использовать чужой логотип».

Что дальше

Готовый перекрашенный логотип не обязательно скачивать файлом. Скопируйте SVG‑код прямо из редактора и вставьте в Figma: он ляжет на холст полностью векторным и редактируемым, как будто вы его там и создали. Оттуда знак отправится в макет сайта, презентацию или на мерч.

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

Если коротко

Перекраска логотипа перестала быть работой для дизайнера ровно потому, что в SVG цвет хранится отдельным значением; поменять его можно кликом в браузере. Но лёгкость инструмента заканчивается там, где начинаются две границы: точность (нужен HEX и проверка контраста) и право (нужен гайдлайн бренда). Держите обе в голове и попробуйте редактор цвета на любом логотипе из нашего каталога.