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

HEX и RGB: два способа записать один и тот же цвет

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

Как читать HEX-код

HEX-цвет выглядит как #1E90FF. Символ решётки просто обозначает начало; шесть символов после него — три пары, записанные по шаблону #RRGGBB. Первая пара — красный, вторая — зелёный, третья — синий. Каждая пара — число в шестнадцатеричной системе, то есть по основанию 16, где цифры идут от 0 до 9, а буквы A, B, C, D, E, F означают числа от 10 до 15. Одна пара может принимать значения от 00 (канал полностью выключен) до FF (полностью включён). В обычной десятичной записи этот диапазон — от 0 до 255, та же шкала, что и в RGB. При 256 возможных уровнях на канал шестизначная форма описывает 16 777 216 различных цветов.

Конвертация в обе стороны с разбором примера

Чтобы перевести из HEX в RGB, разбейте код на три пары и переведите каждую из шестнадцатеричной в обычную десятичную систему. Возьмём #1E90FF. Пара красного — 1E: это 1, умноженное на 16, плюс 14 (E), итого 30. Пара зелёного 90 — это 9, умноженное на 16, плюс 0, итого 144. Пара синего FF — это 15, умноженное на 16, плюс 15, итого 255. Таким образом, #1E90FF превращается в rgb(30, 144, 255) — знакомый ярко-синий цвет.

Обратный путь — та же процедура в зеркальном порядке. Берёте каждое число RGB и записываете его двумя шестнадцатеричными цифрами. Чистый красный, rgb(255, 0, 0), даёт FF, 00 и 00, которые объединяются в #FF0000. Важно помнить: если значение меньше 16, всё равно нужны обе цифры, то есть 5 записывается как 05, а не просто 5. Конвертер делает это дополнение автоматически, но при ручной записи здесь часто ошибаются.

Где применяется каждый формат

HEX — повседневный язык веба. CSS, HTML и большинство кода, который вы пишете, обращаются к HEX-кодам: они компактны и легко копируются. RGB чаще встречается в дизайнерских и графических приложениях — Figma, Photoshop, Sketch и Illustrator обычно отображают слайдеры или поля в диапазоне 0–255, и видеоприложения тоже нередко ожидают RGB. Поэтому нередко приходится брать HEX-код из таблицы стилей и переводить его в RGB для ввода в дизайнерскую панель, или наоборот. Именно для этого и нужен конвертер. Если требуется создать целый набор согласованных оттенков, а не перевести один, лучшей отправной точкой станет наш генератор цветовых палитр, а другие похожие утилиты найдёте в разделе инструментов разработчика.

Альфа-канал, прозрачность и HSL

У обоих форматов есть расширенная форма с поддержкой прозрачности. RGB становится rgba(30, 144, 255, 0.5), где четвёртое значение — альфа: 0 означает полную прозрачность, 1 — полную непрозрачность. HEX добавляет четвёртую пару для той же цели, давая восьмизначный код #RRGGBBAA; значение 80, например, соответствует примерно 50% непрозрачности. В некоторых конвертерах также есть HSL (цветовой тон, насыщенность, яркость), описывающий цвет так, как это делает человек: выбрать оттенок на цветовом колесе, а затем настроить яркость и насыщенность. HSL — другая ментальная модель, а не другая палитра, поэтому он удобнее, когда нужно сделать цвет светлее или приглушённее, не жонглируя тремя отдельными числами.

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