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

Что такое HEX-код и как он устроен

HEX-код — это способ записи цвета с использованием шестнадцатеричной (base‑16) системы счисления. Каждый канал (красный, зелёный, синий) кодируется двумя шестнадцатеричными цифрами, которые вместе образуют 256 возможных значений от 00 до FF. В десятичной системе этим значениям соответствуют числа от 0 до 255 — именно их и выдаёт RGB.

Стандартный шестизначный HEX‑код выглядит как #RRGGBB. Например, #4f46e5 означает:

• красный: 4f (шестнадцатеричное) → 4×16 + 15 = 79;
• зелёный: 46 → 4×16 + 6 = 70;
• синий: e5 → 14×16 + 5 = 229.

Помимо полной записи существует трёхзначная сокращённая форма: #RGB. Каждая цифра в ней удваивается: #abc превращается в #aabbcc. Такой вариант применяется, когда точность 12 бит (4096 цветов) достаточна, но чаще всего встречается в старом CSS или при ручном подборе оттенков.

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

Как работает преобразование HEX в RGB на этой странице

Инструмент принимает HEX‑код в одном из двух форматов:

• Шестизначный с решёткой или без неё: #4f46e5 или 4f46e5.
• Трёхзначный (тоже с # или без): #abc, abc.

Ввод обрабатывается по следующим правилам:

1. Если код введён без #, префикс автоматически добавляется для внутренних расчётов, но на отображение это не влияет.
2. Трёхзначный код немедленно расширяется до шестизначного повторением каждой цифры: #abc → #aabbcc.
3. Разрешены только строчные или прописные буквы A‑F — смешение регистров допускается.
4. Любой другой формат (восьмизначный HEX с альфа-каналом, четырёхзначный код, недопустимые символы) вызывает сообщение об ошибке:
   «Enter a hex color like #4f46e5 or #abc.»

После проверки инструмент выполняет строго математическое преобразование: каждая пара шестнадцатеричных цифр умножается на степени 16 и даёт целое число от 0 до 255. Никакого округления, сжатия или гамма‑коррекции не применяется — результат абсолютно точен и обратим обратно в HEX.

Помимо RGB, страница одновременно вычисляет HSL, HSV, CMYK и LAB. Все поля редактируемы: изменение любого из них пересчитывает остальные. Это позволяет не только перевести HEX в RGB, но и увидеть цвет в других системах, не покидая страницу.

Почему HEX и RGB — одно и то же, но в разных системах счисления

С точки зрения физики монитора цвет — это три числа: интенсивность красного, зелёного и синего света. Каждое число занимает 8 бит, поэтому RGB‑триплет укладывается в 24 бита. HEX‑код — это та же самая 24‑битная запись, только представленная в шестнадцатеричной системе.

Например, чистый красный цвет:

• в RGB: (255, 0, 0)
• в HEX: #FF0000

Оба варианта абсолютно эквивалентны. Преимущество HEX в том, что шесть символов короче, чем запись rgb(255,0,0), и исторически использовались в HTML и CSS из‑за экономии места. Сегодня оба формата поддерживаются всеми современными браузерами, но в некоторых ситуациях RGB удобнее:

• Canvas API и WebGL — часто ожидают массив чисел ``.
• JavaScript‑манипуляции — проще прибавить 20 к красному каналу, изменив число, чем разбирать строку #RRGGBB.
• Альфа-канал — в современном CSS можно использовать rgb(255 0 0 / 0.5), тогда как HEX с альфа (#RRGGBBAA) до сих пор поддерживается не во всех старых браузерах.

Именно поэтому инструмент перевода HEX → RGB остаётся востребованным: он даёт численное представление цвета, необходимое для точных расчётов и работы с API.

Правила и граничные случаи

Инструмент спроектирован для работы только с чистыми RGB‑цветами без прозрачности. Это означает:

• Не принимаются восьмизначные HEX‑коды (например, #4f46e580 с альфа-каналом). Если ввести такой код, появится ошибка, так как страница ожидает ровно 6 или 3 символа (без учёта #).
• Допустимы только символы 0‑9, A‑F (a‑f) и знак # в начале. Любая посторонняя буква, пробел или знак препинания вызовут сообщение об ошибке.
• Регистр букв не имеет значения: #FF6600, #ff6600 и #Ff6600 обрабатываются одинаково.
• Трёхзначный код расширяется независимо от наличия #. Например, F0A превратится в #FF00AA, а #fed — в #ffeedd.

Все вычисления выполняются на стороне клиента в браузере. Ни один введённый цвет не покидает ваш компьютер, не сохраняется и не анализируется.

Кому пригодится этот инструмент

• Фронтенд-разработчики, которым нужно вставить HEX‑код из макета в CSS, а потом манипулировать цветом в JavaScript: например, затемнить фон или вычислить контрастный текст. Для таких операций удобнее иметь RGB‑числа, а не строку #rrggbb.
• Дизайнеры, работающие в Figma, Sketch или Adobe XD. Часто брендбук даёт цвета в HEX, а интерфейс программы просит ввести RGB‑слайдеры. Прямой перевод экономит время.
• Разработчики игр и графических приложений, где цвета задаются массивами чисел {r, g, b} или Uint8Array из трёх байтов. Перевод из HEX в RGB нужен для записи текстур, спрайтов и эффектов.
• Студенты, изучающие веб-технологии или цветоведение. Понимание того, как число FF (255) влияет на яркость, помогает быстрее осваивать аддитивную модель RGB.

Примеры популярных HEX‑цветов и их RGB‑эквиваленты

Обратите внимание на серый цвет: он получается, когда все три канала равны. Если все три числа одинаковы, цвет — оттенок серого от чёрного (0,0,0) до белого (255,255,255). Это свойство часто используют для создания монохромных палитр и расчёта яркости.

Часто задаваемые вопросы

Можно ли ввести HEX без символа решётки?
Да. Инструмент принимает коды как с #, так и без него. Например, 4f46e5 и #4f46e5 дадут одинаковый результат.

Что произойдёт, если ввести восьмизначный HEX с альфа-каналом?
Страница выдаст ошибку: «Enter a hex color like #4f46e5 or #abc.» Она работает только с шестизначными и трёхзначными кодами, без прозрачности.

Как из трёхзначного HEX #abc получается RGB?
Каждая цифра удваивается: #aabbcc. Затем каждая пара преобразуется из шестнадцатеричной в десятичную. Например, #abc → #aabbcc → красный aa = 170, зелёный bb = 187, синий cc = 204.

Влияет ли регистр букв на результат?
Нет. #FF0000 и #ff0000 идентичны — инструмент переводит обе записи в один RGB‑триплет (255,0,0).

Почему инструмент не показывает альфа-канал, если я ввёл #RRGGBBAA?
Потому что он специально заточен под преобразование без прозрачности. Для работы с RGBA нужно использовать отдельную страницу, принимающую восьмизначные коды.

Можно ли скопировать RGB‑значение одним кликом?
Да, все цветовые поля на странице кликабельны — нажатие копирует их содержимое в буфер обмена. Это ускоряет перенос чисел в код или дизайнерское ПО.