Перейти к основному содержимому
Tooletto

Конвертер HEX в RGB

Готовый вариант «Выбор и конвертер цвета»

Конвертируйте hex-код цвета в значения RGB. Сокращённая запись вроде #abc корректно разворачивается в #aabbcc, а рядом показаны все остальные форматы — берите тот, что нужен вашему коду.

  • Файлы никогда не покидают ваше устройство
  • Бесплатно, без регистрации
  • Без водяных знаков
  • Работает офлайн после загрузки
Loading tool…

Как пользоваться: выбор и конвертер цвета

  1. 1

    Выберите цвет

    Используйте палитру или введите значение HEX либо RGB напрямую.

  2. 2

    Скопируйте нужный формат

    HEX, RGB, HSL, HSV и CMYK отображаются одновременно.

  3. 3

    Проверьте контраст

    Задайте цвет фона, чтобы увидеть, проходит ли текст по уровням WCAG AA и AAA.

Почему существуют сокращённые hex-коды и как они разворачиваются

И CSS, и графические редакторы поддерживают сокращённую трёхсимвольную hex-запись — `#abc` — как компактный способ записать цвет, у которого в каждом канале случайно повторяется одна и та же цифра. Разворачивается она путём удвоения каждого символа, а не дополнения нулями: `#abc` превращается в `#aabbcc`, а не в `#0a0b0c`. Это различие важно, потому что два возможных варианта разворачивания дают действительно разные цвета, и перепутать их при ручном пересчёте — распространённая и легко допустимая ошибка: правильное преобразование обязано именно удваивать каждую цифру, а не дополнять её нулём.

Как правильно читать значения RGB в разных инструментах

Значения RGB принято записывать как три числа от 0 до 255 — для красного, зелёного и синего каналов соответственно, но точная запись зависит от того, куда их вставляют: CSS принимает `rgb(171, 187, 204)` с запятыми, некоторые графические редакторы ожидают те же три числа через пробел вообще без запятых, а в отдельных случаях каждый канал выражается дробью от 0 до 1 вместо целого числа от 0 до 255. Видя значение сразу разложенным здесь, не нужно вручную пересчитывать его под ту конкретную запись, которую ожидает нужный инструмент или кодовая база.

Быстрый способ проверить значение, взятое со скриншота или из файла дизайна

Hex-код, скопированный пипеткой из дизайн-инструмента, брендбука или инструмента для определения цвета по скриншоту, часто оказывается единственным доступным значением — без сопутствующей раскладки в RGB. Вставив его здесь, вы сразу увидите эквиваленты в RGB, HSL и CMYK — это быстрее, чем искать каждое преобразование по отдельности или считать вручную.

Часто задаваемые вопросы

В чём разница между HEX, RGB и HSL?

HEX и RGB описывают одно и то же — сколько смешать красного, зелёного и синего — просто в разной записи. HSL переформулирует это через оттенок, насыщенность и светлоту, с чем гораздо проще работать: чтобы сделать цвет светлее, достаточно изменить одно число, а не подбирать три сразу.

Что означает коэффициент контрастности?

Он сравнивает относительную яркость двух цветов по шкале от 1 (одинаковые цвета) до 21 (чёрный на белом). WCAG требует не менее 4.5:1 для обычного текста и 3:1 для крупного текста на уровне AA, а на уровне AAA — 7:1 и 4.5:1 соответственно.

Почему цвет не проходит проверку контраста, хотя на вид всё нормально?

Потому что коэффициент рассчитывается по относительной яркости, а не по тому, насколько разными выглядят два цвета. Два ярких цвета похожей яркости — например, оранжевый на красном — выглядят различимыми, но почти не дают контраста по яркости и становятся нечитаемыми для людей со слабым зрением или на экране под ярким солнцем.

Насколько точна конвертация в CMYK для печати?

Это стандартное арифметическое преобразование — отправная точка, а не результат с управлением цветом. Для реальной печати нужен ICC-профиль конкретного принтера и бумаги, потому что CMYK в принципе не может воспроизвести многие яркие цвета RGB.