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

Мгновенно преобразуйте цветовые коды HEX в значения RGB. Этот инструмент полезен для веб-разработки, UI-дизайна, систем темизации и любых задач, где требуется быстрое и точное преобразование цветов.

Введите значение в формате HEX или RGB, и конвертер обновится автоматически. Он работает в обоих направлениях, поэтому вы можете редактировать любое поле и сразу получать корректный результат.

Вы также можете выбрать цвет с помощью встроенного color picker — поля HEX и RGB будут обновляться автоматически при выборе оттенка.

Что такое цвет HEX

Цвет HEX — это шестизначное значение, записанное в шестнадцатеричной системе счисления (основание 16) в формате #RRGGBB. Каждая пара символов (RR, GG, BB) обозначает интенсивность красного, зелёного и синего каналов в диапазоне от 00 (нет интенсивности) до FF (максимальная интенсивность).

На практике HEX — это просто другой способ записи значений RGB. Браузер читает строку HEX, делит её на три компонента и преобразует каждый из них из шестнадцатеричного значения в десятичное, получая rgb(r, g, b). Благодаря этому HEX является компактным и удобным для разработчиков форматом, широко используемым в CSS, дизайн-инструментах и фронтенд-разработке.

Например, #FF8800 задаёт цвет, в котором красный канал имеет максимальное значение (FF), зелёный — среднее (88), а синий равен нулю (00). Такое прямое соответствие делает HEX одним из самых понятных и надёжных форматов для задания цветов в вебе.

Что такое цвет RGB

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

При объединении этих трёх значений получается полный спектр цветов, отображаемых на экранах. Например, rgb(255, 0, 0) — это чистый красный, rgb(0, 255, 0) — чистый зелёный, а rgb(0, 0, 255) — чистый синий.

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

Формула преобразования HEX в RGB

#RRGGBB → rgb(r, g, b)

r = hex_to_dec(RR)
g = hex_to_dec(GG)
b = hex_to_dec(BB)

// Вспомогательная функция:
hex_to_dec(AB) = (значение(A) * 16) + значение(B)

Ниже приведена точная формула, используемая для ручного преобразования цвета HEX в его RGB-компоненты. Каждый двухсимвольный сегмент (RR, GG, BB) обрабатывается с помощью простой функции перевода из шестнадцатеричного значения в десятичное.

// Пример для #4FA3C2
RR = "4F" → hex_to_dec(4F) = (4 * 16) + 15 = 79
GG = "A3" → hex_to_dec(A3) = (10 * 16) + 3 = 163
BB = "C2" → hex_to_dec(C2) = (12 * 16) + 2 = 194

rgb(79, 163, 194)

Если вам нужно освежить знания о шестнадцатеричных значениях (0–F) или принципах систем счисления, посмотрите руководство по системам счисления.

Как работает преобразование HEX в RGB (пошагово)

Цвета HEX состоят из шести символов, разделённых на три пары. Каждая пара обозначает интенсивность красного, зелёного или синего канала. Чтобы преобразовать HEX в RGB, нужно разделить значение на эти пары и перевести каждую из них из системы счисления с основанием 16 в систему с основанием 10.

#1A2B3C
 ↓   ↓   ↓
[1A, 2B, 3C] -> rgb(26, 43, 60)

Ниже показан полный разбор для цвета #1A2B3C:

  • Шаг 1 — разделите значение HEX:
    [1A] [2B] [3C]
  • Шаг 2 — преобразуйте каждую пару из HEX в десятичное число:

    Каждая пара — это число в системе счисления с основанием 16. Чтобы получить десятичное значение, умножьте первый символ на 16 и прибавьте значение второго символа. Символы A–F соответствуют числам от 10 до 15.

    1A = (1 * 16) + 10 = 26
2B = (2 * 16) + 11 = 43
3C = (3 * 16) + 12 = 60

    (A = 10, B = 11, C = 12)

  • Шаг 3 — объедините результаты в RGB-цвет:
    rgb(26, 43, 60)

Этот метод работает для любого цвета HEX: разделите значение, преобразуйте каждую пару и объедините результат в RGB-триплет.

Когда использовать HEX, а когда RGB

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

Когда использовать HEX

  • Компактность и читаемость: Значения HEX короткие и легко читаются, поэтому удобны для дизайн-систем и гайдлайнов.
  • Подходит для однотонных цветов: Лучший вариант для статичных UI-цветов, где не требуется прозрачность.
  • Популярен в дизайн-инструментах: Большинство дизайн-программ используют HEX по умолчанию, что упрощает согласованность между макетами и кодом.
  • Удобно копировать и передавать: HEX-значения служат компактными идентификаторами цветов при работе между разными инструментами и платформами.

Когда использовать RGB

  • Больше контроля над каналами: RGB явно показывает значения красного, зелёного и синего каналов, что удобно для динамического управления цветами в JavaScript или CSS.
  • Необходим для градиентов и сложных эффектов: Многие возможности CSS (например, rgb() и rgba()) естественно работают с числовыми значениями каналов.
  • Поддержка прозрачности: RGB можно расширить до RGBA и получить точный контроль над прозрачностью, чего нельзя добиться в обычном HEX без использования 8-символьного формата.
  • Удобен для анимаций: Числовые значения каналов проще интерполировать в анимациях и переходах.

Итог

Используйте HEX, когда нужны чистые, короткие и читаемые коды для статичных элементов интерфейса. Выбирайте RGB/RGBA, если требуется прозрачность, динамическое управление цветами или точный контроль каналов. Оба формата описывают одно и то же цветовое пространство — выбор зависит от того, как именно вы используете цвет в CSS или JavaScript.

Рекомендации по работе с цветами в CSS

CSS поддерживает несколько цветовых форматов, и каждый из них имеет свои практические преимущества. Ниже приведены рекомендации по эффективному использованию этих форматов.

Выбор подходящего цветового формата

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

Используйте сокращённый HEX, когда это возможно

  • #FFF вместо #FFFFFF: применяйте трёхсимвольную запись, если все пары каналов одинаковы. Это делает стили более компактными.

Когда использовать HEX8

  • #RRGGBBAA: позволяет задавать прозрачность в формате HEX. Подходит, если вы используете HEX-палитру, но вам нужен альфа-канал.
  • Допустим только полный 8-символьный формат. Избегайте смешивания HEX и RGBA в одной системе токенов без необходимости.

Распространённые ошибки

  • Непоследовательное смешивание форматов: придерживайтесь одного формата в рамках дизайн-системы для упрощения поддержки.
  • Использование HEX для динамических эффектов: анимации и переходы лучше работают с rgb(), rgba() или hsl().
  • Неверное использование сокращённого HEX: применяйте формат из 3 символов только если каждая пара каналов идентична.
  • Использование HEX при необходимости прозрачности: для прозрачности используйте RGBA или HSL с альфа-каналом.
  • Чрезмерное использование чисто чёрного (#000) для теней: лучше применять полупрозрачные значения RGBA или HSL для более мягкого результата.

Следование этим рекомендациям обеспечивает предсказуемое отображение цветов, более чистый код и стабильные результаты во всех компонентах и состояниях интерфейса.

Таблица преобразования HEX в RGB

В таблице ниже приведены часто используемые цвета HEX и их эквиваленты в RGB. Она включает популярные UI-цвета, градации серого и базовые RGB-варианты, которые часто применяются в веб-дизайне и разработке.

Справочная таблица HEX → RGB
ОписаниеHEXRGB
Белый#FFFFFFrgb(255, 255, 255)
Чёрный#000000rgb(0, 0, 0)
Красный#FF0000rgb(255, 0, 0)
Зелёный#00FF00rgb(0, 255, 0)
Синий#0000FFrgb(0, 0, 255)
Жёлтый#FFFF00rgb(255, 255, 0)
Циан#00FFFFrgb(0, 255, 255)
Маджента#FF00FFrgb(255, 0, 255)
Серый 1#111111rgb(17, 17, 17)
Серый 2#333333rgb(51, 51, 51)
Серый 3#555555rgb(85, 85, 85)
Серый 4#777777rgb(119, 119, 119)
Серый 5#999999rgb(153, 153, 153)
Серый 6#CCCCCCrgb(204, 204, 204)
Светло-серый#F0F0F0rgb(240, 240, 240)
UI-серый#E0E0E0rgb(224, 224, 224)
Тёмный UI-серый#1A1A1Argb(26, 26, 26)
Тёмно-красный#800000rgb(128, 0, 0)
Тёмно-зелёный#008000rgb(0, 128, 0)
Тёмно-синий#000080rgb(0, 0, 128)
Оранжевый#FFA500rgb(255, 165, 0)
Фиолетовый#800080rgb(128, 0, 128)
Бирюзовый#008080rgb(0, 128, 128)

В таблице представлены наиболее распространённые значения, но конвертер на этой странице может вычислить точные RGB-значения для любого корректного HEX-кода.

FAQ: HEX в RGB

  • Что означают значения HEX, такие как FF, 00 или AA?

    Это шестнадцатеричные числа. Каждая пара находится в диапазоне от 00 (0) до FF (255) и обозначает интенсивность цветового канала.

  • Почему в RGB используются значения от 0 до 255?

    RGB основан на 8-битных каналах. 8 бит дают 256 возможных значений, что соответствует диапазону 0–255, используемому в цифровых цветовых системах.

  • Поддерживает ли HEX прозрачность?

    Обычный HEX (#RRGGBB) не включает прозрачность. Она поддерживается в формате HEX8 (#RRGGBBAA), также известном как HEXA. Последние два символа (AA) задают альфа-канал.

  • В чём разница между HEX и HEX8 / HEXA?

    HEX содержит только красный, зелёный и синий каналы. HEX8 (или HEXA) добавляет альфа-канал для задания прозрачности и использует формат #RRGGBBAA. Значение альфа-канала находится в диапазоне от 00 (полностью прозрачно) до FF (полностью непрозрачно).

  • В чём разница между #RGB и #RRGGBB?

    #RGB — это сокращённая версия #RRGGBB. Каждый символ дублируется. Например:
    #F0A → #FF00AA.

Связанные конвертеры:

Смотреть все конвертеры цветов