RGB даёт три десятичных канала от 0 до 255. Конвертация в HEX превращает каждый канал в двузначное шестнадцатеричное число, так что весь цвет помещается в один компактный токен, понятный любому браузеру, инструменту дизайна и гайду по стилю.
Как работает конвертация RGB в HEX
- Возьми красный канал и раздели его на 16: частное — первая цифра, остаток — вторая.
- Запиши цифры 10–15 буквами A–F — 255 становится FF.
- Повтори для зелёного и синего, дополняя одиночные цифры ведущим нулём: 5 становится 05.
- Объедини три пары и поставь # спереди.
Рабочий пример
Точно, если каналы — целые числа от 0 до 255. Дробные значения вроде rgb(79.5, 70, 229) сначала округляются до ближайшего целого, потому что HEX не хранит промежуточные значения.
RGB и HEX объяснено
Что такое RGB?
RGB описывает цвет как три световых канала — red, green и blue — каждый от 0 до 255. Это отражает работу экранов: все три на 255 дают белый, все на 0 — чёрный. RGB подходит, когда нужно вычислять с цветом, а rgba() добавляет прозрачность.
- Синтаксис:
- rgb(R, G, B)
- Диапазон:
- 0–255 на канал
- Лучше всего для:
- код, canvas, прозрачность через rgba()
Что такое HEX?
HEX — шестизначное шестнадцатеричное число, которое хранит каналы красного, зелёного и синего цвета после лидирующего #. Каждая пара цифр соответствует одному каналу от 00 (нет) до FF (максимум), что даёт те же 16,7 миллиона цветов, что и RGB, но в более короткой записи. HEX — стандарт в CSS, инструментах дизайна и брендбуках.
- Синтаксис:
- #RRGGBB
- Диапазон:
- 00–FF на канал
- Лучше всего для:
- CSS, передача дизайна, брендбуки
Таблица соответствий RGB → HEX
Наиболее распространённые цвета CSS, сконвертированные из RGB в HEX.
| Цвет | RGB | HEX |
|---|---|---|
| black | rgb(0, 0, 0) | #000000 |
| white | rgb(255, 255, 255) | #FFFFFF |
| red | rgb(255, 0, 0) | #FF0000 |
| lime | rgb(0, 255, 0) | #00FF00 |
| blue | rgb(0, 0, 255) | #0000FF |
| yellow | rgb(255, 255, 0) | #FFFF00 |
| orange | rgb(255, 165, 0) | #FFA500 |
| teal | rgb(0, 128, 128) | #008080 |
| purple | rgb(128, 0, 128) | #800080 |
| gray | rgb(128, 128, 128) | #808080 |