Как смешать два цвета в HEX с заданным соотношением

Укажите два поддерживаемых цвета, задайте соотношение от 0 до 1 и запустите расчёт. Ответ содержит смешанный цвет, результаты умножения и экранного осветления в HEX, а также смешанный вариант в RGB. Его формат зависит от успешного разбора обоих входов.

Когда пригодится смешивание двух оттенков

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

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

Если поля не заполнены, подставляются #ff0000, #0000ff и 0.5. Такой набор позволяет сразу увидеть форму результата, однако для рабочей задачи лучше заменить его собственными значениями и явно проверить выбранное соотношение. Инструмент также показывает дополнительные варианты, чтобы сравнение не ограничивалось одним способом смешивания.

Порядок ввода и запуска расчёта

1. Введите в поле первого цвета HEX-запись с #, например #336699, или строку с тремя каналами в форме rgb(...). Для сокращённого варианта подойдёт #369: три цифры будут развёрнуты до шестизначной записи.

2. Укажите второе значение в одном из тех же поддерживаемых видов. Не используйте название цвета, hsl(...) или произвольную текстовую запись, потому что они не относятся к распознаваемым вариантам.

3. Задайте соотношение числом от 0 до 1. При значении 0 расчёт остаётся у первого цвета, при 1 переходит к второму. Число за пределами диапазона будет ограничено ближайшей границей. Если преобразовать введённое значение в число нельзя из-за его типа или значения, применяется 0.5.

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

5. Сопоставьте варианты с исходными цветами. Чтобы приблизить результат к первому оттенку, уменьшите соотношение; для движения ко второму увеличьте его. Меняйте один параметр за раз, так легче заметить влияние каждой правки.

Что означают варианты в ответе

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

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

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

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

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

Введите #ff0000 и #0000ff, укажите 0.5 и запустите расчёт. Затем измените только соотношение, чтобы сравнить направление перехода между исходными оттенками и форму новых значений в ответе. Проверяйте наличие всех предусмотренных представлений, а не конкретный оттенок без учёта округления.

Для корректной пары появятся смешанный цвет, умножение и экранное осветление в шестизначном HEX-виде, а также смешанный цвет в RGB; каналы будут округлены при выводе.

Ограничения

• Нераспознанный цвет даёт признак ошибки вместо рассчитанных значений, а повреждённая HEX-строка с # может завершить преобразование ошибкой.

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

• Причина: введены название цвета, hsl(...) или повреждённая HEX-строка с #. Действие: замените ввод на корректную HEX-запись либо текст с rgb(...), проверив допустимые символы и структуру перед новым расчётом.

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

Можно ли смешать короткие HEX-цвета?

Да, если запись начинается с # и содержит допустимые шестнадцатеричные символы. Вариант #369 перед расчётом разворачивается в шестизначную форму, поэтому его можно использовать вместо записи из шести цифр.

Поддерживается ли формат RGB?

Такой ввод подходит при наличии текста с шаблоном rgb(...) и тремя неотрицательными целыми каналами. Название цвета или другая произвольная запись не входит в набор распознаваемых вариантов для расчёта.

Что будет при соотношении вне диапазона или не числом?

Значение ограничивается диапазоном от 0 до 1, если оба цвета уже распознаны. При сбое преобразования применяется 0.5, поэтому для управляемого результата укажите число явно и проверьте его запись.