Конвертер цвета из HEX в RGB

Введите расчет

HEX-код цвета Введите 3- или 6-значный HEX-код, с символом # в начале или без него.

Результатов

Цвет в RGB

rgb(52, 152, 219)

from #3498DB

Красный (R)	52
Зелёный (G)	152
Синий (B)	219
Нормализованный HEX	#3498DB
CSS	rgb(52, 152, 219)

Что такое конвертер HEX в RGB?

HEX-код — это шестизначная запись цвета в шестнадцатеричном формате, например #RRGGBB. Каждая пара символов отвечает за один из трёх каналов аддитивной модели: красный, зелёный и синий. Этот конвертер считывает HEX-код и выдаёт соответствующую тройку RGB, где значение каждого канала — это целое число от 0 до 255. Именно в формате RGB «под капотом» работают CSS, графические редакторы и большинство экранов, поэтому перевод между HEX и RGB — повседневная задача для веб-разработчиков и дизайнеров.

Как пользоваться

Введите HEX-код в поле — с символом # в начале или без него. Принимаются как полная шестизначная форма (#3498DB), так и сокращённая трёхзначная (#39C, которая разворачивается в #3399CC). Инструмент уберёт лишние символы, приведёт код к стандартному виду и сразу покажет значения красного, зелёного и синего, образец цвета и готовую к вставке строку CSS.

Как работает формула

Шестнадцатеричная система — это система с основанием 16, в которой используются цифры 0–9 и буквы A–F (где A=10 … F=15). Пара символов переводится по правилу значение = первый символ × 16 + второй символ. Так, FF = 15 × 16 + 15 = 255 — это максимум, а 00 = 0 — минимум. Три пары декодируются независимо друг от друга в каналы R, G и B.

$$(R,\,G,\,B) = \bigl(\,\text{hex}_{[1,2]},\ \text{hex}_{[3,4]},\ \text{hex}_{[5,6]}\,\bigr)_{16}$$ $$\text{where}\quad \left\{ \begin{aligned} R &= \left(\text{Hex Code}\ \text{digits 1-2}\right)_{16} \\ G &= \left(\text{Hex Code}\ \text{digits 3-4}\right)_{16} \\ B &= \left(\text{Hex Code}\ \text{digits 5-6}\right)_{16} \end{aligned} \right.$$

Hex-код делится на три пары, каждая из которых преобразуется в значение канала от 0 до 255.

Разбор примера

Возьмём #3498DB. Пара красного — 34 = \(3 \times 16 + 4 = \mathbf{52}\). Пара зелёного — 98 = \(9 \times 16 + 8 = \mathbf{152}\). Пара синего — DB = \(13 \times 16 + 11 = \mathbf{219}\). В итоге получаем rgb(52, 152, 219) — популярный синий цвет в стиле флэт-дизайна.

Наглядный пример: один hex-код показан как образец рядом с его каналами R, G, B.

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

Принимает ли он сокращённый HEX вроде #FFF? Да. Трёхзначный код разворачивается удвоением каждого символа, поэтому #FFF превращается в #FFFFFF = rgb(255, 255, 255).

А как насчёт альфа-канала (прозрачности)? Этот инструмент работает с трёхканальным цветом RGB. У восьмизначного HEX-кода с альфа-каналом для перевода берутся только первые шесть символов.

Как перевести RGB обратно в HEX? Запишите значение каждого канала как двузначное шестнадцатеричное число и соедините их после символа #. Например, 52, 152, 219 → 34, 98, DB → #3498DB.