Конвертер RGB в Hex
Перевод значений каналов red, green и blue в шестнадцатеричный код цвета.
Палитра в графическом редакторе выдает цвет rgb(46, 134, 171), а таблица стилей CSS оформлена шестнадцатеричными кодами. Смешивание двух разных форматов в одном файле усложняет чтение разметки и поддержку проекта.
Принцип перевода RGB в Hex код
Каждое из трех значений RGB от 0 до 255 переводится в двухзначную шестнадцатеричную пару чисел. Затем три пары объединяются после символа #. В примере rgb(46, 134, 171) число 46 превращается в 2E, 134 дает 86, а 171 становится AB. В итоге формируется код #2E86AB.
Ручной пересчет часто приводит к опечаткам на крайних числах диапазона. Например, 15 должно превращаться в 0F. Если потерять ведущий ноль, получится некорректная одиночная цифра вместо полной пары.
Примеры перевода значений RGB в Hex
| Значение RGB | Пара Hex | Полный пример |
|---|---|---|
| 0 | 00 | #000000 (black) |
| 15 | 0F | a dark, easy-to-drop leading zero |
| 87 | 57 | #FF5733 (orange-red) |
| 171 | AB | #2E86AB (teal blue) |
| 255 | FF | #FFFFFF (white) |
Формат RGBA и 8 цифр Hex с каналом прозрачности
Когда элементу требуется прозрачность, к каналам добавляется параметр альфа, например rgba(46, 134, 171, 0.5) для значения 50%. В шестнадцатеричной системе существует аналогичный формат из 8 знаков — #2E86AB80.
Два дополнительных символа на конце передают тот же уровень прозрачности по шкале от 0 до 255 (от 00 до FF), а не в процентах. Перед использованием убедись, что твоя сборка CSS или редактор поддерживают восьмизначный синтаксис.
Проверка контрастности после конвертации в Hex
- Руководство WCAG требует минимальное соотношение контраста 4,5:1 между обычным текстом и фоном страницы.
- Для крупного текста от 18pt или жирного от 14pt минимальная планка снижена до 3:1.
- Светло-серый оттенок
#AAAAAAна белом фоне полностью проваливает тест и создает трудности при чтении. - Перевод текста и фонового слоя в единый шестнадцатеричный вид помогает быстро проверить их сочетание на соответствие стандартам.
Вопросы о работе конвертера RGB в Hex
Как перевести число 171 из RGB в пару шестнадцатеричных символов?
Раздели 171 на 16: получается 10 с остатком 11. Число 10 в шестнадцатеричной записи обозначается буквой A, а 11 — буквой B, образуя пару AB. Инструмент выполняет эту операцию по нажатию кнопки.
Зачем нужны две последние цифры в восьмизначном Hex?
Они задают альфа-канал прозрачности по шкале каналов: FF означает полную непрозрачность, а 00 — абсолютную прозрачность.
Почему нельзя отбрасывать ведущий ноль?
Каждый канал строго кодируется двумя знаками. Если число 5 записать как 5 вместо 05, общая длина строки нарушится и цвета сдвинутся.
Какой порог контрастности обязателен для стандартного текста?
По стандарту WCAG AA для обычного текста требуется соотношение 4,5:1, а для крупного шрифта от 18pt или 14pt полужирного достаточно 3:1.
Что лучше использовать в стилях: rgba() или восьмизначный Hex?
Оба варианта поддерживаются браузерами. Запись rgba() более наглядна для чтения, а восьмизначный код компактнее. Выбирай вариант под стандарты своего проекта.