HEX, RGB, HSL или CMYK: какой цветовой формат выбрать и когда ============================================================= Четыре цветовых формата — четыре разных сценария. Это руководство объясняет, когда использовать HEX, RGB, HSL или CMYK, на реальных примерах из веб-дизайна, полиграфии, соцсетей и разработки приложений. Author: Lubor Šimůnek Published: 2026-03-21 Category: Дизайн Один цвет — четыре разных языка Возьмите любой цвет, скажем тёплый коралловый. Теперь опишите его четырьмя способами: - 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: https://appstoryo.com/ru/blog/hex-vs-rgb-vs-hsl-vs-cmyk-which-color-format-to-use 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