Конвертер цвета

Преобразуйте любой цвет между HEX, RGB, HSL, HSV и CMYK. Выберите цвет или введите значение в любом формате — все остальные обозначения обновятся мгновенно, прямо в вашем браузере.

#f5530c

Нажмите, чтобы открыть палитру цветов

Цветовые форматы

HEX

RGB

HSL

HSV

hsv(18, 95%, 96%)

CMYK

cmyk(0%, 66%, 95%, 4%)

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

1
Выберите или вставьте цвет
Нажмите на образец цвета, чтобы открыть палитру, или вставьте значение в поле HEX, RGB или HSL. Весь инструмент подстраивается под выбранный вами цвет.
2
Редактируйте в любом формате
Вводите значение прямо в поле HEX, RGB или HSL. Все остальные обозначения — включая HSV и CMYK — пересчитываются в тот же момент, когда вы вносите изменение.
3
Смотрите все обозначения сразу
Один и тот же цвет показан сразу в пяти форматах, поэтому вы можете подобрать оттенок для CSS, печати и графических редакторов, не прибегая ко второму инструменту.

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

Практическое руководство по цветовым форматам

Один цвет, разные обозначения

HEX, RGB, HSL, HSV и CMYK — это не разные цвета; для экранной работы это разные способы записать одну и ту же точку в цветовом пространстве. Чистый красный можно записать как #ff0000, rgb(255, 0, 0) или hsl(0, 100%, 50%), и все три варианта отрисуются совершенно одинаково. Выбор обозначения сводится к тому, с каким из них проще рассуждать о стоящей перед вами задаче, и именно поэтому конвертер, показывающий их рядом, экономит реальное время. Вы выбираете формат, который подходит вашему инструменту, и копируете его, вместо того чтобы считать вручную.

Единственное исключение — CMYK: он рассчитан на чернила, а не на свет, и потому не отображается на остальные форматы идеально. Об этом стоит помнить, и к этому моменту мы ещё вернёмся ниже.

HEX и RGB — это одни и те же числа

RGB описывает цвет тремя каналами — красным, зелёным и синим, каждый в диапазоне от 0 до 255, смешиваемыми как свет. HEX — это просто те же самые три числа, записанные в шестнадцатеричной системе, по две шестнадцатеричные цифры на канал. Так в #f5530c часть f5 — это красный канал, то есть 245, часть 53 — зелёный, то есть 83, а 0c — синий, то есть 12, что в точности даёт rgb(245, 83, 12). Поскольку один байт хранит значения от 0 до 255, каждому каналу нужно ровно две шестнадцатеричные цифры, и преобразование между двумя форматами происходит без потерь и напрямую.

Сокращённый HEX — это удобство: трёхзначный код удваивает каждую цифру, поэтому #f50 разворачивается в #ff5500. Этот инструмент читает сокращённую запись так же, как браузер, и принимает код с ведущим знаком решётки или без него, в верхнем или нижнем регистре.

Альфа-канал: RGBA и HSLA

Добавление альфа-канала делает цвет частично прозрачным. RGBA и HSLA добавляют четвёртое значение — непрозрачность от 0 для полной прозрачности до 1 для полной непрозрачности, поэтому rgba(245, 83, 12, 0.5) — это тот же оранжевый при половинной непрозрачности. Современный CSS поддерживает и восьмизначный HEX, где последние две цифры кодируют альфу в виде байта, так что непрозрачность в половину — это примерно шестнадцатеричная пара 80, приписанная к цвету.

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

Почему HSL проще подстраивать

HSL описывает цвет так, как о нём думает человек: тон (hue) — это положение на цветовом круге от 0 до 360 градусов, насыщенность — насколько он яркий в процентах, а светлота — насколько он светлый в процентах. Такая структура делает ручную настройку интуитивной. Чтобы получить более тёмный оттенок того же цвета, вы понижаете светлоту, оставляя тон и насыщенность нетронутыми; чтобы приглушить цвет, вы понижаете насыщенность. Сделать то же самое в чистом RGB означает менять все три канала согласованно, что гораздо труднее прикинуть на глаз.

Именно поэтому HSL блестяще подходит для построения цветовых систем. Нужно состояние при наведении чуть темнее базового или ряд образцов с общим тоном, но с шагом по светлоте? Подвиньте одно число HSL. HSV, также записываемый как HSB, тесно связан с ним, но дополняет тон и насыщенность значением (value), то есть яркостью, а не светлотой, и это та модель, которую открывают многие графические редакторы и палитры цветов, поэтому умение читать оба формата поддерживает вашу свободу при работе с разными инструментами дизайна.

Разбор примера: белый, чёрный и средний цвет

Крайние точки выглядят чисто. Белый — это #ffffff, то есть rgb(255, 255, 255) и hsl(0, 0%, 100%): все каналы на максимуме, или в терминах HSL — полная светлота при нулевой насыщенности, так что тон не важен. Чёрный — это #000000, rgb(0, 0, 0) и hsl(0, 0%, 0%): всё на нуле. Средний серый находится посередине, около #808080 и rgb(128, 128, 128), что в HSL равно hsl(0, 0%, 50%) и наглядно показывает, что у любого нейтрального цвета нулевая насыщенность, а светлота отслеживает его яркость.

Теперь реальный цвет: тот же оранжевый, #f5530c, читается как rgb(245, 83, 12) и примерно как hsl(18, 92%, 50%). Форма HSL с первого взгляда говорит вам, что это тёплый тон рядом с красно-оранжевым, сильно насыщенный и средней светлоты — информация, которую шестнадцатеричная строка скрывает. Вставьте любое из этих значений в инструмент и наблюдайте, как остальные заполняются мгновенно.

CMYK и пределы перехода от экрана к печати

CMYK расшифровывается как cyan, magenta, yellow и key, где key — это чёрный, и это субтрактивная модель, созданная для чернил на бумаге, а не для света на экране. Поскольку она работает за счёт вычитания света, который отражает бумага, она не способна воспроизвести каждый яркий цвет, доступный светящемуся дисплею, поэтому насыщенный экранный синий или зелёный часто выходит в печати более тусклым. Значения CMYK, которые сообщает этот инструмент, — это прямое математическое преобразование из RGB, и они действительно полезны как отправная точка, но они не заменяют рабочий процесс печати с управлением цветом.

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

Именованные цвета и скачок к широкому охвату

CSS также поставляется примерно со 150 именованными цветами — словами вроде tomato, rebeccapurple и slategray, каждое из которых является лишь псевдонимом для конкретного шестнадцатеричного значения. Они удобны для быстрого прототипирования и для запоминающихся оттенков, хотя для настоящей системы дизайна явные значения HEX или HSL дают вам более тонкий контроль и согласованность. Именованные цвета — это удобные ярлыки, а не отдельное цветовое пространство.

Заглядывая вперёд, более новые цветовые функции CSS выходят за пределы классического охвата sRGB, который предполагают эти форматы. Функции для таких пространств, как перцептивно равномерный oklch и более широкий display-p3, способны выразить более насыщенные цвета, чем могут достичь HEX и RGB, и это важно по мере того, как современные экраны становятся всё более совершенными. Значения HEX, RGB, HSL и HSV, с которыми работает этот инструмент, остаются повседневной валютой веба, и понимание их — это фундамент, на котором можно уверенно осваивать те новые пространства.

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

Как преобразовать цвет из HEX в RGB?

Вставьте свой HEX-код, например #f5530c, в поле HEX. Значение RGB — в данном случае rgb(245, 83, 12) — мгновенно появится под ним вместе с HSL, HSV и CMYK. Преобразование точное, поскольку HEX и RGB описывают одни и те же 8-битные цветовые каналы.

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

Оба формата описывают цвет через его тон, но HSL дополняет его насыщенностью и светлотой, тогда как HSV (также называемый HSB) использует насыщенность и значение (value), то есть яркость. HSL широко применяется в CSS, а HSV встречается во многих графических редакторах и палитрах цветов. Этот конвертер показывает оба формата, чтобы вы могли переходить между инструментами дизайна, не считая вручную.

Поддерживается ли сокращённый трёхзначный HEX?

Да. Сокращённый код вроде #f50 читается как #ff5500 — ровно так, как его разворачивает браузер. HEX можно вводить с ведущим знаком решётки или без него, в верхнем или нижнем регистре.

Для чего используется CMYK?

CMYK — голубой, пурпурный, жёлтый и ключевой (чёрный) — это цветовая модель чернил, применяемая в печати. Показанные здесь значения — это прямое математическое преобразование из RGB; для печати, где важна точность цвета, всегда сверяйтесь с конкретным профилем вашего принтера, ведь экраны и чернила воспроизводят цвет по-разному.

Загружаются ли мои данные на сервер?

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