Перевести RGB в HEX Red Green Blue ↔ Hexadecimal Бесплатно Онлайн Безопасно
Введите значение в RGB и сразу прочтите его в HEX. Счёт идёт в вашем браузере, никуда ничего не отправляется, а от чего зависит ответ, написано ниже, а не подразумевается.
Ничего не загружается
Откуда взялись эти записи
Hex и RGB — одно и то же, записанное дважды. Экранный цвет — это три числа: сколько излучить красного, зелёного и синего света, каждое от 0 до 255, то есть байт; hex просто записывает эти байты по основанию шестнадцать, так что #FF8800 и rgb(255, 136, 0) — одно и то же распоряжение одному и тому же пикселю. HSL придумали оттого, что ни то ни другое человеку не читается: он даёт тон как угол на цветовом круге, а насыщенность и светлоту в процентах, и потому дизайнер может сделать что-то светлее, не пересчитывая три числа. CMYK принадлежит совсем иному миру — краске, а не свету. Он вычитающий, построен из четырёх печатных форм и достаёт не до всякого цвета, какой может дать экран, ведь экран излучает свет, а бумага лишь отражает его.
Где они встречаются
Hex — это то, что набирают в таблице стилей и что выдаёт дизайнерский инструмент. RGB появляется всюду, где цвету нужна арифметика: градиенты, прозрачность, код, вычисляющий оттенок. К HSL тянутся, когда палитру подбирают руками, ведь нужные изменения обычно суть изменения одного из трёх его чисел. CMYK — то, чего просит типография, и перевод в него есть тот миг, когда макет перестаёт быть светом и становится краской.
Частые вопросы
Почему мой результат в CMYK не совпадает с типографским?
Потому что единственно верного перевода не существует. Арифметика на этой странице — простая, не зависящая от устройства; это верный ответ, когда нужна отправная точка или грубое соответствие. Типография переводит через цветовой профиль, учитывающий именно эту краску, бумагу и машину, и один и тот же цвет RGB даст на мелованной глянцевой бумаге не те значения CMYK, что на немелованной. Для всего, что обязано совпасть, просите у типографии их профиль, а не доверяйтесь формуле.
Почему некоторые экранные цвета нельзя напечатать?
Потому что эти два не достают до одних и тех же цветов. Экран делает цвет, прибавляя свет, и способен на яркий насыщенный голубой или зелёный, какого краска просто не повторит; бумага делает цвет, поглощая свет, и самое светлое, чем она может быть, — белизна страницы. Множество достижимых цветов называют охватом, и там, где охваты не пересекаются, перевод вынужден выбрать ближайший доступный цвет. Оттого яркий экранный цвет в печати часто выглядит слегка приглушённым.
Ответ точный?
Там, где обе единицы определены одна через другую целыми числами, — да; страница говорит об этом над числом, и единственное округление — в том, сколько знаков показано. Там, где отношение не имеет конечной десятичной записи, страница показывает двенадцать значащих цифр и называет соотношение приближённым, а не делает вид, что это не так.
Уходит ли с моего устройства что-нибудь из набранного?
Нет. Счёт идёт в вашем браузере; ничего не отправляется, да и некуда — сервера для этого нет. Загрузите страницу один раз, и она работает с выключенной сетью.
Зачем конвертировать RGB в HEX
Графический редактор, пипетка цвета в операционной системе или строка кода дают вам цвет в виде трёх чисел: 90, 70, 50. Таблице стилей, файлу токенов дизайна или сообщению коллеге нужен он в виде одного короткого кода: #5A4632. Шаг между ними и выполняет эта страница. Конвертировать RGB в HEX — значит записать те же три числа по основанию шестнадцать, по две цифры каждое, и поставить впереди знак решётки. Для одного цвета это делается легко, а для двадцати утомительно, и легко ошибиться, когда числу нужен ведущий нуль или цифра оказывается буквой.
Конвертация точная, что верно не для каждого преобразования цвета. Hex и rgb() — это две записи одних и тех же трёх чисел, количеств красного, зелёного и синего света, которые должен излучать экран, каждое от 0 до 255. Ничто не приближается, и круговое преобразование возвращает то, с чего началось. Страница делает это в вашем браузере, и ничего не загружается. Ниже вы найдёте, как каждое число становится двумя шестнадцатеричными цифрами, как переносится прозрачность, пределы sRGB, места, где людям нужно конвертировать RGB в HEX, и несколько привычек, сохраняющих цвета проекта согласованными.
Как работает конвертация
Каждое число становится двумя шестнадцатеричными цифрами
Возьмём rgb(90, 70, 50). Разделите каждое число на шестнадцать: 90 — это 5, умноженное на 16, плюс 10, а 10 — цифра A, так что 90 становится 5A. 70 — это 4, умноженное на 16, плюс 6, то есть 46. 50 — это 3, умноженное на 16, плюс 2, то есть 32. Соберите три пары вместе и добавьте знак решётки: #5A4632. Страница делает это за вас по мере ввода и показывает фразу rgb(90, 70, 50) = #5A4632, чтобы вы могли проверить.
Ведущие нули
В каждой паре должно быть две цифры. Числу меньше 16 нужен нуль впереди: 7 становится 07, а 0 — 00. Так, rgb(0, 7, 255) — это #0007FF, а не #07FF, что означало бы совсем другое. Забытый нуль — самая частая ошибка при ручной конвертации.
Диапазон
Каждое число должно лежать между 0 и 255. Значение больше 255 нельзя записать двумя шестнадцатеричными цифрами, а отрицательное значение не имеет смысла. Если вычисление в вашем коде дало 270 или −5, сначала ограничьте его диапазоном. Конвертер делает то же самое, чтобы никогда не выдавать недопустимый код.
Что конвертация сохраняет, а чего не может
Она сохраняет цвет в точности
Hex и rgb() — это две записи одних и тех же трёх чисел, от 0 до 255 для красного, зелёного и синего, поэтому ничто не приближается, а круговое преобразование возвращает то, с чего началось. Конвертируйте RGB в HEX и обратно — и у вас те же числа, с которых вы начали.
Она переносит прозрачность
Четвёртое значение для прозрачности тоже переносится: #RRGGBBAA становится rgba() и обратно. Прозрачность 0,5 становится парой 80, поскольку половина от 255 — это около 128, то есть 80 в шестнадцатеричной записи. Так, rgba(90, 70, 50, 0.5) — это #5A463280. Восьмизначный hex принимают все современные браузеры.
Она не может описать цвета за пределами sRGB
Обе записи описывают sRGB, цветовое пространство, которым экран пользуется тридцать лет. Они не могут описать цвет за его пределами, для чего и существуют новые записи CSS: lab(), oklch() и color(). Если вы начинаете с цвета в инструменте с широким охватом, три числа, которые вы копируете, — уже версия в sRGB, и hex верен именно им.
Она не сохраняет сокращённую запись
Там, где код можно записать тремя цифрами, например #AABBCC как #ABC, конвертер даёт длинную форму. Длинная форма всегда допустима и означает тот же цвет; короткая — лишь удобство для читателя.
Распространённые цвета и их коды
Несколько, которые стоит помнить
rgb(255, 255, 255) — это #FFFFFF, белый: все три света на полной мощности. rgb(0, 0, 0) — это #000000, чёрный: совсем нет света. rgb(255, 0, 0) — это #FF0000, чистый красный; rgb(0, 255, 0) — это #00FF00, а rgb(0, 0, 255) — это #0000FF. Любой цвет с тремя равными числами — серый, и в его коде три равные пары: rgb(128, 128, 128) — это #808080.
Привычка «безопасных для веба» цветов
Старые руководства говорили о безопасных для веба цветах, у которых пары были только 00, 33, 66, 99, CC или FF. Они принадлежат временам 256-цветных экранов, и у них нет причин сохраняться. Используйте любое значение; экран может показать их все.
Как конвертировать RGB в HEX здесь
Введите три числа
Введите цвет в первое поле в виде rgb(90, 70, 50) или с числами, разделёнными запятыми или пробелами. Проценты не нужны; используйте числа от 0 до 255.
Прочитайте hex-код
Ответ появляется сразу в другом поле, начиная со знака решётки, заглавными буквами. Если вы указали четвёртое значение для прозрачности, в коде восемь цифр.
Скопируйте в свою работу
Вставьте код в таблицу стилей, файл токенов или сообщение. Добавьте его в заметку о палитре, чтобы следующая конвертация стала поиском в таблице.
Откуда берутся эти записи
Hex и RGB — одно и то же, записанное дважды
Экранный цвет — это три числа: сколько красного, зелёного и синего света излучать, каждое от 0 до 255, то есть один байт. Hex просто записывает эти байты по основанию шестнадцать, поэтому #FF8800 и rgb(255, 136, 0) — это одна и та же инструкция одному и тому же пикселю.
HSL и CMYK
HSL изобрели потому, что ни одна из этих записей не удобна для человека: он задаёт оттенок как угол на цветовом круге, а насыщенность и светлоту как проценты, поэтому дизайнер может сделать что-то светлее, не пересчитывая три числа. CMYK принадлежит совсем другому миру: краске, а не свету. Он субтрактивный, построен из четырёх печатных форм и не может достичь каждого цвета, который доступен экрану, потому что экран излучает свет, а бумага его лишь отражает. Смотрите HEX в HSL и RGB в CMYK.
Где вы с ними встречаетесь
При передаче дизайна
Дизайнер работает в редакторе, который показывает значения rgb или пипетку; разработчику для таблицы стилей нужен hex. Конвертация RGB в HEX — шаг посередине, и её выполняют для каждого цвета палитры.
В скриптах, вычисляющих цвета
Скрипт, который смешивает два цвета или затемняет один, работает с числами и заканчивает тремя из них. Чтобы использовать результат в таблице стилей или показать его, его нужно записать как hex-код. Сделать это вручную в коде — несколько строк; проверить результат конвертером быстрее.
В визуализации данных
Библиотеки диаграмм принимают цвета как hex-строки. Палитры, сгенерированные численными методами, выходят как тройки rgb. Шаг конвертации превращает одно в другое.
В документах и презентациях
Офисные программы показывают цвета как числа RGB; веб-редакторы хотят hex. Когда фирменный цвет должен появиться и там и там, конвертация сохраняет их одинаковыми.
Ловушки при конвертации RGB в HEX
Забытый ведущий нуль
Запись 7 как 7, а не 07 сдвигает каждую следующую цифру. Всегда используйте две цифры на пару.
Путаница процентов с 0–255
rgb(35%, 27%, 20%) — это другая запись чисел, где 100 процентов равны 255. Если ваш источник использует проценты, сначала переведите их в диапазон 0–255: умножьте на 2,55.
Ошибки округления в вычисленных цветах
Скрипт, выдающий 127.5, должен решить, это 127 или 128. Разница невидима, но она создаёт два кода для того, что вы считали одним цветом. Округляйте одинаково везде.
Взятие цвета со скриншота
Цвет, считанный со скриншота, прошёл через управление цветом экрана и, возможно, сжатие. Он может отличаться на шаг-два от исходного. Используйте файл дизайна, когда можете.
Вопросы, которые задают перед конвертацией
Чему равен rgb(255, 0, 0) в hex?
#FF0000, чистый красный.
Чему равен rgb(0, 0, 0) в hex?
#000000, чёрный.
Можно ли использовать нижний регистр в hex-коде?
Да. #5a4632 и #5A4632 — один и тот же цвет. Страница пишет заглавными.
Точна ли конвертация?
Да. Это две записи одних и тех же трёх чисел.
Загружается ли мой цвет?
Нет. Вычисление выполняется в вашем браузере, и ничего никуда не отправляется.
Как вернуться обратно?
С помощью HEX в RGB, который читает три пары как числа.
Привычки, сохраняющие цвета проекта согласованными
Определяйте каждый цвет один раз
Поместите палитру в пользовательские свойства, например --brand: #5A4632, и ссылайтесь на цвета по имени. Когда вы конвертируете RGB в HEX для нового цвета, вы добавляете одну строку, и каждое использование следует за ней.
Выберите один регистр
Выберите верхний или нижний регистр для hex-кодов и придерживайтесь его. Тогда поиск цвета в коде надёжен.
Записывайте источник
Рядом с каждым цветом отмечайте, откуда он взят: из руководства по бренду, логотипа или образца изображения. Когда встаёт вопрос, верен ли цвет, вы знаете, где проверить.
Проверяйте контраст
Для текста на цветном фоне проверяйте коэффициент контрастности инструментом. Числа из формы rgb подставляются прямо в формулу, а hex — это то, что вы вводите в большинстве проверяющих инструментов.
Почему 256 ступеней и что стоит за числами
Восемь бит на каждый свет
Каждое из трёх чисел хранится в восьми битах, что допускает 256 значений от 0 до 255. Три вместе дают 256 × 256 × 256, около 16,7 миллиона сочетаний, что больше, чем глаз способен различить в большинстве условий. Именно поэтому hex-коды имеют ровно шесть цифр: по две на каждый свет, не больше и не меньше. Когда вы конвертируете RGB в HEX, вы выписываете три байта в самой компактной форме, о которой смогли договориться люди.
Почему равные шаги не выглядят равными
Числа не пропорциональны свету, достигающему вашего глаза. Экраны применяют кривую, близкую к степени 2,2, чтобы тёмным тонам доставалось больше из 256 ступеней, чем светлым, что подходит глазу. Шаг от 10 до 20 выглядит более сильным изменением, чем шаг от 240 до 250. Для вас это значит, что усреднение двух цветов усреднением их чисел не даёт цвета, который вы увидели бы при смешении света, — факт, важный при вычислении градиентов и смесей в коде.
Серые и диагональ
Все серые лежат на линии, где три числа равны. Их 256, от чёрного при 0 до белого при 255. Если вы конвертируете RGB в HEX и три пары совпадают, вы сразу знаете, что у цвета нет оттенка. Почти серый с парами, различающимися на шаг-два, имеет слабый оттенок, который дизайнеры часто используют, чтобы придать нейтральному цвету намёк на тепло или холод.
Построение и проверка палитры
От горстки выбранных цветов к палитре
Типичная палитра содержит основной цвет, акцент, нейтральный для текста, более светлый нейтральный для поверхностей и один-два сигнальных цвета для успеха и ошибки. Выберите каждый в инструменте дизайна, прочитайте его числа rgb и конвертируйте RGB в HEX для таблицы стилей. Запишите их как пользовательские свойства с именами, описывающими роль, и палитра готова к использованию в каждом компоненте.
Контраст между текстом и фоном
Читаемому тексту нужна достаточная разница в яркости между буквами и фоном. Рекомендации по доступности определяют коэффициент контрастности, вычисляемый из значений красного, зелёного и синего двух цветов, и требуют не менее 4,5 к 1 для обычного текста. Проверяющие инструменты принимают hex-коды, поэтому коды, которые вы получаете здесь, можно подавать прямо в них. Проверяйте каждую пару, которую планируете использовать, а не только основной цвет на белом.
Конвертация списка
Когда нужно конвертировать много цветов, проходите их по одному и вставляйте каждый результат в таблицу с именем и назначением. Это занимает минуту на цвет, а таблица становится эталоном для всего проекта. Если цвет позже корректируют, менять нужно только его строку.
Согласованность hex и rgb
Если ваш проект хранит одни цвета как hex, а другие как rgb, они легко расходятся, когда кто-то правит один и забывает про другой. Выберите один как мастер, обычно hex, и получайте другой конвертером, когда он нужен.
Связанные конвертеры
То же семейство инструментов охватывает соседние конвертации. Чтобы вернуться обратно, используйте HEX в RGB. Для цветов, описанных оттенком, под рукой HEX в HSL и HSL в HEX, а для печати — RGB в CMYK, CMYK в RGB и CMYK в HEX. Для размеров в той же таблице стилей px в rem делает для длин то же, что эта страница для цветов.
Разобранный пример
Допустим, пипетка в графическом редакторе сообщает вам, что акцент фотографии — rgb(214, 98, 56). Вы вводите три числа и читаете #D66238. В таблице стилей вы пишете --accent: #D66238 и используете его для кнопок и ссылок. Коллега спрашивает, что это за цвет в руководстве по бренду, и вы отправляете код. Позже вам нужна полупрозрачная версия для баннера, и вы конвертируете её обратно с помощью HEX в RGB, чтобы получить rgba(214, 98, 56, 0.15). Обе конвертации точны, поэтому баннер того же оттенка, что и кнопка.
Короткий контрольный список
Перед конвертацией
Проверьте, что каждое число лежит между 0 и 255. Решите, нужна ли прозрачность.
Во время конвертации
Введите три числа, прочитайте код и скопируйте его со знаком решётки.
После конвертации
Проверьте цвет в контексте, на настоящем фоне, и проверьте контраст любого текста на нём.
Частые ошибки
Потерянный ведущий нуль
В каждой паре две цифры. 7 — это 07.
Запись чисел больше 255
Их нельзя записать двумя цифрами. Сначала ограничьте их.
Принятие экрана за истину
Числа точны. Внешний вид зависит от дисплея.
Ваши цвета остаются на вашем устройстве
Вычисление происходит локально. Ваши значения использует ваш собственный браузер, и ничего никуда не отправляется. Потом нечего удалять, и не нужно создавать учётную запись. Вот простой способ конвертировать RGB в HEX.
Итог
Чтобы конвертировать RGB в HEX здесь, введите три числа и сразу читайте hex-код. Конвертация сохраняет цвет в точности: hex и rgb() — это две записи одних и тех же трёх чисел, от 0 до 255 для красного, зелёного и синего, поэтому ничто не приближается, а круговое преобразование возвращает то, с чего началось. Четвёртое значение для прозрачности тоже переносится, поскольку rgba() становится #RRGGBBAA и обратно. Обе записи описывают sRGB, поэтому не могут описать цвета за его пределами. В каждой паре две цифры, поэтому числу меньше 16 добавляется ведущий нуль. Ничего не загружается.