Веб-дизайн и CSS
Преобразуйте цвет из файла дизайна или выбранный с помощью инструмента выбора цвета на скриншоте в шестнадцатеричный код, необходимый для вашей таблицы стилей.
Конвертер RGB в HEX — преобразуйте значения RGB в шестнадцатеричные коды, а шестнадцатеричные коды — в RGB, с предварительным просмотром в режиме реального времени.
Введите значения красного, зелёного и синего, выберите цвет или вставьте шестнадцатеричный код, чтобы сразу увидеть все форматы: HEX, RGB и HSL. Динамический предварительный просмотр и проверка контрастности покажут, какой цвет текста подходит лучше всего. Всё работает прямо в браузере.
Преобразовать цвет
Ваши цвета сохраняются в браузере
Выберите или введите цвет
Aa
Цветовая кодировка
HEX
–RGB (CSS)
–HSL (CSS)
––Best text color on it
–Коэффициент контрастности
Руководство
Руководство по преобразованию RGB в HEX: цветовые коды, HSL и контраст
Узнайте, как работают цветовые коды и как выбирать сочетания цветов, обеспечивающие хорошую читаемость.
Для чего нужен конвертер RGB в HEX?
Экраны воспроизводят все цвета путем смешивания красного, зеленого и синего света. В системе RGB эта смесь обозначается тремя числами от 0 до 255. В системе HEX те же три числа записываются в шестнадцатеричном формате в виде короткого кода, например #1F3A5F, который обычно используется в CSS, инструментах для дизайна и руководствах по фирменному стилю.
Введите три числа, выберите цвет с помощью палитры или вставьте шестнадцатеричный код. Все форматы обновляются одновременно; кроме того, вы получите версию в формате HSL и рекомендацию о том, какой цвет текста лучше всего читается на данном фоне.
Почему люди конвертируют RGB в HEX
Бренд и документы
Соблюдайте единообразие фирменных цветов в логотипе, презентации и на веб-сайте.
Доступность
Перед публикацией проверьте, какой цвет текста лучше смотрится на фоне, и оцените коэффициент контрастности.
Как RGB преобразуется в HEX
Каждое из трёх чисел преобразуется в двузначное число в шестнадцатеричной системе счисления, после чего три пары объединяются.
RGB: 31, 58, 95
31 = 1F (1 × 16 + 15)
58 = 3A (3 × 16 + 10)
95 = 5F (5 × 16 + 15)
HEX: #1F3A5F
В шестнадцатеричной системе счисления используются цифры от 0 до 9 и буквы от A до F, причем A соответствует 10, а F — 15. Такой короткий код, как #FA0, представляет собой сокращение: каждая цифра удваивается, поэтому он означает #FFAA00.
Распространенные цвета в системах RGB и HEX
| Цвет | RGB | HEX |
|---|---|---|
| Черный | 0, 0, 0 | #000000 |
| Белый | 255, 255, 255 | #FFFFFF |
| Красный | 255, 0, 0 | #FF0000 |
| Зелёный | 0, 255, 0 | #00FF00 |
| Синий | 0, 0, 255 | #0000FF |
| Жёлтый | 255, 255, 0 | #FFFF00 |
| Оранжевый | 255, 165, 0 | #FFA500 |
| Серый | 128, 128, 128 | #808080 |
Как пользоваться конвертером RGB в HEX
- Введите значения красного, зелёного и синего цветов или щелкните по образцу, чтобы воспользоваться палитрой цветов.
- Или введите шестнадцатеричный код в поле «Hex», чтобы выполнить обратное преобразование.
- Ознакомьтесь с кодами HEX, RGB и HSL, а также проверьте коэффициент контрастности и оптимальный цвет текста.
- Нажмите «Копировать» рядом с нужным форматом.
Простые советы по работе с цветами
- Для обеспечения читаемости текста следует стремиться к коэффициенту контрастности не менее 4,5 : 1 для обычного текста и 3 : 1 для текста крупного размера.
- В шестнадцатеричных кодах не учитывается регистр, поэтому #1f3a5f и #1F3A5F обозначают один и тот же цвет.
- Символ # в начале строки обязателен в CSS, но здесь он не обязателен. Вы можете вставлять код как с ним, так и без него.
- Экраны и принтеры по-разному отображают цвета, поэтому цвет на распечатке может отличаться от того, что вы видите на экране.
Ограничения и конфиденциальность
Конфиденциальность
Цвета преобразуются в вашем браузере. Никакие данные не отправляются на наш сервер и не сохраняются. На вашем устройстве запоминается только выбор строчных букв.
Ограничения
Этот инструмент работает со стандартными 8-битными цветами sRGB с значениями от 0 до 255 по каждому каналу. Он не поддерживает прозрачность (RGBA или 8-значные шестнадцатеричные коды), цветовую модель CMYK для печати, а также цветовые пространства с широкой цветовой гаммой.
Часто задаваемые вопросы
Часто задаваемые вопросы о конвертере RGB в HEX
Как преобразовать RGB в HEX?
Введите значения красного, зелёного и синего цветов, каждое из которых может принимать значения от 0 до 255. Инструмент преобразует каждое число в две цифры в шестнадцатеричной системе счисления и объединяет их, так что 31, 58, 95 превращается в #1F3A5F.
Как преобразовать шестнадцатеричный код в RGB?
Вставьте шестнадцатеричный код в поле «Hex». Три значения RGB заполняются сразу. Например, #FF8800 соответствует значениям 255, 136, 0.
В шестнадцатеричном коде нужно указывать знак #?
Нет. Вы можете вводить его как с символом #, так и без него; кроме того, работают и короткие коды, например #FA0. В результате всегда добавляется символ #, поэтому код готов к использованию в CSS.
Что означают эти три числа RGB?
Это значения интенсивности красного, зеленого и синего света в диапазоне от 0 (отсутствие) до 255 (максимум). 0, 0, 0 — это черный цвет, а 255, 255, 255 — белый.
Для чего нужно значение HSL?
В HSL цвет описывается с помощью оттенка, насыщенности и яркости. Часто проще настроить эти параметры вручную, например, чтобы сделать цвет чуть светлее, и это работает напрямую в CSS.
О чём говорит коэффициент контрастности?
Этот показатель отражает, насколько хорошо черный или белый текст выделяется на фоне вашего цвета. Соотношение 4,5 : 1 или выше является стандартным минимальным требованием для обычного текста в соответствии с руководящими принципами доступности WCAG.
Можно ли добавить прозрачность?
Здесь — нет. Этот инструмент работает только с непрозрачными цветами без альфа-канала. Чтобы добиться прозрачности, добавьте значение альфа самостоятельно в rgba() в вашем CSS.
Мои данные сохраняются или отправляются куда-нибудь?
Нет. Преобразование происходит в вашем браузере, и никакие данные не покидают ваше устройство. На следующий раз запоминается только ваш выбор строчных букв.
От пользователей этого инструмента
Отзывы
Загрузка отзывов…
Продолжай
Еще больше инструментов в наборе
На главной странице представлены ещё десятки бесплатных инструментов, для использования которых не требуется ключ API.
Генератор UUID
Массовое создание случайных UUID форматов v4, v7 и v5.
Открыть инструментУдаление пробелов
Удалите лишние пробелы, табуляции и пустые строки.
Открыть инструментКонвертер единиц измерения
Конвертируйте длину, вес, скорость и другие величины.
Открыть инструментКонвертер римских цифр
Преобразование чисел в римские цифры и обратно.
Открыть инструмент