Фирменный синий — это не #0000FF: как Intel, LinkedIn, IBM и Dell используют синий
Чистый синий в печати выглядит серее, похож на ссылку и плохо виден на чёрном. Знаменитые синие логотипы используют более спокойный оттенок. Их точные коды, почему синие Facebook и Visa меняются в печати и как выбрать свой.
Хороший фирменный синий никогда не бывает #0000FF. Чистый синий — самый глубокий синий, который может показать экран. Звучит мощно, пока логотип не уходит в печать и не возвращается серее, или не попадает на веб-страницу, где всё синее выглядит как ссылка. Знаменитые синие логотипы решают это одинаково, и этот приём легко повторить для своего.
Почему чистый синий проблемный
Чистый синий — это угол цветового пространства экрана: синий свет на полной мощности и ничего больше. Печатная краска до этого угла не дотягивает.
На экране
В печати, на мелованной бумаге
При конвертации для стандартной мелованной печати #0000FF становится CMYK 93/75/0/0 и выходит на пробе примерно как #2C4A9A: серее и площе. Разница такая, что намётанный глаз называет это другим цветом, так что синий на визитке не совпадёт с синим на сайте.
У чистого синего есть и вторая беда на чёрном. Это самый тёмный из ярких цветов, поэтому синий текст или знак на тёмном фоне почти исчезает.
На белом
На чёрном
Он ещё и похож на ссылку
Ссылка в браузере по умолчанию
Чистый синий
Браузеры красят непосещённые ссылки в #0000EE, это из рекомендуемой таблицы стилей стандарта HTML. Это один шаг от #0000FF, поэтому логотип или кнопка в чистом синем читаются как нечто кликабельное или как забытое без оформления.
Как это делают знаменитые синие
Intel: #0068B5
Чистый средний синий, примерно на 34 градуса смещённый к голубому от чистого синего. В печати он отличается от экранного в пределах Delta E 0,8, что слишком мало, чтобы заметить. Логотип Intel используется инвертированным в белый на этом синем, и белый на нём читается легко.
LinkedIn: #0A66C2
Дружелюбный синий с чуть большей долей фиолетового, чем у Intel. Из четырёх он сильнее всех сдвигается в печати, Delta E 2,0, и это всё ещё у самой границы того, что замечает глаз. Логотип и квадрат становятся белыми, а «in» вырезано синим.
IBM: #1F70C1
Устойчивый, чуть более мягкий синий с долей серого. Полосатые буквы тонкие, поэтому цвет должен оставаться достаточно светлым, чтобы белые линии на нём читались: белый на этом синем с запасом проходит минимум доступности для текста. В печати Delta E 1,3.
Dell: #007DB8
Самый светлый и самый голубой из четырёх, из ребрендинга Dell 2016 года. Это самый чистый синий здесь, в 41 градусе от чистого синего, и в печати он укладывается в 0,9 Delta E. Но у него и меньше всего запаса для белого текста: проверку контраста он проходит, но еле-еле.
Три вещи, которые делают все
Они смещены к голубому. Чистый синий находится на 240 градусах цветового круга, как и цвет ссылки по умолчанию. Dell на 199, Intel на 206, LinkedIn и IBM на 210. Сдвиг на 30–40 градусов от 240 делает синий спокойным и избавляет от сходства с гиперссылкой.
Они работают и на белом, и на чёрном. Чистый синий силён на белом и тонет на чёрном. Эти четыре сидят в середине диапазона светлоты, поэтому белый текст проходит на всех, и каждый остаётся виден как цвет на тёмном фоне.
Они печатаются верно. Каждый на пробе укладывается в Delta E 2,0.
| Бренд | Синий | Оттенок | Белый текст на нём | Как цвет на чёрном | Сдвиг в печати |
|---|---|---|---|---|---|
| Чистый синий | #0000FF | 240° | Проходит, 8,6 к 1 | Не проходит, 2,4 к 1 | Большой, 16,6 |
| Intel | #0068B5 | 206° | Проходит, 5,8 к 1 | Проходит, 3,6 к 1 | Незаметный, 0,8 |
| #0A66C2 | 210° | Проходит, 5,7 к 1 | Проходит, 3,7 к 1 | Малый, 2,0 | |
| IBM | #1F70C1 | 210° | Проходит, 5,1 к 1 | Проходит, 4,1 к 1 | Малый, 1,3 |
| Dell | #007DB8 | 199° | Проходит, 4,5 к 1 | Проходит, 4,6 к 1 | Незаметный, 0,9 |
Сдвиг в печати меньше примерно 2 заметить трудно. Выше примерно 5 напечатанный цвет читается как другой синий.
Синие, которые в печати всё-таки сдвигаются
Пройти экранные проверки недостаточно, потому что печать это отдельный тест. Измеренные так же, три других знаменитых синих сильно уходят на мелованной печати.
| Бренд | Синий | Оттенок | Белый текст на нём | Сдвиг в печати |
|---|---|---|---|---|
| #0866FF | 217° | Проходит, 4,8 к 1 | Большой, 9,7 | |
| Visa | #1434CB | 230° | Проходит, 8,8 к 1 | Большой, 9,2 |
| Samsung (по данным источников) | #1428A0 | 231° | Проходит, 11,4 к 1 | Заметный, 6,0 |
Синий Facebook самый интересный. Он лежит в диапазоне со смещением к голубому и проходит проверку белого текста, и всё равно на пробе выходит заметно другим синим.
Более яркие, насыщенные синие оказываются за пределами того, что способна напечатать четырёхцветная краска. У этих брендов свои причины, и живут они в основном на экранах, так что это измерение, а не ошибка. Урок для вашего логотипа: делайте печатную пробу, а не гадайте по оттенку.
Как выбрать синий для вашего логотипа
- Начните с 30–40 градусов от чистого синего. Сдвиньте #0000FF к голубому так, чтобы он оказался примерно между 199 и 210 градусами, в диапазоне четырёх знаменитых синих.
- Проверьте его тремя способами. Белый текст на нём должен легко читаться при размере основного текста. Сам цвет должен быть заметен на чёрном. И он не должен выглядеть как ссылка рядом с #0000EE.
- Сделайте печатную пробу. Выполните софт-пруф в дизайнерской программе с профилем мелованной бумаги или попросите пробу у типографии. Если напечатанный синий выглядит другим цветом, двигайте его, пока экран и печать не совпадут.
Заберите эти 4 синих
Четыре синих в том виде, как их рисует каждый бренд.
Используйте их, чтобы изучать и сравнивать со своим синим. Копировать точный синий известного бренда для нового логотипа в смежной сфере значит выглядеть как подделка: берите приём, а не коды.
FAQ
Какой hex-код у синего Intel?
Синий Intel это #0068B5, как он нарисован в файле логотипа Intel.
Какой hex-код у синего LinkedIn?
Синий LinkedIn это #0A66C2, как он нарисован в файле логотипа LinkedIn 2021 года.
Какой hex-код у синего IBM?
Синий IBM это #1F70C1, как он нарисован в файле логотипа IBM.
Какой hex-код у синего Dell?
Синий Dell это #007DB8, как он нарисован в логотипе Dell после ребрендинга 2016 года.
Почему #0000FF плох для логотипа?
Он печатается заметно серее, чем выглядит на экране, почти совпадает с цветом ссылки в браузере по умолчанию и почти исчезает на чёрном. Более спокойный синий со смещением к голубому решает все три проблемы.
Какого цвета ссылка в браузере по умолчанию?
Непосещённые ссылки имеют цвет #0000EE в рекомендуемой таблице стилей стандарта HTML, это один шаг от чистого синего.
Какой синий хорош для логотипа?
Средний синий с оттенком примерно от 199 до 210 градусов, как у Intel, LinkedIn, IBM и Dell, который проходит проверку с белым текстом, виден на чёрном и в печати укладывается примерно в Delta E 2.
Источники
- Цвета считаны из файла логотипа каждого бренда на Wikimedia Commons: логотип Intel (2020), LinkedIn (2021), IBM, Dell (2016).
- Цвет ссылки по умолчанию: стандарт HTML, rendering, где
:linkравен#0000EE. - Сдвиг в печати: софт-пруф с профилем печати Coated FOGRA39, измерен как Delta E 2000. #0000FF на пробе выходит как #2C4A9A, разница 16,6. Четыре знаменитых синих сдвигаются на 0,8–2,0. Для Facebook #0866FF, Visa #1434CB и Samsung #1428A0 (по данным источников) сдвиг составляет 9,7, 9,2 и 6,0.
- Углы оттенка рассчитаны по hex-кодам в модели HSL. Соотношения белого на цвете и цвета на чёрном рассчитаны по формуле контраста WCAG 2.
- Каждый логотип показан инвертированным в белый на собственном синем, в версии, которую эти бренды используют на своём цвете. Только перекрашено, никогда не перерисовано, а товарные знаки принадлежат их владельцам.
- Впервые опубликовано как карусель в Logo Brainy.
Choosing colors for a new logo? Our team designs brand identities with colors that work on screen, in print and next to each other.
Get Started
