Как перевести цвет HEX в RGB: форматы HEX, RGB, HSL и alpha

Один и тот же цвет в вёрстке можно записать несколькими способами, и новичка это сбивает с толку: дизайнер прислал #3498DB, а в макете CSS указано rgb(52, 152, 219) — это ошибка или одно и то же? Одно и то же. HEX и RGB — просто две формы записи одного цвета, как «1/2» и «0.5». В этой статье разберём, как устроены форматы HEX, RGB и HSL, как быстро переводить их друг в друга вручную и в коде, и когда какой формат удобнее применять в CSS и дизайне.

Что такое RGB и почему 255

RGB расшифровывается как Red, Green, Blue — красный, зелёный, синий. Экран формирует любой цвет, смешивая эти три канала. Каждый канал задаётся числом от 0 до 255: 0 — канал выключен, 255 — светит на максимум. Почему именно 255? Потому что на каждый канал отводится 8 бит, а 8 бит дают 2⁸ = 256 значений, то есть от 0 до 255. Три канала по 256 градаций дают 256³ ≈ 16,7 млн цветов.

Примеры: rgb(255, 0, 0) — чистый красный, rgb(0, 255, 0) — зелёный, rgb(0, 0, 0) — чёрный, rgb(255, 255, 255) — белый. Серый — это равные значения всех трёх каналов, например rgb(128, 128, 128).

Что такое HEX и как он связан с RGB

HEX — это те же три числа RGB, но записанные в шестнадцатеричной (16-ричной) системе счисления и слитно, с решёткой впереди. Формат: #RRGGBB, где RR — красный, GG — зелёный, BB — синий. В 16-ричной системе используются цифры 0–9 и буквы A–F (A=10, B=11, … F=15). Одна пара символов кодирует число от 00 до FF, то есть ровно от 0 до 255 — поэтому HEX и RGB взаимозаменяемы.

Существует и короткая запись из трёх символов, например #39F. Она разворачивается удвоением каждого символа: #39F = #3399FF. Это работает только когда обе цифры в паре совпадают.

Как перевести HEX в RGB вручную

Возьмём #3498DB и разобьём на три пары: 34, 98, DB. Каждую пару переводим из 16-ричной системы в десятичную по формуле «первый символ × 16 + второй символ»:

34 → 3×16 + 4 = 52
98 → 9×16 + 8 = 152
DB → 13×16 + 11 = 219

Итог: #3498DB = rgb(52, 152, 219) — приятный «небесно-синий». Обратный перевод из RGB в HEX: каждое число делим на 16 (целая часть — первый символ, остаток — второй). 52 = 3 остаток 4 → 34. Если число меньше 16, слева дописывается ноль, например 5 → 05.

Прозрачность: RGBA и 8-значный HEX

Чтобы цвет стал полупрозрачным, добавляют альфа-канал (alpha) — степень непрозрачности от 0 (полностью прозрачный) до 1 (полностью непрозрачный). В RGB это делается через RGBA: rgba(52, 152, 219, 0.5) — тот же синий, но видимый на 50%. Это незаменимо для теней, оверлеев и подложек под текст.

У HEX тоже есть версия с прозрачностью — 8 символов #RRGGBBAA, где последняя пара кодирует альфу от 00 до FF. Например, #3498DB80 примерно равно 50% прозрачности (80 в 16-ричной ≈ 128 из 255). Современные браузеры понимают этот формат, но для читаемости многие верстальщики предпочитают RGBA.

HSL: когда удобнее он

HSL (Hue, Saturation, Lightness — тон, насыщенность, светлота) описывает цвет ближе к человеческой логике. Hue — угол на цветовом круге от 0 до 360° (0 — красный, 120 — зелёный, 240 — синий). Saturation — насыщенность в процентах, Lightness — светлота в процентах. Наш #3498DB в HSL — примерно hsl(204, 70%, 53%).

Главное преимущество HSL — им удобно строить палитры: чтобы получить светлее или темнее оттенок, достаточно менять только Lightness, не трогая тон. Для генерации градиентов, состояний кнопок (hover, active) и тем оформления это гораздо нагляднее, чем подбирать HEX наугад.

Что и где применять на практике

HEX — стандарт де-факто в макетах и дизайн-системах: компактно и привычно. RGB и особенно RGBA нужны, когда требуется прозрачность. HSL берут для программной генерации цветов и тонкой настройки палитр. Все три формата валидны в CSS, и браузер отрисует их одинаково — выбирайте тот, что удобнее для конкретной задачи. Для разовой конвертации проще всего воспользоваться онлайн-конвертером, чтобы не считать 16-ричные пары в уме.

Частые вопросы

Чем HEX отличается от RGB?
Ничем по сути — это две формы записи одного цвета. HEX использует шестнадцатеричную запись #RRGGBB, а RGB — три десятичных числа от 0 до 255. Одна пара HEX (00–FF) в точности равна одному числу RGB (0–255).

Как перевести HEX в RGB вручную?
Разбейте код на три пары символов (RR, GG, BB) и переведите каждую из 16-ричной системы в десятичную по формуле «первый символ × 16 + второй символ». Например, #3498DB → 52, 152, 219.

Как добавить прозрачность к цвету?
Используйте альфа-канал: в формате RGBA — четвёртое значение от 0 до 1, например rgba(52,152,219,0.5). В HEX — восьмизначная запись #RRGGBBAA, где последняя пара задаёт непрозрачность от 00 до FF.

Что лучше использовать в CSS — HEX, RGB или HSL?
Все три работают одинаково. HEX компактен и удобен для макетов, RGBA нужен для прозрачности, HSL удобнее для генерации палитр и подбора оттенков, так как позволяет менять только светлоту или насыщенность.

Обновлено: 9 июля 2026 г. Редакция MegaInet.art.