Конвертер HEX в RGB и обратно
Введите или вставьте цвет в HEX, RGB, HSL или CMYK, и остальные форматы пересчитаются на лету. Скопируйте готовые значения для CSS, подберите оттенок светлее или темнее и проверьте контраст с текстом.
Нужен интерфейс, который хорошо выглядит и легко читается?
Проектируем интерфейсы сайтов и приложений с цельной системой цветов: фирменная палитра, контраст по WCAG, дизайн-токены, которыми пользуются и дизайнеры, и разработчики. Расскажите о проекте, и мы оценим работу.
Спасибо! Специалист свяжется с вами в течение рабочего дня.
Коротко: введите цвет в любое поле, например #2e5cf2, rgb(46, 92, 242), hsl(226, 88%, 56%) или cmyk(81%, 62%, 0%, 5%), и конвертер сразу заполнит остальные форматы. Ниже — значения для CSS, включая OKLCH, оттенки светлее и темнее и проверка контраста по WCAG 2.2.
Как перевести HEX в RGB
- Введите цвет. Вставьте HEX-код с «#» или без него: подходят 3, 4, 6 и 8 знаков. Можно начать и с RGB, HSL, CMYK или выбрать цвет пипеткой системы.
- Посмотрите результат. Все четыре поля пересчитываются при вводе. Ошибка в значении подсвечивается, а остальные поля держат последний правильный цвет.
- Скопируйте нужное. У каждого поля и каждого значения для CSS есть кнопка копирования. Цвет попадает в адрес страницы, ссылкой можно поделиться.
- Проверьте читаемость. В проверке контраста текущий цвет стоит фоном. Задайте цвет текста и посмотрите, проходит ли пара AA и AAA.
Как устроен перевод
HEX — это тот же цвет RGB, записанный в шестнадцатеричной системе: каждая пара знаков — один канал от 00 до FF, то есть от 0 до 255. #2E5CF2 означает красный 0x2E = 46, зелёный 0x5C = 92, синий 0xF2 = 242. Короткий код вроде #3AF удваивает каждый знак и превращается в #33AAFF. Седьмой и восьмой знаки задают прозрачность: #2E5CF280 — тот же синий с непрозрачностью 50%.
| Формат | Пример | Где используется |
|---|---|---|
| HEX | #2E5CF2 | CSS, Figma, брендбуки |
| RGB | rgb(46, 92, 242) | CSS, код Android и iOS, графические редакторы |
| HSL | hsl(226, 88%, 56%) | Темы в CSS: меняем светлоту и сохраняем тон |
| OKLCH | oklch(54.2% 0.23 265.7) | Современные шкалы цветов в CSS с ровной воспринимаемой светлотой |
| CMYK | cmyk(81%, 62%, 0%, 5%) | Ориентир для печати |
HSL описывает тот же цвет через тон (0–360°), насыщенность и светлоту, поэтому в нём удобно делать светлые и тёмные версии фирменного цвета. OKLCH делает то же в перцептивном пространстве: шаги одинаковой светлоты и выглядят одинаково. Его поддерживают все актуальные браузеры.
Про CMYK
Конвертер использует стандартную формулу без привязки к устройству: K = 1 − max(R, G, B), затем C, M и Y из оставшихся каналов. Типографии считают по ICC-профилям конкретной бумаги и красок, поэтому их значения могут отличаться на несколько процентов. Используйте CMYK отсюда как отправную точку, а итоговые цифры уточните в типографии.
Контраст и доступность
WCAG 2.2 требует контраст не меньше 4,5:1 для обычного текста и 3:1 для крупного текста и элементов интерфейса, таких как иконки и рамки полей. Многие фирменные синие и зелёные с белым текстом оказываются на самой границе. Чтобы получить палитру целиком по фото или логотипу, используйте палитру цветов из картинки. Если продукту нужна цельная система цветов, посмотрите услугу UX/UI-дизайна.
Частые вопросы
Как перевести HEX в RGB?
Разбейте шестизначный код на три пары и переведите каждую из шестнадцатеричной системы в десятичную. Для #2E5CF2 это 2E = 46, 5C = 92 и F2 = 242, то есть rgb(46, 92, 242). Конвертер на этой странице делает это сразу при вводе.
Как перевести RGB в HEX?
Переведите каждый канал от 0 до 255 в двузначное шестнадцатеричное число и соедините их после «#». Для rgb(255, 165, 0) получится FF, A5 и 00, то есть #FFA500. Введите значение в поле RGB и скопируйте HEX.
Что значит HEX из 8 знаков?
Последние два знака — альфа-канал, от 00 (полностью прозрачный) до FF (непрозрачный). #2E5CF280 — это цвет #2E5CF2 с непрозрачностью около 50%. Все современные браузеры понимают в CSS 8- и 4-значный HEX.
Что лучше для CSS: HSL или RGB?
Они описывают одни и те же цвета. HSL проще читать и править вручную: чтобы сделать цвет светлее, меняется только светлота. Для шкал и тем ещё удобнее OKLCH: одинаковые шаги в нём и выглядят одинаково.
Почему мой CMYK не совпадает с типографским?
Здесь используется стандартная формула без цветового профиля. Типографии переводят цвета по ICC-профилям своей бумаги и красок, а часть экранных цветов, особенно яркие синие и зелёные, напечатать точно нельзя. CMYK отсюда — ориентир.
Можно ли поделиться цветом по ссылке?
Да. Когда вы меняете цвет, в адресе страницы после «#» появляется HEX-код, например /products/hex-to-rgb#2e5cf2. Кто откроет ссылку, увидит тот же цвет.
Как проверить, читается ли текст на этом цвете?
Воспользуйтесь проверкой контраста под конвертером. Текущий цвет стоит фоном: выберите цвет текста и посмотрите отношение и вердикт по WCAG AA (4,5:1) и AAA (7:1).