在不使用透明度的情况下获得 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

那么，到最后，真正的问题是，有可能实现吗？

Here is a "playground" and the full code of my experiments（第二列是参考“禁用”颜色。

非常感谢！

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;

我不确定你的百分比应该是多亮还是多暗，所以如果我弄错了，在这里用 1-p 交换 p。