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

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

Вы пишете 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, отправляемые пикселям.

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

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

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

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

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

Вы строите дизайн-систему на 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-профилем типографии.

Классическая ошибка новичка. Вы рисуете сочный плакат в 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. Коснитесь любого значения, чтобы скопировать его. Приложение работает как калькулятор цветовых форматов для реального мира: один снимок — четыре формата.