Цвета RGB: как устроены коды, таблица основных цветов и перевод в HEX

RGB записывает цвет тремя числами: сколько красного (Red), зелёного (Green) и синего (Blue) света даёт точка на экране. Каждое число лежит в диапазоне от 0 до 255. Так, rgb(255, 255, 255) означает белый, rgb(0, 0, 0) чёрный, а rgb(255, 0, 0) чистый красный.

Тот же цвет в HEX выглядит как #FFFFFF. Это те же три числа, только в шестнадцатеричной системе. Ниже таблица кодов основных цветов, перевод RGB в HEX вручную и кодом, запись в CSS и способы узнать код любого цвета на экране. Если нужна теория про палитры и сочетания, она в разборе цвета в дизайне.

CheckroiПодборка курсов по CSS181 курс • 37 школСравните цены, школы, программу и найдите выгодные предложения по обучениюСравнить→

Как устроена модель: три канала от 0 до 255

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

Диапазон 0–255 взят не с потолка. На каждый канал отводится один байт, то есть 8 бит, а 8 бит вмещают 256 значений. Три канала занимают 24 бита, отсюда 256 × 256 × 256 = 16 777 216 оттенков. Почему бывает 30 и 48 бит на пиксель и что это меняет, разобрано в статье про глубину цвета.

С красками на палитре смешение работает иначе. Жёлтого канала в RGB нет, жёлтый получается сложением двух других:

• красный + зелёный = жёлтый, rgb(255, 255, 0);
• зелёный + синий = голубой, rgb(0, 255, 255);
• красный + синий = пурпурный, rgb(255, 0, 255);
• все три на максимуме = белый, rgb(255, 255, 255).

Поэтому каналов три. Школьная схема «красный, жёлтый, синий» описывает краски, которые свет поглощают. Экран свет излучает, и жёлтый ему проще собрать из красного и зелёного.

Таблица кодов основных цветов

Коды ниже совпадают с именованными цветами из спецификации CSS Color Module Level 4. Имя из последнего столбца можно писать в CSS вместо кода.

Обратите внимание на зелёный. Слово green в CSS даёт 0, 128, 0, приглушённый тон. Чистый зелёный канал на максимуме называется lime.

Серые тона узнаются сразу: у них все три числа равны. Код 204, 204, 204 (#CCCCCC) даёт светло-серый, 64, 64, 64 даёт тёмно-серый. Чем ближе числа к 255, тем светлее серый.

Что такое HEX-код и чем он отличается от RGB

HEX записывает ту же тройку чисел в шестнадцатеричной системе: цифры 0–9 и буквы A–F. Число 255 в ней выглядит как FF, ноль как 00. Код читается парами: #RRGGBB, где первая пара отвечает за красный, вторая за зелёный, третья за синий. Как устроены системы счисления и как переводить между ними, есть в разборе систем счисления в Python.

По спецификации CSS у HEX-кода бывает 3, 4, 6 или 8 цифр. Регистр букв не важен, #00ff00 и #00FF00 означают один цвет.

• 6 цифр: обычная запись, #FF0000.
• 3 цифры: сокращение, каждая цифра удваивается: #FC0 = #FFCC00.
• 8 цифр: последняя пара задаёт прозрачность, 00 полностью прозрачный, FF непрозрачный. Например, #0000FFCC даёт синий с непрозрачностью 80 %.
• 4 цифры: короткий вариант восьмизначной записи.

По сути разницы в цвете нет: #2563EB и rgb(37, 99, 235) дают один и тот же пиксель. Выбор зависит от того, где вы работаете с кодом. В вёрстке цвета чаще всего пишут прямо в стилях, и с этого начинаются курсы по CSS.

Сколько памяти занимает цвет: задачи по информатике

В школьных задачах модель RGB встречается в теме кодирования графики. Логика та же, что выше: цвет пикселя хранится как три числа, по байту на канал. Такую кодировку называют 24-битной, или True Color.

Отсюда считается объём несжатого изображения. Формула простая: ширина × высота × байты на пиксель.

Файлы JPG и PNG на диске весят меньше, потому что сжаты. В таблице объём без сжатия, именно его и просят найти в задачах по информатике.

Обратная задача тоже частая: сколько цветов даёт N бит на пиксель. Ответ: 2 в степени N. Восемь бит дают 256 цветов, 16 бит дают 65 536, а 24 бита те же 16 777 216.

Как перевести RGB в HEX и обратно

Вручную

Разберём цвет rgb(37, 99, 235). Каждое число переводится отдельно:

1. Разделите число на 16 с остатком. 37 = 2 × 16 + 5.
2. Частное и остаток запишите шестнадцатеричными цифрами: 2 и 5 дают 25.
3. Повторите для второго канала: 99 = 6 × 16 + 3, получается 63.
4. Для третьего: 235 = 14 × 16 + 11. Цифре 14 соответствует E, цифре 11 соответствует B, итог EB.
5. Склейте пары после решётки: #2563EB.

Обратно переводят умножением. Код #2E8B57 читается так: 2E = 2 × 16 + 14 = 46, 8B = 8 × 16 + 11 = 139, 57 = 5 × 16 + 7 = 87. Получаем rgb(46, 139, 87).

Кодом на Python

Формат {:02X} печатает число двумя шестнадцатеричными цифрами с ведущим нулём, а int(…, 16) читает их обратно:

def rgb_to_hex(r, g, b):
    return '#{:02X}{:02X}{:02X}'.format(r, g, b)

def hex_to_rgb(code):
    code = code.lstrip('#')
    if len(code) == 3:
        code = ''.join(ch * 2 for ch in code)
    return tuple(int(code[i:i + 2], 16) for i in (0, 2, 4))

print(rgb_to_hex(37, 99, 235))
print(hex_to_rgb('#2E8B57'))
print(hex_to_rgb('#FC0'))

# Вывод:
# #2563EB
# (46, 139, 87)
# (255, 204, 0)

Кодом на JavaScript

const toHex = (r, g, b) =>
  '#' + [r, g, b].map(v => v.toString(16).padStart(2, '0')).join('').toUpperCase();

const toRgb = code => {
  const n = parseInt(code.slice(1), 16);
  return [(n >> 16) & 255, (n >> 8) & 255, n & 255];
};

console.log(toHex(37, 99, 235)); // #2563EB
console.log(toRgb('#2E8B57'));   // [ 46, 139, 87 ]

Без кода быстрее всего браузер. В инструментах разработчика Chrome щелчок по квадратику цвета с зажатым Shift открывает список форматов, и DevTools пересчитывает значение сам.

Как записать цвет в CSS

В стилях работают все варианты ниже. Куда писать эти строки, разобрано в статьях что такое CSS и как подключить CSS к HTML.

.title {
  color: rgb(255 0 0);              /* современная запись через пробел */
  color: rgb(255, 0, 0);            /* классическая через запятую */
  color: rgb(100% 0% 0%);           /* то же в процентах */
  color: #FF0000;                   /* HEX */
}

.overlay {
  background: rgb(0 0 255 / 50%);   /* синий, прозрачность 50 % */
  background: rgba(0, 0, 255, 0.5); /* то же старой функцией */
  background: #0000FF80;            /* то же в HEX */
}

По справочнику MDN, функция rgba() стала синонимом rgb(): записи полностью равнозначны, прозрачность принимают обе. Сам справочник рекомендует писать rgb().

Ещё одна деталь. rgb() в CSS всегда описывает цвет в пространстве sRGB. Экраны с широким охватом умеют показывать более насыщенные оттенки, но записывают их другой функцией, например color(display-p3 1 0 0). Для обычного сайта хватает sRGB.

Канал основателя Checkroi Вани БуявцаЗабирайте промпты и обучение по нейросетям в моём Телеграм-каналеБольше 3 700 человек уже применяют Claude Code, ChatGPT и другие нейросети в работе, учёбе, бизнесе и жизниПерейти в канал→

Как узнать код цвета на экране

Пипетка есть почти в любой программе, которая работает с цветом. Вот где она лежит:

• Браузер Chrome. Откройте DevTools, щёлкните по квадратику цвета в стилях элемента и нажмите клавишу C. Пипетка снимает цвет и со страницы, и с любого места экрана.
• Windows. Утилита Color Picker из PowerToys вызывается сочетанием Win + Shift + C и копирует цвет в буфер. По умолчанию в формате HEX; чтобы копировался RGB, смените формат цвета по умолчанию в настройках утилиты.
• macOS. Встроенное приложение «Цифровой колориметр» показывает значения под указателем, а Shift + Command + C копирует их текстом.
• Figma и Photoshop. Пипетка в палитре цвета, код виден рядом с образцом. Как перекрашивать объекты после выбора цвета, показано в инструкции про замену цвета в Фотошопе.

В «Цифровом колориметре» проверьте цветовое пространство в выпадающем меню. Значения показываются для выбранного пространства, поэтому один и тот же пиксель в sRGB и в профиле дисплея даст разные числа. Для веба нужен sRGB.

Частые ошибки с кодами цветов

Ждали ярко-зелёный, получили тёмный. Причина в имени green, оно равно 0, 128, 0. Решение: пишите lime или код #00FF00.

Считают 16 581 375 цветов. Это 255³, ноль при таком счёте выпадает. Значений на канал 256, отсюда 16 777 216.

Браузер не видит HEX-код. Чаще всего забыта решётка или цифр пять. Допустимая длина: 3, 4, 6 или 8 символов после #.

Пипетка дала «грязный» цвет. Если в области захвата несколько пикселей, колориметр macOS усредняет их, а сжатая картинка добавляет промежуточные оттенки на границах. Уменьшите размер апертуры и берите цвет из середины заливки, а не с края.

Цвет из RGB поехал в печати. Типография печатает в CMYK, и часть ярких экранных оттенков краской не воспроизводится. Подбор палитры под сайт описан в материале о цветах для сайта.

Где освоить CSS и работу с цветом системно

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

Ниже подборка курсов по CSS из нашего каталога. Если интересна визуальная часть, загляните в раздел курсов веб-дизайна.

Курс	Школа	Стоимость со скидкой	В рассрочку	Длитель­ность	Обзор курса от Checkroi
HTML и CSS с нуля Перейти на сайт курса	Skillbox	91 626 ₽	7635 ₽/мес.	11 месяцев	Обзор курса
HTML и CSS. Адаптивная вёрстка и автоматизация Перейти на сайт курса	HTML Academy	23 400 ₽	3900 ₽/мес.	2 месяца	Обзор курса
Основы вёрстки HTML и CSS Перейти на сайт курса	Академия Синергия	32 676 ₽	2723 ₽/мес.	3 месяца	Обзор курса
HTML и CSS с нуля	Skypro	195 160 ₽	7972 ₽/мес.	12 месяцев	Обзор курса
Онлайн-курс Вёрстка на HTML и CSS Перейти на сайт курса	Бруноям	29 900 ₽	2491 ₽/мес.	3 месяца	Обзор курса

• 

  HTML и CSS с нуля

  Skillbox91 626 ₽7635 ₽/мес11 месяцев
  Перейти на сайт курсаОбзор
• 

  HTML и CSS. Адаптивная вёрстка и автоматизация

  HTML Academy23 400 ₽3900 ₽/мес2 месяца
  Перейти на сайт курсаОбзор
• 

  Основы вёрстки HTML и CSS

  Академия Синергия32 676 ₽2723 ₽/мес3 месяца
  Перейти на сайт курсаОбзор
• 

  HTML и CSS с нуля

  Skypro195 160 ₽7972 ₽/мес12 месяцев
  Обзор
• 

  Онлайн-курс Вёрстка на HTML и CSS

  Бруноям29 900 ₽2491 ₽/мес3 месяца
  Перейти на сайт курсаОбзор

Больше программ — в полном каталоге курсов по CSS