Возьмите любой цвет, скажем тёплый коралловый. Теперь опишите его четырьмя способами:
Все четыре записи описывают ровно один и тот же цвет. Это не конкурирующие стандарты, а разные представления цвета, оптимизированные под разные контексты. Путаница возникает, когда непонятно, какой контекст требует какого формата.
В этом руководстве каждый формат разобран простым языком: что это такое, как работает, когда его применять и когда он — неверный выбор. Если вы работаете с цветом в любом качестве — дизайн, разработка, печать, маркетинг, — это убережёт вас от выбора неподходящего формата для проекта.
HEX (шестнадцатеричный код) — это шесть символов после знака решётки: #E8635A. Каждая пара символов задаёт каналы красного, зелёного и синего в системе счисления с основанием 16 (от 00 до FF).
Функционально он идентичен RGB — просто записан иначе. #E8635A — это то же самое, что rgb(232, 99, 90). HEX — всего лишь более компактный способ записи значений RGB.
color: #E8635A; — самый распространённый способ задать цвет в вебе.#E8635A80), который читается хуже, либо переход на RGBA.Вы пишете CSS для лендинга. Дизайнер передал вам гайдлайн с фирменными цветами. Вы пишете:
:root { --primary: #E8635A; --secondary: #2D3748; --accent: #F6AD55; }
HEX здесь идеален: компактно, читаемо и поддерживается везде.
RGB — это Red, Green, Blue (красный, зелёный, синий), три цвета света, смешивая которые экраны получают любой видимый вами цвет. Каждый канал принимает значения от 0 до 255. rgb(232, 99, 90) означает 232 единицы красного, 99 зелёного и 90 синего.
RGB — основа всего цифрового цвета. HEX — это просто RGB в другой записи. HSL — удобное для человека преобразование RGB. Всё, что появляется на вашем экране, в итоге превращается в значения RGB, отправляемые пикселям.
rgba(232, 99, 90, 0.5) даёт 50% непрозрачности. Это чище восьмизначного HEX и широко поддерживается в CSS, дизайн-инструментах и языках программирования.Вы разрабатываете приложение на React Native, и вам нужен полупрозрачный оверлей:
backgroundColor: 'rgba(0, 0, 0, 0.6)'
RGB с альфа-каналом — естественный выбор: прямо, читаемо и нативно для движка отрисовки.
HSL — это Hue, Saturation, Lightness (тон, насыщенность, светлота):
hsl(4, 75%, 63%) означает: красноватый тон (4°), очень яркий (насыщенность 75%) и слегка светлый (63%).
hsl(4, 75%, 73%) для более светлого варианта, hsl(4, 75%, 43%) для более тёмного.Вы строите дизайн-систему на 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 — это Cyan, Magenta, Yellow, Key (голубой, пурпурный, жёлтый и чёрный). Модель описывает цвет как смесь красок, нанесённых на белую бумагу. Каждое значение лежит в диапазоне от 0% до 100%: 0, 57, 61, 9 означает 0% голубого, 57% пурпурного, 61% жёлтого и 9% чёрного.
В отличие от 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 нативно |
| Документ брендбука | Все четыре | Разным командам нужны разные форматы |
Да — с оговорками.
Для быстрых конвертаций на ходу самый удобный вариант — пипетка на телефоне, показывающая все четыре формата одновременно. Color Picker Camera: HEX RGB делает именно это: наведите камеру на любой цвет и увидите HEX, RGB, HSL и CMYK рядом друг с другом. Одно касание копирует нужное значение. Доступно на iPhone и Android.
Классическая ошибка новичка. Вы рисуете сочный плакат в Photoshop в режиме RGB, отправляете в типографию — и оттиск выглядит блёклым, особенно зелёные и синие. Всегда переводите файл в CMYK перед экспортом для печати и проверяйте предупреждения о цветовом охвате.
Если в макете есть полупрозрачные слои, тени или эффекты стеклоформизма, переходите на RGBA или HSLA. Стандартный шестизначный HEX не несёт информации о непрозрачности, а восьмизначный применяют редко, потому что его тяжело читать.
«#3B82F6, но на 20% светлее» требует конвертации, вычислений и обратной конвертации. В HSL: увеличьте светлоту на 20%. Дизайн-токены, генераторы тем и современные CSS-переменные работают в HSL заметно лучше.
Бренд, описанный в CMYK для печати, будет выглядеть иначе при наивной конвертации в HEX для веба. Правильный подход: визуально подобрать цвет на экране под печатный образец и задать отдельные значения HEX для цифровых носителей. В брендбуке должны быть и те и другие.
По цвету — ничем, отличается только запись. HEX записывает те же значения красного, зелёного и синего в шестнадцатеричной системе. #FF0000 идентичен rgb(255, 0, 0). HEX короче набирать; RGB проще менять программно, и он поддерживает альфа-канал (RGBA).
Всегда, когда результат печатается на физическом носителе — бумаге, картоне, ткани, пластике. Если всё остаётся на экране, используйте RGB (или HEX/HSL). Если пойдёт в печать, переключайтесь на CMYK на этапе экспорта.
Для дизайн-систем, тем и работы с цветом — да. Для быстрого обмена значениями и вставки в инструменты практичнее HEX. Они описывают одни и те же цвета; HSL просто раскладывает информацию так, как человек думает о цвете (тон → яркость → светлота).
Да. Color Picker Camera: HEX RGB снимает цвет камерой или берёт его с фотографии и одновременно показывает HEX, RGB, HSL и CMYK. Коснитесь любого значения, чтобы скопировать его. Приложение работает как калькулятор цветовых форматов для реального мира: один снимок — четыре формата.
HEX — для веба и быстрой коммуникации. RGB — для разработки приложений и прозрачности. HSL — для дизайн-систем и работы с цветом. CMYK — для печати.
Выбирать один-единственный не нужно — нужно применять подходящий в каждом контексте. А когда требуется перевести цвет из одного формата в другой или снять реальный цвет сразу в четырёх форматах, пипетка на телефоне остаётся самым быстрым инструментом.
Скачать Color Picker Camera для iPhone | Скачать для Android
" }