HEX, RGB, HSL или CMYK: какой цветовой формат выбрать и когда

Один цвет — четыре разных языка

Возьмите любой цвет, скажем тёплый коралловый. Теперь опишите его четырьмя способами:

• HEX: #E8635A
• RGB: rgb(232, 99, 90)
• HSL: hsl(4, 75%, 63%)
• CMYK: 0, 57, 61, 9

Все четыре записи описывают ровно один и тот же цвет. Это не конкурирующие стандарты, а разные представления цвета, оптимизированные под разные контексты. Путаница возникает, когда непонятно, какой контекст требует какого формата.

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

HEX: стандарт веба

Что это

HEX (шестнадцатеричный код) — это шесть символов после знака решётки: #E8635A. Каждая пара символов задаёт каналы красного, зелёного и синего в системе счисления с основанием 16 (от 00 до FF).

Функционально он идентичен RGB — просто записан иначе. #E8635A — это то же самое, что rgb(232, 99, 90). HEX — всего лишь более компактный способ записи значений RGB.

Когда использовать HEX

• CSS и веб-разработка — HEX является записью цвета по умолчанию в CSS. Его понимает любой браузер. color: #E8635A; — самый распространённый способ задать цвет в вебе.
• Дизайн-инструменты — Figma, Sketch, Adobe XD и Canva используют HEX как основной ввод. Когда дизайнер говорит «синий — это #3B82F6», всем понятно, о чём речь.
• Брендбуки — цифровые руководства по стилю почти всегда содержат значения HEX: они короткие, однозначные и легко копируются.
• Быстрая коммуникация — написать «возьми #333» в Slack быстрее, чем «возьми rgb(51, 51, 51)».

Когда НЕ стоит использовать HEX

• Когда нужна прозрачность — стандартный шестизначный HEX не поддерживает альфа-канал и непрозрачность. Понадобится восьмизначный HEX (#E8635A80), который читается хуже, либо переход на RGBA.
• Когда цвета нужно менять программно — «сделай на 20% светлее» в HEX практически невозможно посчитать в уме. Для этого гораздо лучше подходит HSL.
• Полиграфическое производство — типографии не используют HEX. Никогда.

Реальный пример

Вы пишете CSS для лендинга. Дизайнер передал вам гайдлайн с фирменными цветами. Вы пишете:

:root { --primary: #E8635A; --secondary: #2D3748; --accent: #F6AD55; }

HEX здесь идеален: компактно, читаемо и поддерживается везде.

RGB: цветовая модель экранов

Что это

RGB — это Red, Green, Blue (красный, зелёный, синий), три цвета света, смешивая которые экраны получают любой видимый вами цвет. Каждый канал принимает значения от 0 до 255. rgb(232, 99, 90) означает 232 единицы красного, 99 зелёного и 90 синего.

RGB — основа всего цифрового цвета. HEX — это просто RGB в другой записи. HSL — удобное для человека преобразование RGB. Всё, что появляется на вашем экране, в итоге превращается в значения RGB, отправляемые пикселям.

Когда использовать RGB

• Когда нужна прозрачность — RGBA добавляет альфа-канал: rgba(232, 99, 90, 0.5) даёт 50% непрозрачности. Это чище восьмизначного HEX и широко поддерживается в CSS, дизайн-инструментах и языках программирования.
• Программирование и разработка приложений — Swift, Kotlin, Flutter, React Native: фреймворки приложений внутри обычно оперируют значениями RGB/RGBA.
• Светодиоды и освещение — умные лампы (Philips Hue, светодиодные ленты) работают со значениями RGB. Если вы проектируете физические световые инсталляции, RGB — родной формат.
• Математика цвета — смешивать цвета, интерполировать градиенты или генерировать цвет программно в RGB просто.

Когда НЕ стоит использовать RGB

• Печать — экраны излучают свет (аддитивное смешение), бумага его отражает (субтрактивное смешение). RGB не может точно передать то, что выйдет из печатной машины.
• Настройка светлоты или насыщенности — «сделай цвет на 30% менее насыщенным» в RGB неинтуитивно. Сначала пришлось бы перевести его в HSL.

Реальный пример

Вы разрабатываете приложение на React Native, и вам нужен полупрозрачный оверлей:

backgroundColor: 'rgba(0, 0, 0, 0.6)'

RGB с альфа-каналом — естественный выбор: прямо, читаемо и нативно для движка отрисовки.

HSL: формат дизайнера

Что это

HSL — это Hue, Saturation, Lightness (тон, насыщенность, светлота):

• Тон (0°–360°) — собственно цвет как позиция на цветовом круге. 0° — красный, 120° — зелёный, 240° — синий.
• Насыщенность (0%–100%) — насколько цвет яркий. 0% — серый, 100% — чистейшая форма тона.
• Светлота (0%–100%) — насколько цвет светлый или тёмный. 0% — чёрный, 100% — белый, 50% — «истинный» цвет.

hsl(4, 75%, 63%) означает: красноватый тон (4°), очень яркий (насыщенность 75%) и слегка светлый (63%).

Когда использовать HSL

• Дизайн-системы и темы — HSL лучше всего подходит для создания согласованных цветовых шкал. Нужны 10 оттенков основного цвета? Сохраните тон и меняйте светлоту от 10% до 95%. Нужна приглушённая версия? Уменьшите насыщенность. В HEX или RGB сделать это интуитивно почти невозможно.
• Тёмная и светлая темы — переключение темы сводится к изменению светлоты и насыщенности, то есть напрямую к параметрам HSL. Tailwind CSS, Radix Colors и многие современные дизайн-системы построены на HSL.
• Программная генерация цвета — получать состояния наведения, неактивные состояния, фоны и границы из одного базового цвета в HSL элементарно: hsl(4, 75%, 73%) для более светлого варианта, hsl(4, 75%, 43%) для более тёмного.
• Доступность — проверка коэффициентов контраста становится понятнее, когда светлоту можно видеть и менять напрямую.

Когда НЕ стоит использовать HSL

• Коммуникация между командами — большинство людей не мыслит градусами и процентами. Фраза «кнопка — hsl(4, 75%, 63%)» при передаче макетов понятна хуже, чем «кнопка — #E8635A».
• Печать — как и RGB, HSL является экранной цветовой моделью.

Реальный пример

Вы строите дизайн-систему на Tailwind CSS, и вам нужна согласованная цветовая шкала:

--brand-50: hsl(4, 75%, 95%);
--brand-100: hsl(4, 75%, 90%);
--brand-200: hsl(4, 75%, 80%);
--brand-500: hsl(4, 75%, 63%);
--brand-700: hsl(4, 75%, 43%);
--brand-900: hsl(4, 75%, 25%);

Один тон, одна насыщенность, разная светлота. Идеальная шкала за 30 секунд. Попробуйте сделать так в HEX.

CMYK: формат печати

Что это

CMYK — это Cyan, Magenta, Yellow, Key (голубой, пурпурный, жёлтый и чёрный). Модель описывает цвет как смесь красок, нанесённых на белую бумагу. Каждое значение лежит в диапазоне от 0% до 100%: 0, 57, 61, 9 означает 0% голубого, 57% пурпурного, 61% жёлтого и 9% чёрного.

В отличие от RGB (который складывает свет, чтобы получить цвет), CMYK вычитает его из белой бумаги. Больше краски — темнее цвет. Именно поэтому модель называют субтрактивной.

Когда использовать CMYK

• Дизайн для печати — визитки, буклеты, упаковка, плакаты, журналы. Любой файл, отправляемый в типографию, должен быть в цветовом режиме CMYK.
• Подготовка файлов к печати в InDesign и Illustrator — эти программы позволяют работать в режиме CMYK и заранее видеть, как цвета будут выглядеть на бумаге (всегда менее насыщенно, чем на экране).
• Цветопроба — проверка, воспроизводимы ли цвета вашего макета в CMYK. Некоторые яркие цвета RGB (особенно неоновые зелёные и электрические синие) физически невозможно напечатать в CMYK: они выходят «за пределы охвата».

Когда НЕ стоит использовать CMYK

• Всё, что показывается на экране — сайты, приложения, соцсети, презентации, письма. Экраны работают в RGB. Задавать CMYK для сайта — всё равно что объяснять дорогу в морских милях: формально это расстояние, но для поездки бесполезно.
• Обработка фотографий — редактируйте в RGB и переводите в CMYK только на этапе финального экспорта для печати.

Реальный пример

Вы сделали плакат в Illustrator. Перед отправкой в типографию вы переводите документ в цветовой режим CMYK (File → Document Color Mode → CMYK Color), проверяете предупреждения о выходе за цветовой охват и правите электрические синие, ушедшие в мутный бирюзовый. Финальный PDF сохраняется в CMYK с ICC-профилем типографии.

Краткая справочная таблица

Шпаргалка: какой формат для какой задачи

Можно ли конвертировать их между собой?

Да — с оговорками.

• HEX ↔ RGB — без потерь, это одни и те же данные в разной записи.
• RGB ↔ HSL — без потерь, это математическое преобразование.
• RGB → CMYK — с потерями. Некоторые цвета RGB (яркие синие, неоновые, сочные зелёные) в CMYK воспроизвести нельзя. Конвертация сдвинет их к ближайшему печатаемому эквиваленту, который обычно выглядит тусклее.
• CMYK → RGB — технически возможно, но результат зависит от используемого ICC-профиля. Два конвертера могут выдать слегка разные значения RGB для одного и того же входа CMYK.

Для быстрых конвертаций на ходу самый удобный вариант — пипетка на телефоне, показывающая все четыре формата одновременно. Color Picker Camera: HEX RGB делает именно это: наведите камеру на любой цвет и увидите HEX, RGB, HSL и CMYK рядом друг с другом. Одно касание копирует нужное значение. Доступно на iPhone и Android.

Типичные ошибки

1. Делать макет для печати в RGB

Классическая ошибка новичка. Вы рисуете сочный плакат в Photoshop в режиме RGB, отправляете в типографию — и оттиск выглядит блёклым, особенно зелёные и синие. Всегда переводите файл в CMYK перед экспортом для печати и проверяйте предупреждения о цветовом охвате.

2. Использовать HEX там, где нужна прозрачность

Если в макете есть полупрозрачные слои, тени или эффекты стеклоформизма, переходите на RGBA или HSLA. Стандартный шестизначный HEX не несёт информации о непрозрачности, а восьмизначный применяют редко, потому что его тяжело читать.

3. Строить дизайн-систему на HEX

«#3B82F6, но на 20% светлее» требует конвертации, вычислений и обратной конвертации. В HSL: увеличьте светлоту на 20%. Дизайн-токены, генераторы тем и современные CSS-переменные работают в HSL заметно лучше.

4. Переводить CMYK в HEX для веба и ждать того же цвета

Бренд, описанный в CMYK для печати, будет выглядеть иначе при наивной конвертации в HEX для веба. Правильный подход: визуально подобрать цвет на экране под печатный образец и задать отдельные значения HEX для цифровых носителей. В брендбуке должны быть и те и другие.

Частые вопросы

Чем HEX отличается от RGB?

По цвету — ничем, отличается только запись. HEX записывает те же значения красного, зелёного и синего в шестнадцатеричной системе. #FF0000 идентичен rgb(255, 0, 0). HEX короче набирать; RGB проще менять программно, и он поддерживает альфа-канал (RGBA).

Когда использовать CMYK вместо RGB?

Всегда, когда результат печатается на физическом носителе — бумаге, картоне, ткани, пластике. Если всё остаётся на экране, используйте RGB (или HEX/HSL). Если пойдёт в печать, переключайтесь на CMYK на этапе экспорта.

HSL лучше, чем HEX?

Для дизайн-систем, тем и работы с цветом — да. Для быстрого обмена значениями и вставки в инструменты практичнее HEX. Они описывают одни и те же цвета; HSL просто раскладывает информацию так, как человек думает о цвете (тон → яркость → светлота).

Может ли телефон показать все четыре формата сразу?

Да. Color Picker Camera: HEX RGB снимает цвет камерой или берёт его с фотографии и одновременно показывает HEX, RGB, HSL и CMYK. Коснитесь любого значения, чтобы скопировать его. Приложение работает как калькулятор цветовых форматов для реального мира: один снимок — четыре формата.

Итог

HEX — для веба и быстрой коммуникации. RGB — для разработки приложений и прозрачности. HSL — для дизайн-систем и работы с цветом. CMYK — для печати.

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

Скачать Color Picker Camera для iPhone | Скачать для Android

Скачать PDF

Другие форматы: Markdown · Text · JSON · EPUB · JATS XML · BibTeX · RIS · CSL-JSON

Лицензия: CC BY 4.0