От экрана до печати: гид по цветовым форматам для разработчиков, дизайнеров и маркетологов.
От пикселей на модных OLED-экранах до физических красок на бумаге: разбираем технологии работы с цветом и материалы для воплощения ваших идей.
Вы когда-нибудь замечали, что один и тот же цвет выглядит сочным на экране айфона, блеклым на бюджетном мониторе и совершенно «грязным» на напечатанной листовке? Все дело в цветовых моделях и форматах. Разным специалистам нужны разные инструменты. В этой статье мы разберем основные форматы цвета и покажем, какой из них выбрать под вашу задачу, чтобы не потерять качество и время.
1. Для UI/UX и веб-дизайнеров
Ваша цель — быстро создавать интерфейсы, соблюдать доступность (WCAG) и гибко управлять оттенками.
🎯 Лучшие форматы: HSL и OKLCH
- HSL (Hue, Saturation, Lightness): Главный плюс HSL — человекочитаемость. Вам больше не нужно гадать, сколько красного добавилось в код. Первая цифра — угол на цветовом круге от $0^\circ$ до $360^\circ$, вторая — насыщенность, третья — светлота.
- OKLCH (Современный стандарт): В отличие от HSL, учитывает особенности человеческого зрения. В HSL желтый и синий при 50% светлоты кажутся разной яркости. В OKLCH светлота визуально честная: вы легко создадите аккуратную дизайн-систему или темную тему без искажений контраста.
| Формат | Читаемость человеком | Удобство создания оттенков | Поддержка широкого охвата |
| HEX | Низкая (#32CD32) | Сложно | Нет |
| RGB | Средняя (rgb(50, 205, 50)) | Сложно | Нет |
| HSL | Высокая (hsl(120, 61%, 50%)) | Легко (меняем % светлоты) | Нет |
| OKLCH | Высокая (oklch(0.7 0.2 140)) | Идеально (равномерно) | Да (Display P3) |
💡 Лайфхак для дизайнера: Если вам нужно собрать гармоничную схему для сайта или приложения, используйте готовую палитру цветов — там оттенки уже сгруппированы по базовым тонам, что сэкономит часы работы над макетом.
2. Для Frontend-разработчиков
Ваша цель — чистый CSS-код, кроссбраузерность, легкая поддержка тем и быстрая работа анимаций.
🎯 Лучшие форматы: HEX, RGB, OKLCH
- HEX: Классический формат для фиксации констант. Компактный, поддерживается абсолютно всеми браузерами.
- RGB / RGBA: Идеален, когда объекту нужна прозрачность (через альфа-канал). В современном CSS можно писать без запятых:
rgb(0 128 255 / 50%). - OKLCH / Relative Color Syntax: Трендовый стандарт CSS4. Позволяет создавать интерактивные состояния (hover, active) прямо в CSS без применения JavaScript.
Пример: Создание Hover-эффекта на лету в CSS
CSS
:root {
--brand-color: #0080ff; /* Базовый цвет */
}
.button {
background-color: var(--brand-color);
transition: background-color 0.2s;
}
/* При наведении делает цвет на 10% темнее без изменения исходника */
.button:hover {
background-color: oklch(from var(--brand-color) calc(l - 0.1) c h);
}
🛠 Инструмент для верстки: Когда дизайнер прислал макет в формате RGB, а вам нужен HEX с альфа-каналом для CSS-переменных, переведите значения за секунду через онлайн-конвертер цветов.
3. Для полиграфистов и печатников
Ваша цель — получить на бумаге точно такой же цвет, какой заказчик утвердил на экране.
🎯 Единственный верный формат: CMYK
Экраны излучают свет (RGB — аддитивная модель: смешивание лучей дает белый). Бумага же отражает свет (CMYK — субтрактивная модель: смешивание красок Cyan, Magenta, Yellow и Black дает темный/черный).
- Главная ошибка при сдаче в печать: Если отправить в типографию файл в RGB или HEX, печатный станок автоматически переведет его в CMYK. В результате ярко-зеленый или неоново-розовый с экрана превратится в грязно-оливковый на бумаге.
- Запомните: Всегда верстайте печатную продукцию (буклеты, визитки, баннеры) в цветовом профиле CMYK и согласуйте с типографией выкрасы (Pantone).
4. Для маркетологов, контент-мейкеров и SMM
Ваша цель — соблюсти брендбук, сделать сочный баннер и повысить кликабельность (CTR).
🎯 Лучший формат: HEX и готовые палитры
Вам не нужно погружаться в математику цветовых пространств. Главное для маркетолога — знать HEX-коды фирменных цветов компании (например,
#FF0000) и уметь сочетать их с акцентными оттенками.Как применять цвета в маркетинге:
- Основной цвет (60%): Нейтральный фон (белый, серый, темный).
- Вторичный цвет (30%): Цвет бренда для карточек, шапки и элементов.
- Акцентный цвет (10%): Яркий цвет для целевой кнопки (CTA).
💡 Совет для SMM: Если вы делаете креативы для соцсетей в Figma или Canva, выбирайте контрастные сочетания. Откройте палитру цветов, кликните на основной цвет вашей компании и скопируйте коды подходящих оттенков в один клик.
Краткий чек-лист: Какой формат выбрать прямо сейчас?
- Пишете базовый CSS? ➔ Используйте HEX (
#0000FF). - Делаете CSS-компонент с прозрачностью? ➔ Используйте RGB (
rgb(0 0 255 / 80%)). - Проектируете гибкую дизайн-систему или темную тему? ➔ Используйте OKLCH или HSL.
- Готовите макет к печати в типографии? ➔ Используйте CMYK.
- Ищете идеи для нового проекта? ➔ Переходите в нашу палитру цветов, подбирайте оттенки и переводите их в нужные форматы с помощью конвертера цветов.
