Введите цвет в формате HEX и мгновенно получите точное значение RGB, а заодно все остальные форматы. Работает прямо в браузере.
Когда нужен перевод HEX в RGB
Цветовой код из брендбука, из инспектора Figma или с пипетки обычно выглядит как шесть символов HEX. Но многие программные интерфейсы требуют три отдельных числа: Android Color.rgb(), кортежи цвета в Pillow и униформы шейдеров WebGL работают с отдельными каналами. Кроме того, перевод в RGB нужен как первый шаг к прозрачности: запись rgb(255 87 51 / 50%) править проще, чем восьмизначный HEX. Вставьте код, скопируйте три значения каналов и подставьте их в свой проект.
Где это пригодится
- Передать фирменный цвет в Android Color.rgb() или в кортеж Pillow, где нужны числа 0-255.
- Подготовить цвета для шейдеров WebGL, где каждый канал делится на 255 и превращается в число от 0 до 1.
- Записать полупрозрачную подложку в CSS как rgb(0 0 0 / 40%), исходя из HEX из макета.
Как перевести HEX в RGB
HEX-код представляет собой тот же цвет RGB, записанный в шестнадцатеричной системе (base-16). Шесть символов после решётки: три пары RR, GG и BB, по одной на канал.
Чтобы перевести HEX в RGB, переведите каждую пару из base-16 в десятичную систему: FF равно 255, 57 равно 87, 33 равно 51. Обратный перевод: запись каждого канала (0-255) двузначным шестнадцатеричным числом.
Пример расчёта
- R: FF₁₆ = 15 × 16 + 15 = 255
- G: 57₁₆ = 5 × 16 + 7 = 87
- B: 33₁₆ = 3 × 16 + 3 = 51
#FF5733 = rgb(255, 87, 51)
Совет: Если шейдер или инициализатор SwiftUI просят значения от 0 до 1, не переписывайте HEX заново: разделите каждый полученный канал на 255. Например, 255 превращается в 1.0, а 87 примерно в 0.341. Трёх знаков после запятой обычно достаточно.
Популярные цвета: HEX в RGB
| Цвет | HEX | RGB |
|---|---|---|
| Красный | #FF0000 | rgb(255, 0, 0) |
| Оранжевый | #FFA500 | rgb(255, 165, 0) |
| Жёлтый | #FFFF00 | rgb(255, 255, 0) |
| Лайм | #00FF00 | rgb(0, 255, 0) |
| Зелёный | #008000 | rgb(0, 128, 0) |
| Голубой | #00FFFF | rgb(0, 255, 255) |
| Бирюзовый | #008080 | rgb(0, 128, 128) |
| Синий | #0000FF | rgb(0, 0, 255) |
| Тёмно-синий | #000080 | rgb(0, 0, 128) |
| Фиолетовый | #800080 | rgb(128, 0, 128) |
| Пурпурный | #FF00FF | rgb(255, 0, 255) |
| Розовый | #FFC0CB | rgb(255, 192, 203) |
| Коричневый | #A52A2A | rgb(165, 42, 42) |
| Серый | #808080 | rgb(128, 128, 128) |
| Чёрный | #000000 | rgb(0, 0, 0) |
| Белый | #FFFFFF | rgb(255, 255, 255) |
Часто задаваемые вопросы
Что делать, если API принимает цвет одним целым числом?
Во многих библиотеках, например в игровых движках и инструментах Python, цвет задают одним числом. Тогда конвертация не нужна: замените # на 0x, и #ff5733 превратится в 0xFF5733. Уточните в документации порядок RGB или ARGB, иначе байт прозрачности окажется не на своём месте.
Как сделать из результата полупрозрачный цвет?
Оставьте три числа и добавьте через косую черту прозрачность: rgb(255 87 51 / 50%). В старом синтаксисе пишут rgba(255, 87, 51, 0.5). Современные браузеры понимают и восьмизначный HEX, но запись rgb() удобнее править вручную.
Это одна и та же цветовая модель для HEX и RGB?
Да. HEX-код просто компактно записывает те же каналы красного, зелёного и синего. #FF5733 и rgb(255, 87, 51) описывают один и тот же цвет, поэтому перевод в обе стороны происходит без потерь.
Что означают шесть символов HEX-кода?
Это три двузначных шестнадцатеричных числа: первая пара отвечает за красный канал, вторая за зелёный, третья за синий. Каждая пара принимает значения от 00 (0) до FF (255). Короткая запись из трёх символов, например #F53, разворачивается удвоением каждого знака (#FF5533).
Поддерживает ли HEX прозрачность?
Да, восьмизначный код #RRGGBBAA добавляет пару альфа-канала, где 00 означает полную прозрачность, а FF означает полную непрозрачность. В CSS также можно использовать запись rgba(), например rgba(255, 87, 51, 0.5).
Другие конвертеры цветов
Нужно определить цвет пикселя на картинке или скриншоте? Попробуйте бесплатную пипетку цвета →