--- title: "HEX, RGB, HSL или CMYK: какой цветовой формат выбрать и когда" author: "Lubor Šimůnek" date: 2026-03-21 modified: 2026-08-26 language: "ru" url: "https://appstoryo.com/ru/blog/hex-vs-rgb-vs-hsl-vs-cmyk-which-color-format-to-use" publisher: "AppStoryo (lapnito.cz s.r.o.)" license: "CC BY 4.0" license_url: "https://creativecommons.org/licenses/by/4.0/" category: "Дизайн" keywords: ["Дизайн", "article", "AppStoryo"] --- # HEX, RGB, HSL или CMYK: какой цветовой формат выбрать и когда > Четыре цветовых формата — четыре разных сценария. Это руководство объясняет, когда использовать 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 | Веб, CSS, брендбуки | #000000 – #FFFFFF | Только восьмизначный (#RRGGBBAA) | Средняя | Нет | | RGB | Экраны, приложения, градиенты | 0–255 на канал | Да (RGBA) | Средняя | Нет | | HSL | Дизайн-системы, темы | 0°–360°, 0%–100%, 0%–100% | Да (HSLA) | Высокая | Нет | | CMYK | Печать, упаковка | 0%–100% на канал | Нет | Низкая | Да | ## Шпаргалка: какой формат для какой задачи | Ваш проект | Используйте этот формат | Почему | | --- | --- | --- | | CSS сайта | HEX или HSL | HEX ради простоты; HSL для дизайн-систем с темами | | Мобильное приложение (iOS/Android) | RGB/RGBA | Нативные фреймворки внутри используют RGB | | Макет в Figma / Sketch | HEX | Стандартный ввод в дизайн-инструментах | | Дизайн-система / токены | HSL | Шкалы и варианты в HSL строятся элементарно | | Графика для соцсетей | HEX или RGB | Только цифровая среда; Canva и Photoshop принимают оба | | Визитка / буклет | CMYK | Идёт в физическую типографию | | Упаковка товара | CMYK + Pantone | Печать плюс единство фирменного цвета | | Шаблон письма | HEX | Почтовые клиенты надёжно поддерживают HEX | | Умные лампы / светодиоды | RGB | Светодиодное оборудование работает в RGB нативно | | Документ брендбука | Все четыре | Разным командам нужны разные форматы | ## Можно ли конвертировать их между собой? Да — с оговорками. - **HEX ↔ RGB** — без потерь, это одни и те же данные в разной записи. - **RGB ↔ HSL** — без потерь, это математическое преобразование. - **RGB → CMYK** — с потерями. Некоторые цвета RGB (яркие синие, неоновые, сочные зелёные) в CMYK воспроизвести нельзя. Конвертация сдвинет их к ближайшему печатаемому эквиваленту, который обычно выглядит тусклее. - **CMYK → RGB** — технически возможно, но результат зависит от используемого ICC-профиля. Два конвертера могут выдать слегка разные значения RGB для одного и того же входа CMYK. Для быстрых конвертаций на ходу самый удобный вариант — пипетка на телефоне, показывающая все четыре формата одновременно. **[Color Picker Camera: HEX RGB](https://apps.apple.com/us/app/color-picker-camera-hex-rgb/id6759371237)** делает именно это: наведите камеру на любой цвет и увидите HEX, RGB, HSL и CMYK рядом друг с другом. Одно касание копирует нужное значение. Доступно на [iPhone](https://apps.apple.com/us/app/color-picker-camera-hex-rgb/id6759371237) и [Android](https://play.google.com/store/apps/details?id=com.tomas.color_picker). ## Типичные ошибки ### 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](https://apps.apple.com/us/app/color-picker-camera-hex-rgb/id6759371237) снимает цвет камерой или берёт его с фотографии и одновременно показывает HEX, RGB, HSL и CMYK. Коснитесь любого значения, чтобы скопировать его. Приложение работает как калькулятор цветовых форматов для реального мира: один снимок — четыре формата. ## Итог **HEX** — для веба и быстрой коммуникации. **RGB** — для разработки приложений и прозрачности. **HSL** — для дизайн-систем и работы с цветом. **CMYK** — для печати. Выбирать один-единственный не нужно — нужно применять подходящий в каждом контексте. А когда требуется перевести цвет из одного формата в другой или снять реальный цвет сразу в четырёх форматах, пипетка на телефоне остаётся самым быстрым инструментом. [Скачать Color Picker Camera для iPhone](https://apps.apple.com/us/app/color-picker-camera-hex-rgb/id6759371237) | [Скачать для Android](https://play.google.com/store/apps/details?id=com.tomas.color_picker) --- Source: License: [CC BY 4.0](https://creativecommons.org/licenses/by/4.0/) Cite as: Lubor Šimůnek (2026). HEX, RGB, HSL или CMYK: какой цветовой формат выбрать и когда. AppStoryo, lapnito.cz s.r.o. https://appstoryo.com/ru/blog/hex-vs-rgb-vs-hsl-vs-cmyk-which-color-format-to-use