Получить 50% шестнадцатеричного значения цвета без использования прозрачности

Question

Мне нужно получить значение цвета более светлой версии существующего гексагона на 50%. Однако он должен быть на 100% непрозрачным, я не могу использовать opacity, rgba, hexa или hsla.

Сценарий:

Я рисую маршруты на карте, каждый из них имеет свой цвет, основанный на жестко заданном массиве из 48 возможных шестнадцатеричных значений.

Когда редактируется один из этих маршрутов, он должен отображаться как «отключен» (50% от исходный цвет).

В дизайне экрана эталонными значениями были #9775fa для цвета маршрута (один из цветов в массиве) и #d5c7fd для отключенного цвета , Этот второй цвет был получен дизайнером, который рисовал белый слой с непрозрачностью 50% поверх основного цвета.

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

Используя lighten, добавив 62 света, я получил близкое значение, но не точное. Использование HSL и молния вручную на 50% тоже не сработали.

Вот значения, которые я получил:

 Base color: #9775fa
 "Disabled color": #d5c7fd
 Lighten by 62: #d5b3ff
 HSL 50%: #e3b0ff
 Ligheting 50% by hand: #e3b0ff

Итак, в конце, реальный вопрос: можно ли этого достичь?

Вот "игровая площадка" и полный код моих экспериментов (во втором столбце есть ссылка "отключен" цвет.

Большое спасибо!

Answer 1

Мне удалось получить более точные результаты, смешав цвет с белым при заданном процентном соотношении.

Я изменил lightenByPercentage следующим образом:

let p = percentage / 100;
var r = "0x" + hex[0] + hex[1];
var g = "0x" + hex[2] + hex[3];
var b = "0x" + hex[4] + hex[5];
r = Math.ceil(256 * (1-p) + (r * p));
g = Math.ceil(256 * (1-p) + (g * p));
b = Math.ceil(256 * (1-p) + (b * p));

r = r <= 255 ? r : 255;
g = g <= 255 ? g : 255;
b = b <= 255 ? b : 255;

Я не уверен, должен ли был быть ваш процент, насколько он светлый или насколько он темный, поэтому, если я понял это неправильно обойти обмен p с 1-р здесь.