Как перевести HEX-код цвета в RGB и HSL

Введите HEX-код цвета или оставьте поле пустым для значения #ff5733, затем запустите преобразование. Инструмент покажет представления RGB и HSL, HEX-записи и классификацию светлоты.

Что можно получить из HEX-цвета

Этот инструмент помогает перевести цвет из HEX-записи в два привычных представления: RGB и HSL. Он подходит, когда у вас есть шестнадцатеричный код цвета, а для макета, таблицы стилей или проверки палитры нужны числовые компоненты и текстовые записи в других моделях. Вводом служит именно HEX-значение, а не готовые значения RGB или HSL.

Цвет можно передать с начальным символом # или без него. Если поле оставить пустым, инструмент использует документированное значение по умолчанию #ff5733. Поэтому перед началом стоит решить, нужно ли проверить свой цвет или получить результат для значения, подставляемого автоматически.

Результат предназначен для чтения и сопоставления представлений одного цвета. В нём предусмотрены текстовые HEX-записи в верхнем и нижнем регистре, RGB и HSL, числовые компоненты RGB и HSL, а также классификация по светлоте. Значения оттенка, насыщенности и светлоты в HSL округляются до целых чисел.

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

1. Подготовьте HEX-код цвета. Например, возьмите #336699. Если в исходной записи символа # нет, это не мешает обработке: перед разбором он добавляется, а затем убирается на этапе чтения значения.

2. Введите код в поле для шестнадцатеричного цвета. Не подставляйте туда RGB- или HSL-значения, поскольку инструмент разбирает именно HEX-ввод. Если вы хотите проверить значение по умолчанию, оставьте поле пустым.

3. Запустите преобразование. Для трёхзначной записи, например #369, каждый символ повторяется перед преобразованием. Такая запись рассматривается как сокращённая форма шестизначного HEX-кода.

4. Просмотрите сформированный результат. Сначала найдите текстовые представления: шестизначный HEX в верхнем и нижнем регистре, RGB и HSL. Затем при необходимости используйте числовые компоненты RGB и HSL для сверки или переноса в другой рабочий материал.

5. Учтите округление HSL. Оттенок, насыщенность и светлота выводятся целыми числами, поэтому дробные значения, которые могли бы появиться при расчёте, в итоговой HSL-записи не сохраняются.

6. Проверьте классификацию светлоты, если она нужна для вашей задачи. Она определяется по взвешенной яркости RGB: признак принимает значение true только тогда, когда расчёт даёт результат больше 128. Значение 128 не попадает в условие «светлый».

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

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

Как читать результат и учитывать границы

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

HSL нужно читать с учётом округления: три параметра уже приведены к целым значениям. Если вы сравниваете результат с расчётом, где используются дроби, небольшое расхождение после округления ожидаемо в пределах самой операции округления. Это не означает, что инструмент принял другой HEX-код.

Классификация светлоты не является ещё одной цветовой моделью. Это отдельный логический результат, зависящий от взвешенной яркости RGB и порога строго больше 128. Цвет с расчётным значением, равным 128, не получает значение true по этому правилу.

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

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

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

Практический пример

Дизайнер проверяет HEX-код #336699, чтобы сопоставить его с RGB и HSL перед переносом цвета в макет.

Введите #336699 и запустите преобразование, затем проверьте перечисленные представления и значение классификации.

Для корректного ввода результат содержит HEX-записи в верхнем и нижнем регистре, RGB и HSL в текстовом и числовом виде, а также логическую классификацию светлоты.

Ограничения

• Инструмент разбирает HEX-ввод, а не RGB или HSL; ошибочный разбор возвращается внутри результата, поэтому статус нужно читать вместе с содержимым. Переключатель истории не меняет конвертацию.

Частые ошибки

• Ошибка: считать отметку успешной обработки доказательством корректного цвета. Причина может быть в том, что HEX-строка не разобралась, а ошибка была возвращена внутри результата. Исправление: проверяйте указание ошибки и наличие цветовых представлений, затем введите корректный HEX-код.

Частые вопросы

Можно ли ввести HEX без символа # или использовать короткую запись?

Да, начальный символ # можно не указывать: перед разбором он добавляется автоматически. Трёхзначная запись также расширяется повторением каждого символа перед преобразованием.

Что произойдёт, если оставить поле пустым или ввести неверный HEX?

Если поле пустое, используется значение #ff5733. Это отличается от ошибочного ввода: при ошибке разбора возвращается результат с указанием ошибки, даже если он помечен как успешный.

Влияет ли переключатель истории на конвертацию цвета?

Нет, по проверенному поведению переключатель истории по умолчанию выключен и не добавляет историю и не изменяет результат преобразования.