Как узнать точный цвет логотипа — HEX‑код за 30 секунд
Нужно оформить кнопку «Войти через VK» в фирменном синем, подобрать фон под логотип клиента или собрать презентацию в цветах бренда — а точного кода цвета нет. На глаз подбирать нельзя: разница между «примерно таким зелёным» и фирменным #21A038 заметна сразу и выглядит неаккуратно. Разберём, как получить точный HEX‑код цвета любого логотипа.
Самый надёжный источник цвета — SVG‑файл логотипа: цвет записан прямо в коде, без искажений. Самый быстрый — пипетка в Figma или расширении браузера. Самый опасный — пипетка по JPG‑картинке из поиска: сжатие искажает цвета, и вы скопируете «испорченный» оттенок.
Что такое HEX и почему все говорят на нём
HEX — это запись цвета в виде #RRGGBB: две шестнадцатеричных цифры на красный, зелёный и синий каналы. #FF0000 — чистый красный, #21A038 — зелёный Сбера. Это универсальный язык: HEX понимают CSS, Figma, Photoshop, конструкторы сайтов и любой разработчик. В брендбуках цвет дублируют ещё в RGB (для экранов) и CMYK/Pantone (для печати), но в цифровой работе достаточно HEX.
Способ 1. Взять из SVG — эталонный
Если у вас есть SVG логотипа, цвет уже записан внутри файла. Откройте SVG любым текстовым редактором и найдите атрибуты fill:
<path fill="#21A038" d="M45.2 12.6..."/>Вот он, точный фирменный цвет — ровно тот, который заложил дизайнер, без искажений сжатия и цветовых профилей. Если заливок несколько, каждая — отдельный цвет палитры бренда.
Способ 2. Пипетка в Figma
Вставьте логотип в Figma, выделите фигуру — цвет заливки покажется в правой панели, клик по нему открывает HEX. Либо пипетка (клавиша I) по любому месту холста. Работает и с векторными, и с растровыми файлами.
Способ 3. Пипетка в браузере
- Расширения‑колорпикеры (ColorZilla и аналоги) — пипетка по любой точке любой страницы.
- DevTools: если цвет задан в CSS сайта, откройте инспектор (F12), найдите элемент — в стилях будет точное значение. Клик по цветному квадратику открывает пипетку.
- Chrome без расширений: в DevTools у любого поля цвета есть пипетка, которой можно ткнуть в страницу.
Способ 4. Официальные гайдлайны бренда
У крупных компаний есть страницы brand assets / brand guidelines, где фирменные цвета выписаны явно: HEX, RGB, CMYK, Pantone. Это юридически «самый правильный» источник — тот самый цвет, который бренд просит использовать. Ищите по запросу «название бренда brand guidelines».
Способ 5. Онлайн‑инструменты
Сервисы вроде image color picker: загружаете картинку, кликаете по точке, получаете HEX. Работает, но с оговоркой из следующего раздела.
Почему пипетка иногда врёт
- JPG‑сжатие. На границах цветов JPG создаёт переходные пиксели. Ткнули пипеткой в край буквы — получили не фирменный цвет, а его смесь с фоном. Всегда кликайте в центр крупной заливки.
- Цветовые профили. Одна и та же картинка на разных мониторах и в разных браузерах может отдавать чуть разные значения — особенно если файл сохранён в Display P3, а не sRGB.
- Полупрозрачность и наложения. Если логотип лежит на подложке с прозрачностью, пипетка снимет смешанный цвет, а не исходный.
Отсюда правило: пипетка — для быстрых задач, SVG или гайдлайны — для чистовых.
Что делать с цветом дальше
Получили HEX — дальше обычно нужно: собрать палитру вокруг него, проверить контраст текста на этом фоне (для доступности — контраст минимум 4.5:1 для обычного текста), сконвертировать в RGB или CMYK для печати. Любой конвертер цветов делает это мгновенно.
А если задача обратная — не узнать цвет, а поменять его в самом логотипе — у нас есть отдельная инструкция как изменить цвет логотипа.
Шпаргалка по цветовым системам: HEX, RGB, HSL, CMYK, Pantone
Один и тот же цвет записывается пятью способами, и полезно понимать, когда какой нужен:
| Система | Пример (зелёный Сбера) | Где используется |
|---|---|---|
| HEX | #21A038 | CSS, Figma, все цифровые задачи |
| RGB | rgb(33, 160, 56) | то же самое, другая запись |
| HSL | hsl(131, 66%, 38%) | удобна для подбора оттенков в CSS |
| CMYK | ≈ 79/0/89/0 | печать |
| Pantone | плашечный цвет по каталогу | брендовая печать, когда оттенок критичен |
Важные следствия. HEX и RGB — одно и то же число в разных обёртках, конвертация между ними точная. А вот CMYK — другое цветовое пространство: часть ярких экранных цветов в печати недостижима, поэтому конвертация «на глазок» онлайн‑калькулятором может разочаровать на бумаге. Для важной печати бренды заказывают цветопробу или используют Pantone — физический каталог эталонных красок, который не зависит от настроек принтера.
HSL — недооценённый помощник: запись «тон‑насыщенность‑светлота» позволяет осмысленно строить палитру от фирменного цвета: тёмная версия для ховера = тот же тон, меньше светлота; пастельный фон = тот же тон, меньше насыщенность, больше светлота.
Как собрать всю палитру бренда, а не один цвет
Задача чаще звучит не «узнать цвет», а «собрать фирменные цвета для макета». Порядок:
- Основной цвет — из SVG‑логотипа или гайдлайнов (способы выше).
- Вторичные цвета — посмотрите живой продукт: сайт и приложение бренда. В DevTools загляните в CSS‑переменные (
:rootв стилях) — современные сайты держат палитру там, и это готовый список: основной, акцентный, фоновые, текстовые. - Проверка контраста — прежде чем использовать чужую палитру в своих макетах, прогоните пары «текст/фон» через проверку контраста (минимум 4.5:1 для обычного текста, 3:1 для крупного).
- Фиксация — сохраните собранное стилями в Figma или переменными в CSS, чтобы цвет вводился один раз, а не копипастился по файлам.
Два коварных случая. Видео: цвет в ролике искажён сжатием и цветокоррекцией — не снимайте фирменный цвет с кадра YouTube, найдите статичный исходник. Градиенты: у градиентного логотипа «главных» цветов два и более — снимайте оба конца градиента, а в SVG они видны в теге <linearGradient> явными стопами.
Коротко
HEX из SVG‑кода — эталон, гайдлайны бренда — официальный источник, пипетка — быстрый способ с осторожностью на JPG. Кликайте в центр заливки, а не в края, и не доверяйте цветам из перекодированных картинок.
Чтобы не заниматься детективной работой: на странице каждого бренда в нашем каталоге логотипов есть блок «Цвета бренда» — все фирменные HEX‑коды, извлечённые прямо из оригинального SVG, копируются кликом.