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

Тёмный футер сайта — и на нём нужен белый логотип. Печать на визитке — нужен чёрный. Партнёрская страница в чужой палитре — нужен логотип в её цветах. Задача возникает постоянно, и ещё несколько лет назад ответ на неё был один: открыть 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 либо скопируйте готовый код для вставки на сайт.

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

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

Типовые сценарии — не абстрактный список «что умеет инструмент», а ровно те ситуации, из‑за которых вы и открыли эту статью:

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

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

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

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

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

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

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

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

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

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

Что дальше

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

Если коротко

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