Перевести HEX в RGB Hexadecimal ↔ Red Green Blue Бесплатно Онлайн Безопасно
Введите значение в HEX и сразу прочтите его в RGB. Счёт идёт в вашем браузере, никуда ничего не отправляется, а от чего зависит ответ, написано ниже, а не подразумевается.
Ничего не загружается
Откуда взялись эти записи
Hex и RGB — одно и то же, записанное дважды. Экранный цвет — это три числа: сколько излучить красного, зелёного и синего света, каждое от 0 до 255, то есть байт; hex просто записывает эти байты по основанию шестнадцать, так что #FF8800 и rgb(255, 136, 0) — одно и то же распоряжение одному и тому же пикселю. HSL придумали оттого, что ни то ни другое человеку не читается: он даёт тон как угол на цветовом круге, а насыщенность и светлоту в процентах, и потому дизайнер может сделать что-то светлее, не пересчитывая три числа. CMYK принадлежит совсем иному миру — краске, а не свету. Он вычитающий, построен из четырёх печатных форм и достаёт не до всякого цвета, какой может дать экран, ведь экран излучает свет, а бумага лишь отражает его.
Где они встречаются
Hex — это то, что набирают в таблице стилей и что выдаёт дизайнерский инструмент. RGB появляется всюду, где цвету нужна арифметика: градиенты, прозрачность, код, вычисляющий оттенок. К HSL тянутся, когда палитру подбирают руками, ведь нужные изменения обычно суть изменения одного из трёх его чисел. CMYK — то, чего просит типография, и перевод в него есть тот миг, когда макет перестаёт быть светом и становится краской.
Частые вопросы
Почему мой результат в CMYK не совпадает с типографским?
Потому что единственно верного перевода не существует. Арифметика на этой странице — простая, не зависящая от устройства; это верный ответ, когда нужна отправная точка или грубое соответствие. Типография переводит через цветовой профиль, учитывающий именно эту краску, бумагу и машину, и один и тот же цвет RGB даст на мелованной глянцевой бумаге не те значения CMYK, что на немелованной. Для всего, что обязано совпасть, просите у типографии их профиль, а не доверяйтесь формуле.
Почему некоторые экранные цвета нельзя напечатать?
Потому что эти два не достают до одних и тех же цветов. Экран делает цвет, прибавляя свет, и способен на яркий насыщенный голубой или зелёный, какого краска просто не повторит; бумага делает цвет, поглощая свет, и самое светлое, чем она может быть, — белизна страницы. Множество достижимых цветов называют охватом, и там, где охваты не пересекаются, перевод вынужден выбрать ближайший доступный цвет. Оттого яркий экранный цвет в печати часто выглядит слегка приглушённым.
Ответ точный?
Там, где обе единицы определены одна через другую целыми числами, — да; страница говорит об этом над числом, и единственное округление — в том, сколько знаков показано. Там, где отношение не имеет конечной десятичной записи, страница показывает двенадцать значащих цифр и называет соотношение приближённым, а не делает вид, что это не так.
Уходит ли с моего устройства что-нибудь из набранного?
Нет. Счёт идёт в вашем браузере; ничего не отправляется, да и некуда — сервера для этого нет. Загрузите страницу один раз, и она работает с выключенной сетью.
Зачем конвертировать HEX в RGB
Инструмент дизайна даёт вам цвет как #5A4632. Таблица стилей, скрипт для холста, библиотека диаграмм или графическая программа просит его как rgb(90, 70, 50). Это один и тот же цвет, а работа по переходу от одной записи к другой возникает постоянно: в фирменном руководстве перечислены коды hex, а вашему коду нужны числа, чтобы вычислить более светлый оттенок; клиент присылает цвет из логотипа, и вам нужно заполнить rgba() с прозрачностью; библиотека принимает только три отдельных значения. Конвертировать HEX в RGB — небольшая задача, а надёжный конвертер избавляет вас от шестнадцатеричной арифметики в уме и от ошибок в ней.
Конвертация точна, что верно не для каждого цветового преобразования. Hex и rgb() — две записи одних и тех же трёх чисел, количеств красного, зелёного и синего света, которые должен излучать экран, каждое от 0 до 255. Ничто не приближается, а круговой путь возвращает то, с чего начал. Эта страница делает это в вашем браузере, и ничего не загружается. Ниже вы найдёте, как цифры hex соотносятся с тремя числами, как переносится прозрачность, что делает сокращённая форма, пределы sRGB и ситуации, в которых разработчикам и дизайнерам нужно конвертировать HEX в RGB.
Как работает конвертация
Три пары цифр становятся тремя числами
Цвет hex — это знак решётки, за которым следуют шесть шестнадцатеричных цифр, читаемых парами: первая пара — красный, вторая — зелёный, третья — синий. Каждая пара — число в шестнадцатеричной системе от 00 до FF, то есть от 0 до 255 в десятичной системе, которой вы пользуетесь каждый день. Так, #5A4632 делится на 5A, 46 и 32. 5A — это 5 × 16 + 10 = 90, 46 — это 4 × 16 + 6 = 70, а 32 — это 3 × 16 + 2 = 50. Цвет — rgb(90, 70, 50), тот пример, с которого начинается страница.
Почему цифры идут от 0 до F
Шестнадцатеричной системе нужно шестнадцать символов, поэтому после 9 идут буквы от A до F, обозначающие от 10 до 15. Пара таких цифр даёт 16 × 16 = 256 значений, ровно столько, сколько может вместить один байт. Цвет экрана — это три байта, а hex — просто компактный способ их записи: шесть символов вместо трёх чисел с запятыми и скобками.
Верхний и нижний регистр
#5a4632 и #5A4632 — один и тот же цвет. CSS принимает любой, как и этот конвертер. Выберите одно соглашение для проекта и придерживайтесь его, поскольку смешанный регистр затрудняет поиск по таблице стилей.
Что конвертация сохраняет и чего не может
Она сохраняет цвет точно
Hex и rgb() — две записи одних и тех же трёх чисел, от 0 до 255 для красного, зелёного и синего, поэтому ничто не приближается, а круговой путь возвращает то, с чего начал. Конвертируйте HEX в RGB и обратно, и у вас тот же код, с которого вы начали, за возможным исключением заглавных букв.
Она переносит прозрачность
Четвёртое значение, прозрачность, тоже переносится: #RRGGBBAA становится rgba() и обратно. Последняя пара — альфа-канал, от 00, полностью прозрачный, до FF, полностью непрозрачный. Так, #5A463280 — это rgba(90, 70, 50, 0.5), поскольку 80 в hex — это 128, а 128 из 255 — это около половины. Восемь цифр принимают все современные браузеры.
Она не может описать цвета за пределами sRGB
Обе записи описывают sRGB, цветовое пространство, которое экран использует тридцать лет. Они не могут описать цвет за его пределами, для чего и существуют новые записи CSS: lab(), oklch() и color(). Современные дисплеи могут показывать более насыщенные цвета, чем вмещает sRGB, и дизайнер, выбравший такой цвет в инструменте с широким охватом, увидит его обрезанным до sRGB, когда он записан как hex.
Сокращённая запись расширяется, а не сохраняется
Сокращённая запись расширяется, а не сохраняется: #abc возвращается как #AABBCC, то есть тот же цвет, записанный длинным способом. Каждая цифра удваивается. Это значит, что вы можете вставить трёхзначный код и получить верные числа, но не можете восстановить короткую запись из длинной взглядом, только проверив, что каждая пара повторяется.
Распространённые цвета и их числа
Несколько для запоминания
Белый — это #FFFFFF, то есть rgb(255, 255, 255): все три света на полной мощности. Чёрный — #000000, rgb(0, 0, 0): никакого света вообще. Чистый красный — #FF0000, зелёный — #00FF00, а синий — #0000FF. Средне-серый — любой код с тремя равными парами, например #808080, то есть rgb(128, 128, 128). Равные пары всегда означают серый, потому что равные количества трёх светов не дают оттенка.
Чтение кода с первого взгляда
Когда вы знаете закономерность, вы можете оценить цвет по цифрам hex. Код, начинающийся с высокой первой пары, красноватый, с высокой средней — зеленоватый, с высокой последней — синеватый. #FF8800 — это много красного, немного зелёного и никакого синего, то есть оранжевый. Для этого инструмент не нужен, а вот для точных чисел нужен.
Как конвертировать HEX в RGB здесь
Введите или вставьте код hex
Введите цвет в первое поле, со знаком решётки или без. Принимаются трёх-, шести- и восьмизначные формы.
Прочтите значение rgb
Ответ появляется сразу в другом поле в форме rgb(90, 70, 50), или rgba(), если код нёс прозрачность. Страница показывает предложение #5A4632 = rgb(90, 70, 50), чтобы вы могли проверить с первого взгляда.
Скопируйте его в свой код
Вставьте результат в таблицу стилей, скрипт или инструмент, который его запросил. Если вам нужны три числа отдельно, это те, что в скобках.
Откуда берутся эти записи
Hex и RGB — одно и то же, записанное дважды
Цвет экрана — это три числа, сколько красного, зелёного и синего света излучать, каждое от 0 до 255, то есть один байт. Hex просто записывает эти байты в шестнадцатеричной системе, поэтому #FF8800 и rgb(255, 136, 0) — одна и та же инструкция одному и тому же пикселю.
HSL и CMYK
HSL изобрели потому, что ни одно из них не читается человеком: оно задаёт оттенок как угол на цветовом круге, с насыщенностью и светлотой в процентах, так что дизайнер может сделать что-либо светлее, не пересчитывая три числа. CMYK принадлежит совершенно другому миру — краске, а не свету. Оно субтрактивно, построено из четырёх печатных форм и не может достичь каждого цвета, который доступен экрану, потому что экран излучает свет, а бумага лишь отражает его. Для них см. HEX в HSL и HEX в CMYK.
Где вы с ними встречаетесь
В таблицах стилей
Hex — то, что вы вводите в таблицу стилей и что вам выдаёт инструмент дизайна. RGB появляется везде, где цвету нужна арифметика: градиенты, прозрачность, код, вычисляющий оттенок. Знание обеих записей и умение переходить между ними — часть повседневной фронтенд-работы.
В скриптах и рисовании на холсте
Код рисования часто хочет три числа отдельно, чтобы смешать два цвета, затемнить один на фиксированную величину или проверить, совпадает ли пиксель с целью. Конвертация HEX в RGB даёт вам числа напрямую.
В графических и изобразительных инструментах
Редакторы изображений обычно показывают цвет как три числа или как код hex и позволяют ввести любое. Переход между ними позволяет воспроизвести цвет с веб-страницы в программе, которой нужны числа.
В документации и фирменных руководствах
Фирменное руководство может перечислять цвет в hex для веба, в RGB для экранов и в CMYK для печати. Согласование первых двух — дело одной конвертации, и это та проверка, что ловит опечатку до того, как её напечатают на тысяче листовок.
Практическое применение формы RGB
Прозрачность без второго цвета
С rgba(90, 70, 50, 0.5) вы получаете цвет в половину силы, так что то, что за ним, просвечивает. Это стандартный способ делать наложения, тени и тонированные фоны из фирменного цвета, не изобретая нового.
Вычисление более светлых и тёмных оттенков
Чтобы сделать состояние при наведении чуть темнее, скрипт может вычесть фиксированную величину из каждого из трёх чисел. Делать то же со строкой hex неудобно; с rgb это простая арифметика. Если нужна корректировка по оттенку, конвертируйте вместо этого HEX в HSL.
Проверки контраста
Инструменты доступности вычисляют контраст между двумя цветами по их значениям красного, зелёного и синего. Наличие чисел позволяет вам выполнить расчёт самостоятельно или вставить их в проверяющую программу, чтобы убедиться, что текст на фоне читаем.
Ловушки при конвертации HEX в RGB
Забытая пара альфа-канала
В восьмизначном коде прозрачность — в последних двух цифрах. Если вы их отбросите, вы её потеряете. Проверьте длину кода, прежде чем решить, что результат — это цвет.
Путаница в порядке
Hex — красный, зелёный, синий. Несколько форматов и некоторые старые графические API используют синий, зелёный, красный. Если цвет выходит неверным в конкретной программе, проверьте порядок её каналов.
Копирование со снимка экрана
Цвет, считанный со снимка экрана, — это цвет после управления цветом экрана и любого сжатия. Он может слегка отличаться от цвета в исходном файле. Используйте файл дизайна, когда можете.
Предположение, что экраны согласуются
Два экрана показывают один и тот же код слегка по-разному. Числа точны; то, что вы видите, зависит от дисплея и его профиля.
Вопросы, которые задают перед конвертацией
Чему равен #FF0000 в RGB?
rgb(255, 0, 0), чистый красный.
Чему равен #FFFFFF в RGB?
rgb(255, 255, 255), белый.
Можно ли конвертировать трёхзначный код?
Да. Каждая цифра удваивается: #09C становится #0099CC, то есть rgb(0, 153, 204).
Точна ли конвертация?
Да. Это две записи одних и тех же трёх чисел.
Загружается ли мой цвет?
Нет. Арифметика выполняется в вашем браузере, и ничто никуда не отправляется.
Как вернуться?
С помощью RGB в HEX, который записывает три числа как код hex.
Мудрый выбор при конвертации HEX в RGB
Знайте, что нужно дальше
Если вам нужна прозрачность, естественная форма — rgba(). Если нужно подправить светлоту или оттенок, проще HSL. Если цвет пойдёт в печать, следующий шаг — CMYK, с оговорками, которые несёт эта конвертация. См. RGB в CMYK.
Храните hex как мастер
Для цветов в фирменной палитре храните код hex как эталон. Он короток, однозначен и понятен везде. Выводите из него другие формы, когда они понадобятся.
Используйте пользовательские свойства
В CSS определяйте цвета один раз, как --brand: #5A4632, и ссылайтесь на них по имени. Если нужны числа для rgba(), определите также --brand-rgb: 90 70 50. Конвертация тогда выполняется один-единственный раз.
Современный CSS и форма RGB
Синтаксис с пробелами
Современный CSS принимает rgb() с пробелами и косой чертой для прозрачности, как в rgb(90 70 50 / 50%). Числа те же, что и в форме с запятыми, поэтому результат конвертации работает в обеих. Старые браузеры и некоторые инструменты ожидают запятые, поэтому форма с запятыми остаётся безопасным выбором, когда вы не знаете, где цвет будет использоваться.
Проценты и дроби
RGB можно также записывать процентами, например rgb(35% 27% 20%), где 100 процентов — это 255. Страница даёт целые числа, потому что именно их хранит hex и именно их ожидает большинство инструментов. Если вам нужны проценты, разделите каждое число на 255 и умножьте на 100.
Пользовательские свойства для трёх чисел
Распространённый приём — хранить в пользовательском свойстве лишь три числа, --brand-rgb: 90 70 50, и использовать как rgb(var(--brand-rgb) / 0.5). Это позволяет одному определению служить и для сплошных, и для полупрозрачных применений. Когда вы конвертируете HEX в RGB для этой цели, скопируйте из ответа только числа.
Работа с цветом на практике
Сверяйтесь с фирменным руководством
Если фирменное руководство даёт и hex, и rgb для одного цвета, конвертируйте одно и сравните с другим. Несовпадение обычно означает опечатку в руководстве, а найти её до использования на каждой странице стоит той минуты, которую это занимает.
Держите палитру коротким списком
Большинство сайтов используют от пяти до восьми цветов. Запишите их в заметке в обеих формах. Каждый раз, когда вам нужно конвертировать HEX в RGB для нового компонента, вы можете посмотреть, а не вычислять заново, и палитра остаётся согласованной.
Называйте цвета по роли
Названия вроде «основной», «поверхность» и «предупреждение» переживают редизайн лучше, чем названия вроде «зелёный» или «коричневый». Конвертация даёт вам числа; название говорит, для чего они.
Связанные конвертеры
То же семейство инструментов охватывает соседние конвертации. Чтобы вернуться, используйте RGB в HEX. Для цветов, описываемых оттенком, под рукой HEX в HSL и HSL в HEX, а для печати — HEX в CMYK, CMYK в HEX и CMYK в RGB. Для размеров в той же таблице стилей px в rem и px в em делают для длин то, что эта страница делает для цветов.
Разобранный пример
Допустим, ваш фирменный цвет — #1E7A5C, и вам нужна полупрозрачная версия для фона карточки. Вы вводите код и читаете rgb(30, 122, 92). В таблице стилей вы пишете background: rgba(30, 122, 92, 0.12), очень светлый тон того же зелёного, и рамку rgba(30, 122, 92, 0.4). Карточка комфортно лежит и на белой странице, и на серой, потому что прозрачность пропускает страницу. Когда фирменный цвет позже изменится, вы замените три числа в одном пользовательском свойстве, и все тона последуют за ним.
Краткий контрольный список
Перед конвертацией
Проверьте длину кода: три, шесть или восемь цифр. Решите, нужна ли прозрачность.
Во время конвертации
Вставьте код, прочтите значение rgb и скопируйте его со скобками или только три числа.
После конвертации
Проверьте цвет в контексте, на реальном фоне, и проверьте контраст любого текста, лежащего на нём.
Частые ошибки
Отбрасывание пары прозрачности
Восемь цифр означают альфа-канал. Сохраните его или конвертируйте в rgba().
Путаница порядка каналов
Hex начинается с красного. Некоторые инструменты ожидают сначала синий.
Принимать экран за истину
Числа точны. Вид зависит от дисплея.
Ваши цвета остаются на вашем устройстве
Расчёт происходит локально. Ваши значения используются вашим собственным браузером, и ничто никуда не отправляется. После этого нечего удалять и не нужно создавать аккаунт. Это простой способ конвертировать HEX в RGB.
Итог
Чтобы конвертировать HEX в RGB здесь, введите или вставьте код hex и сразу прочтите значение rgb. Конвертация сохраняет цвет точно: hex и rgb() — две записи одних и тех же трёх чисел, от 0 до 255 для красного, зелёного и синего, поэтому ничто не приближается, а круговой путь возвращает то, с чего начал. Четвёртое значение, прозрачность, тоже переносится, поскольку #RRGGBBAA становится rgba() и обратно. Обе записи описывают sRGB, поэтому не могут описать цвета за его пределами, а сокращённая запись расширяется, а не сохраняется: #abc возвращается как #AABBCC. Ничего не загружается.