Русский
Как перевести HEX в RGB (и обратно)
Конвертер цветов переводит HEX-код в RGB, HSL, HSV, CMYK и OKLCH прямо по мере ввода и работает в обратную сторону: вставьте rgb(255, 99, 71) в любое поле и получите #FF6347. Каждое поле принимает любой формат, так что искать нужное не придётся.
Если хотите посчитать вручную: HEX-код — это просто три числа, записанные в шестнадцатеричной системе. Возьмите #3B82F6, разбейте на пары и переведите каждую:
82 → 8×16 + 2 = 130
F6 → 15×16 + 6 = 246
#3B82F6 = rgb(59, 130, 246)
Из RGB в HEX — наоборот. Разделите каждый канал на 16: целая часть — первая цифра, остаток — вторая. 255 — это 15 и 15 в остатке, то есть FF. 99 — это 6 и 3 в остатке, то есть 63. Поэтому томатно-красный rgb(255, 99, 71) превращается в #FF6347.
Популярные цвета в HEX, RGB и HSL
Эти коды полезно узнавать с первого взгляда. Все они заодно являются допустимыми названиями цветов в CSS, а инструмент показывает ближайшее название для любого введённого цвета (#3B82F6 ближе всего к dodgerblue, хотя и не совпадает с ним).
| Название | HEX | RGB | HSL |
|---|---|---|---|
| white | #FFFFFF | 255, 255, 255 | 0, 0%, 100% |
| black | #000000 | 0, 0, 0 | 0, 0%, 0% |
| red | #FF0000 | 255, 0, 0 | 0, 100%, 50% |
| tomato | #FF6347 | 255, 99, 71 | 9, 100%, 64% |
| gold | #FFD700 | 255, 215, 0 | 51, 100%, 50% |
| teal | #008080 | 0, 128, 128 | 180, 100%, 25% |
| navy | #000080 | 0, 0, 128 | 240, 100%, 25% |
| rebeccapurple | #663399 | 102, 51, 153 | 270, 50%, 40% |
Короткие, длинные и прозрачные HEX-коды
HEX бывает четырёх длин. Три цифры — сокращённая запись, где каждая цифра удваивается, так что #F60 означает #FF6600. Шесть цифр — обычная форма. Восемь цифр добавляют в конце альфа-канал: #3B82F680 — тот же синий с непрозрачностью 128 из 255, примерно 50%. Четыре цифры — короткая версия этого же. Браузеры давно понимают все четыре варианта, но некоторые графические редакторы и почтовые клиенты до сих пор принимают только шесть цифр, так что при сомнениях вставляйте шестизначный код, а прозрачность задавайте отдельно.
Какой формат выбрать?
- HEX — для всего, что вставляется в графический редактор, брендбук или CMS. Он короткий, и его никто не прочитает неправильно.
- RGB / RGBA — когда нужна прозрачность в старом CSS или в коде для canvas на JavaScript.
- HSL — когда хочется менять цвет осмысленно. Уменьшите последнее число — цвет станет темнее, уменьшите среднее — серее. Состояния при наведении так писать гораздо проще.
- OKLCH — для новых дизайн-систем на CSS. Его светлота соответствует тому, что видит глаз, поэтому два цвета с одинаковым L действительно выглядят одинаково светлыми, чего HSL не умеет (жёлтый при светлоте 50% кажется гораздо ярче синего при тех же 50%).
- CMYK — только как примерный ориентир для печати. Цифры здесь получены по простой формуле, а не по профилю принтера, поэтому буклет не совпадёт с экраном в точности. Уточните в типографии, каким профилем они пользуются.
- HSV / HSB — в основном чтобы совпадать с пипеткой в Photoshop или Figma, которые его используют.
Проверка контрастности: что проходит по WCAG?
WCAG 2 сравнивает относительную яркость текста и фона и выражает её отношением от 1:1 (одинаковые цвета) до 21:1 (чёрный на белом). Пороги фиксированные:
| Уровень | Обычный текст | Крупный текст (24px или 18,66px жирный) |
|---|---|---|
| AA | 4,5:1 | 3:1 |
| AAA | 7:1 | 4,5:1 |
Иконкам, рамкам полей ввода и индикаторам фокуса по WCAG 2.1 нужно 3:1. Вот как реальные цвета выглядят в роли текста на белом:
| Цвет текста на #FFFFFF | Отношение | Результат |
|---|---|---|
| #949494 | 3,03:1 | Только крупный текст |
| #777777 | 4,48:1 | Не проходит AA для основного текста, совсем чуть-чуть |
| #767676 | 4,54:1 | Проходит AA |
| #595959 | 7,00:1 | Проходит AAA |
| #3B82F6 | 3,68:1 | Только крупный текст и кнопки |
| #008080 | 4,77:1 | Проходит AA |
Строка с #777777 — классическая ловушка. Он выглядит точно так же, как #767676, а проверка с одним знаком после запятой покажет 4,5, но правило гласит «не менее 4,5», а 4,48 — меньше. Этот инструмент никогда не округляет непроходящее отношение до порога.
Если цвет не проходит, проверка ищет ближайший оттенок того же тона, который проходит. Для #3B82F6 на белом она предложит #1E6FF5 для AA (4,52:1) и #0950C5 для AAA (7,08:1). Нажмите Применить, чтобы загрузить его, или скопируйте прямо в таблицу стилей. Яркие жёлтые и оранжевые обычно приходится сильно затемнять, прежде чем они сгодятся для текста на белом; такие цвета лучше оставить для фона, а поверх писать тёмным текстом.
Палитра и цвета с картинки
Панель палитры строит шкалу светлых и тёмных оттенков от 50 до 950 (такие названия использует Tailwind), а также комплементарный, аналоговый, триадный, раздельно-комплементарный, квадратный и монохромный наборы. Нажмите на любой образец, чтобы скопировать его, а затем экспортируйте весь набор как пользовательские свойства CSS, переменные SCSS, JSON или блок цветов Tailwind либо скачайте PNG-полоску, чтобы вставить в слайд или отправить клиенту.
Чтобы подобрать цвет с логотипа или фото, загрузите картинку и нажмите на нужное место. Один пиксель в JPG из-за шумов сжатия может на несколько тонов отличаться от того, что вы видите, поэтому для фотографий переключитесь на усреднение 3×3 или 5×5. В Chrome и Edge кнопка Взять с экрана берёт цвет из любого места дисплея, в том числе из других окон. Ничего не загружается на сервер: картинка обрабатывается в вашем браузере.
Частые вопросы
Как перевести HEX в RGB?
Разбейте шесть символов на три пары и переведите каждую пару из шестнадцатеричной системы в число от 0 до 255. #3B82F6 даёт 3B = 59, 82 = 130 и F6 = 246, то есть rgb(59, 130, 246).
Как перевести RGB в HEX?
Запишите каждый канал двузначным шестнадцатеричным числом и соедините их после #. rgb(255, 99, 71) даёт FF, 63 и 47, значит, HEX-код — #FF6347, это цвет CSS tomato.
Какой контраст нужен для уровня WCAG AA?
Обычному тексту нужно не менее 4,5:1, крупному (24px или 18,66px жирным) — 3:1. Серый #767676 на белом даёт 4,54:1 — это самый светлый серый, который ещё проходит для основного текста.
Что означает 8-значный HEX-код цвета?
Последние две цифры — это альфа-канал (непрозрачность). #3B82F680 — тот же синий с непрозрачностью 128/255, примерно 50%, в CSS это rgba(59, 130, 246, 0.5).
Что означает 3-значный код вроде #F60?
Каждая цифра удваивается, так что #F60 — это #FF6600. Короткая запись возможна, только если обе цифры в каждой паре одинаковы, поэтому у #3B82F6 нет 3-значного варианта.
Достаточно ли точен CMYK для печати?
Это отправная точка, а не цветопроба. Инструмент использует стандартную формулу, так что #3B82F6 становится cmyk(76%, 47%, 0%, 4%), но реальное смешение красок зависит от цветового профиля принтера и бумаги, поэтому узнайте значения в своей типографии.
Как узнать HEX-код цвета на фотографии?
Загрузите изображение в панель выше и нажмите на нужное место: инструмент считает этот пиксель. Для фотографий переключитесь на усреднение 3×3 или 5×5, потому что отдельный пиксель часто шумнее цвета, который вы видите.
Чем HSL отличается от HSV?
Оба начинаются с одного и того же тона, но светлота 100% в HSL — это всегда белый, а яркость 100% в HSV — самый яркий вариант цвета. Чистый красный — это hsl(0, 100%, 50%) и hsv(0, 100%, 100%).