Онлайн
конвертер
цветов

Форматы цветов

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

HEX-коды встречаются повсюду, хотя большинство людей не осознаёт, что именно видит. Открываете фирменный стиль бренда — в гайде написано #E63946 . Смотрите на код страницы в браузере — color: #1D3557 . Скачиваете дизайн в Figma — в палитре стоят те же решётка и шесть символов. Даже URL-адреса изображений иногда содержат HEX-значения параметров.

Дизайнеры передают цвета брендбука через HEX именно потому, что это короткая, однозначная запись: шесть символов однозначно описывают один из 16 миллионов цветов. Разработчик получил код — вставил в CSS — цвет точный. Никаких разночтений.

HEX — от слова hexadecimal, шестнадцатеричный. Обычная десятичная система считает от 0 до 9. Шестнадцатеричная добавляет буквы: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Одна «шестнадцатеричная цифра» хранит значения от 0 до 15, две цифры — от 0 до 255.

Именно это число — 255 — граница одного цветового канала в компьютере. Канал хранится в одном байте (8 бит), байт содержит 256 значений: от 0 до 255. Два шестнадцатеричных символа идеально вмещают байт. Потому и выбрали HEX: краткая запись, которая точно соответствует внутреннему устройству памяти.

/* Десятичные значения каналов → HEX */
/* R=255, G=0,   B=0   → красный    */  color: #FF0000;
/* R=0,   G=255, B=0   → зелёный    */  color: #00FF00;
/* R=0,   G=0,   B=255 → синий      */  color: #0000FF;
/* R=0,   G=0,   B=0   → чёрный     */  color: #000000;
/* R=255, G=255, B=255 → белый      */  color: #FFFFFF;

HEX-код начинается с символа # и содержит шесть символов, разделённых на три пары. Каждая пара кодирует интенсивность одного из трёх цветовых каналов:

#  FF    A3    2B
↑   ↑     ↑     ↑
#  Red  Green  Blue

#FF = 255 (максимум)
#A3 = 163
#2B =  43

Существует и сокращённая форма — три символа вместо шести: #F00 равно #FF0000 . Браузер просто удваивает каждый символ. Сокращение работает только тогда, когда оба символа в паре совпадают: #AB1 → #AABB11 , но #A1B → сокращения нет, потому что A1 не удваивается.

/* Полная и сокращённая формы */
color: #FFFFFF;   /* белый — полная запись  */
color: #FFF;      /* белый — сокращённая    */

color: #AABBCC;   /* голубоватый — полная   */
color: #ABC;      /* голубоватый — короткая */

color: #1A2B3C;   /* нет сокращения         */

В CSS HEX используется везде, где принимается цветовое значение: color , background-color , border-color , box-shadow , в функциях градиентов.

.button {
    background-color: #2563EB;
    color: #FFFFFF;
    border: 1px solid #1D4ED8;
    box-shadow: 0 2px 6px #93C5FD;
}

.button:hover {
    background-color: #1D4ED8;
}

В системе CSS Custom Properties HEX-значения удобно хранить в переменных: так цвет меняется в одном месте и применяется по всему проекту.

:root {
    --color-primary:   #2563EB;
    --color-secondary: #7C3AED;
    --color-text:      #1E293B;
    --color-surface:   #F8FAFC;
}

.card {
    background: var(--color-surface);
    color: var(--color-text);
    border-left: 4px solid var(--color-primary);
}

Начиная с CSS Color Level 4 HEX поддерживает 8-символьную запись с альфа-каналом. Седьмая и восьмая позиции кодируют прозрачность: FF — полностью непрозрачный, 00 — полностью прозрачный.

/* #RRGGBBAA */
color: #2563EBFF;   /* полностью непрозрачный    */
color: #2563EB80;   /* 50% прозрачности (~0x80)  */
color: #2563EB00;   /* полностью прозрачный      */

/* Сокращённая 4-символьная форма */
color: #1AF8;       /* = #11AAFF88               */

На практике для прозрачности чаще всего используют rgba() или hsla() — они нагляднее. Но 8-символьный HEX полезен, когда нужно сохранить весь цвет одной строкой, например в JSON-конфигах или базах данных.

Все три формата описывают один и тот же цвет. Разница — в удобстве для разных задач:

/* Один и тот же цвет — три записи */
color: #E63946;                  /* HEX  — компактно, точно      */
color: rgb(230, 57, 70);         /* RGB  — явные числовые каналы */
color: hsl(356, 79%, 56%);       /* HSL  — понятно человеку      */

• HEX — лучший выбор для хранения точных значений из дизайн-системы или брендбука.
• RGB — когда нужно управлять каналами по отдельности, например добавлять прозрачность через переменную.
• HSL — когда важна читаемость: по числам сразу понятно, тёмный это цвет или светлый, насыщенный или блёклый.

RGB — это модель аддитивного синтеза: цвет получается сложением света. Именно так работает каждый пиксель на вашем экране. Он не отражает свет, как бумага, — он излучает его. Три крошечных субпикселя рядом: красный, зелёный и синий. Управляя их яркостью, дисплей смешивает любой из миллионов цветов.

Откройте любой экран под лупой — вы увидите именно эти три точки. Бумага работает иначе: она поглощает часть спектра и отражает остаток. Поэтому на бумаге используют другую модель — CMYK. Но всё цифровое — мониторы, телефоны, планшеты, проекторы — работает на RGB.

RGB расшифровывается как Red, Green, Blue — красный, зелёный, синий. Каждый канал принимает значение от 0 (канал выключен) до 255 (максимальная яркость). При всех трёх каналах на нуле — чёрный (нет света). При всех на 255 — белый (максимум всех трёх).

rgb(255,   0,   0)   /* красный   */
rgb(  0, 255,   0)   /* зелёный   */
rgb(  0,   0, 255)   /* синий     */
rgb(255, 255,   0)   /* жёлтый    */
rgb(  0, 255, 255)   /* циановый  */
rgb(255,   0, 255)   /* пурпурный */
rgb(  0,   0,   0)   /* чёрный    */
rgb(255, 255, 255)   /* белый     */

Смешивание каналов аддитивное: каждый канал добавляет свет к результату. Красный и зелёный вместе дают жёлтый — потому что именно такое сочетание воспринимает человеческий глаз. Зелёный и синий дают голубой. Все три — белый.

Промежуточные значения создают полутона. Число 128 — половина яркости канала. Серый цвет — это равные значения всех трёх каналов: rgb(128, 128, 128) . Тёплые серые имеют чуть повышенный красный канал, холодные — синий.

/* Оттенки серого — равные каналы */
rgb(20,  20,  20)    /* почти чёрный */
rgb(80,  80,  80)    /* тёмно-серый  */
rgb(128, 128, 128)   /* средний серый */
rgb(200, 200, 200)   /* светло-серый  */
rgb(245, 245, 245)   /* почти белый   */

/* Тёплый vs холодный серый */
rgb(135, 128, 120)   /* тёплый — больше красного  */
rgb(120, 128, 135)   /* холодный — больше синего  */

HEX — это просто другая запись тех же трёх значений. Каждая пара HEX-символов — это канал RGB в шестнадцатеричной системе. Перевод прямой:

/* Перевод: HEX → RGB */
#FF5733
↓↓ ↓↓ ↓↓
FF  57  33
↓   ↓   ↓
255  87  51

/* Результат */
color: #FF5733;
color: rgb(255, 87, 51);   /* один и тот же цвет */

/* Ещё примеры */
#1A73E8  →  rgb(26, 115, 232)
#34A853  →  rgb(52, 168, 83)
#EA4335  →  rgb(234, 67, 53)

В CSS функция rgb() принимает три числа — по одному на канал. Для прозрачности используют rgba() с четвёртым параметром от 0 до 1. Начиная с CSS Color Level 4, функция rgb() также принимает слэш-нотацию для альфа-канала.

/* Без прозрачности */
color: rgb(230, 57, 70);

/* С прозрачностью — классическая форма */
background-color: rgba(230, 57, 70, 0.15);

/* С прозрачностью — современная форма (CSS Color Level 4) */
background-color: rgb(230 57 70 / 15%);

/* Полезный паттерн: хранить каналы в переменных */
:root {
    --color-brand-r: 230;
    --color-brand-g: 57;
    --color-brand-b: 70;
}
.overlay {
    background: rgba(var(--color-brand-r), var(--color-brand-g), var(--color-brand-b), 0.3);
}

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

Попробуйте угадать цвет по записи rgb(147, 90, 180) — без подсказки это невозможно. Нужно мысленно смешать красный, зелёный и синий в нужных пропорциях, как краски. Человеческий мозг не работает так. Мы думаем иначе: «это синеватый, средне-светлый, не очень насыщенный».

Именно эту проблему решает HSL: он описывает цвет так, как его воспринимает человек, — через тон, насыщенность и светлоту.

HSL — Hue, Saturation, Lightness: тон, насыщенность, светлота. Это другой способ описать тот же RGB-цвет, но через параметры, понятные дизайнеру:

hsl(тон, насыщенность%, светлота%)

/* Примеры */
hsl(  0, 100%, 50%)   /* красный          */
hsl(120, 100%, 50%)   /* зелёный          */
hsl(240, 100%, 50%)   /* синий            */
hsl(356,  79%, 56%)   /* насыщенный красный */
hsl(210,  50%, 40%)   /* приглушённый синий */

• Hue (тон) — угол на цветовом круге от 0° до 360°. 0° и 360° — красный, 120° — зелёный, 240° — синий. Промежуточные значения дают все остальные цвета спектра.
• Saturation (насыщенность) — от 0% (серый) до 100% (чистый цвет). На 0% все тона становятся оттенками серого, независимо от значения Hue.
• Lightness (светлота) — от 0% (чёрный) до 100% (белый), при 50% — чистый цвет. Изменяя только светлоту, можно получить гамму от тёмной тени до пастельного оттенка.

/* Меняем только Hue — перебираем цвета радуги */
hsl(  0, 70%, 50%)   /* красный    */
hsl( 30, 70%, 50%)   /* оранжевый  */
hsl( 60, 70%, 50%)   /* жёлтый     */
hsl(120, 70%, 50%)   /* зелёный    */
hsl(200, 70%, 50%)   /* голубой    */
hsl(270, 70%, 50%)   /* фиолетовый */

/* Меняем только Lightness — темнее/светлее */
hsl(210, 60%, 20%)   /* тёмно-синий  */
hsl(210, 60%, 40%)   /* средний синий */
hsl(210, 60%, 60%)   /* светлый синий */
hsl(210, 60%, 80%)   /* пастельный    */

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

/* Палитра на одном тоне (Hue=210) */
:root {
    --blue-900: hsl(210, 60%, 15%);   /* самый тёмный  */
    --blue-700: hsl(210, 60%, 30%);
    --blue-500: hsl(210, 60%, 50%);   /* базовый цвет  */
    --blue-300: hsl(210, 60%, 70%);
    --blue-100: hsl(210, 60%, 90%);   /* самый светлый */
}

Ещё один плюс — простота адаптации. Чтобы сделать цвет темнее при наведении, достаточно уменьшить светлоту через calc() :

:root {
    --btn-h: 210;
    --btn-s: 60%;
    --btn-l: 50%;
}

.button {
    background: hsl(var(--btn-h), var(--btn-s), var(--btn-l));
}
.button:hover {
    background: hsl(var(--btn-h), var(--btn-s), calc(var(--btn-l) - 8%));
}

Как и у RGB, у HSL есть вариант с альфа-каналом — hsla() . Четвёртый параметр — прозрачность от 0 (прозрачный) до 1 (непрозрачный). В современном CSS функция hsl() принимает альфа через слэш-нотацию.

/* Классическая форма */
background: hsla(210, 60%, 50%, 0.15);   /* полупрозрачный синий */

/* Современная форма (CSS Color Level 4) */
background: hsl(210 60% 50% / 15%);

/* Практичный паттерн: overlay поверх фото */
.card__overlay {
    background: hsla(220, 30%, 10%, 0.6);
}

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

Если напечатать RGB-цвет напрямую, принтер не знает, как его воспроизвести: у него нет красного, зелёного и синего картриджей. У него есть голубой, пурпурный, жёлтый и чёрный. Поэтому перед печатью любой RGB-цвет конвертируется в CMYK — и именно здесь картинка на экране может заметно отличаться от того, что вышло из принтера.

CMYK — Cyan, Magenta, Yellow, Key (Black): голубой, пурпурный, жёлтый, чёрный. Именно эти четыре краски стоят в большинстве принтеров и используются в типографской печати.

Почему не смешать чёрный из трёх красок CMY? Теоретически смесь C+M+Y даёт чёрный, но на практике — грязно-коричневый. Чёрный картридж добавлен специально: он даёт чистый глубокий чёрный для текста, экономит цветные краски и улучшает резкость. Буква K означает «Key» — ключевой, опорный.

Как цвета «поглощают» свет: голубая краска поглощает красный свет и пропускает зелёный и синий. Пурпурная поглощает зелёный. Жёлтая поглощает синий. Накладывая краски друг на друга, мы «убираем» нужные части спектра из отражённого света — и получаем нужный цвет.

/* CMYK-значения в диапазоне 0–100% */
/*                C    M    Y    K   */
/* Красный    */  0%  100%  100%  0%
/* Зелёный    */  100%  0%  100%  0%
/* Синий      */  100% 100%   0%  0%
/* Чёрный     */    0%   0%   0% 100%
/* Белый      */    0%   0%   0%   0%
/* Нейтральный серый */  0%   0%   0%  50%

В CMYK каждый компонент показывает, какую долю краски нужно нанести — от 0% (нет краски) до 100% (полное покрытие). Краски смешиваются на бумаге: маленькие точки разных цветов расположены рядом, а глаз на расстоянии воспринимает их как один смешанный цвет. Это называется растровая печать.

Для точного воспроизведения цветов в типографии используются специальные цветовые профили — ICC-профили. Они описывают, как конкретный принтер воспроизводит каждый CMYK-цвет. Без профиля один и тот же CMYK-файл на разных принтерах даст разный результат.

Главное различие — цветовой охват (gamut). RGB-экраны способны показать больше ярких, насыщенных цветов, чем может воспроизвести типографская краска. Некоторые RGB-цвета просто «не существуют» в CMYK: при конвертации они заменяются ближайшим печатаемым аналогом — и становятся тусклее.

/* Пример: яркий RGB-синий теряет насыщенность при конвертации */

/* На экране */  rgb(0, 100, 255)       /* ярко-синий     */
/* В CMYK    */  C=100%, M=61%, Y=0%, K=0%  /* бледнее      */
/* Обратно   */  rgb(0, 99, 255)        /* почти то же, но другой оттенок */

/* Яркий зелёный — непечатаемый цвет */
/* На экране */  rgb(0, 255, 100)       /* кислотный зелёный */
/* В CMYK    */  C=100%, M=0%, Y=61%, K=0%
/* Результат: при печати значительно тусклее */

Ключевые отличия в таблице:

RGB:
  — Аддитивная модель (сложение света)
  — Экраны, мониторы, цифровые проекторы
  — Широкий цветовой охват
  — 3 канала × 8 бит = 16 777 216 цветов

CMYK:
  — Субтрактивная модель (поглощение света)
  — Полиграфическая печать, принтеры
  — Ограниченный цветовой охват
  — 4 канала, значения 0–100%

1. Сохранять макет в RGB и отправлять в типографию. Типография сконвертирует самостоятельно — автоматически, без учёта ваших предпочтений. Цвета могут поплыть. Всегда конвертируйте в CMYK вручную в Photoshop или Illustrator и проверяйте результат до отправки.

2. Использовать «насыщенный» чёрный из всех четырёх красок. Значения C=100%, M=100%, Y=100%, K=100% («rich black») дают очень тёмный чёрный, но для мелкого текста это проблема: малейшее несовмещение красок на принтере даёт «хроматическую» кайму вокруг букв. Для текста используйте чистый K=100%.

/* Для крупных заливок — насыщенный чёрный */
/* C=60%, M=40%, Y=40%, K=100% */

/* Для текста — только чёрный картридж */
/* C=0%, M=0%, Y=0%, K=100% */

3. Игнорировать цветовые профили. Для офсетной печати в России обычно используют профиль Fogra39 (мелованная бумага) или Fogra47 (матовая). Уточните у типографии, какой профиль они используют, и настройте Photoshop/Illustrator под него до начала работы — иначе то, что вы видите на экране, не совпадёт с результатом.

4. Конвертировать в CMYK несколько раз. Каждая конвертация вносит погрешность. Работайте в исходном цветовом пространстве до финального экспорта — и конвертируйте только один раз, в самом конце.

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