Конвертер RGB в HEX
Превратите значения RGB в hex-код цвета.
Работает в браузере. То, что вы вводите, никуда не отправляется.
- Вставка rgb() или rgba()
- 8-значный hex с альфа-каналом
- Обновление по мере ввода
Как конвертировать RGB в HEX
- Вставьте значение rgb() или rgba() или введите каждый канал по отдельности.
- Задайте альфа меньше 1, чтобы также получить 8-значный hex-код.
- Скопируйте hex-код.
Примеры RGB в hex
| RGB | Hex | Примечание |
|---|---|---|
| rgb(255, 136, 0) | #FF8800 | Стандартное преобразование |
| rgb(0, 0, 0) | #000000 | Чёрный |
| rgba(255, 136, 0, 0.5) | #FF880080 | Альфа добавляет 2 цифры |
| 255, 136, 0 | #FF8800 | Обычные числа тоже работают |
Как альфа превращается в hex-цифры
Умножьте альфа на 255, округлите до ближайшего целого числа, затем запишите его как две hex-цифры в конце кода.
| Альфа | Hex-суффикс |
|---|---|
| 1 (сплошной) | не нужен |
| 0.75 | BF |
| 0.5 | 80 |
| 0.25 | 40 |
| 0 (невидимый) | 00 |
Где работает 8-значный hex
- CSS принимает #RRGGBBAA в каждом современном браузере: Chrome, Firefox, Safari и Edge.
- Атрибуты fill и stroke в SVG тоже принимают 8-значный hex в современных браузерах.
- Некоторые старые редакторы изображений и инструменты дизайна читают только 6-значный hex и отбрасывают или отклоняют пару альфа-канала, поэтому храните для таких случаев отдельную 6-значную копию.
Частые вопросы о RGB в HEX
Как перевести RGB в HEX вручную?
Запишите каждый канал двузначным числом в шестнадцатеричной системе и соедините их. rgb(255, 136, 0) превращается в FF, 88 и 00, то есть #FF8800.
Как непрозрачность записывается в hex?
Умножьте альфа на 255, округлите и запишите как две hex-цифры в конце. Альфа 0.5 превращается в 80, поэтому rgba(255, 136, 0, 0.5) это #FF880080.
Какие форматы можно вставлять?
rgb(255, 136, 0), rgba(255, 136, 0, 0.5), более новый rgb(255 136 0 / 50%) и обычные числа вроде 255, 136, 0. Hex-код тоже подходит.
#ff8800 отличается от #FF8800?
Нет, регистр не имеет значения в hex-цветах. Отметьте "Заглавные буквы", если ваш гайд по стилю требует прописных.
Можно ввести название цвета вроде orange вместо чисел?
Нет. Этот конвертер читает только числовые значения rgb(), rgba() и hex, ведь для сопоставления 148 именованных цветов CSS понадобилась бы отдельная таблица соответствий.
Почему мой hex-код немного изменился после ввода процента?
Каналы в процентах, например rgb(94% 53% 0%), переводятся в ближайший из 256 шагов на канал, поэтому округление может сдвинуть результат на 1 в некоторых каналах.
Альфа-канал округляется одинаково в каждом браузере?
Да. Этот расчёт, умножить на 255 и округлить до целого числа, стандартный: он даёт одинаковые 2 hex-цифры независимо от браузера, ведь эта страница выполняет преобразование сама, а не полагается на API браузера, который может отличаться.
Можно конвертировать цвет с процентной альфой, например 50%?
Да. rgba(255, 136, 0, 50%) и более новый rgb(255 136 0 / 50%) оба работают, наряду со старым синтаксисом от 0 до 1 для альфа-канала.