在不使用透明度的情况下获得 50% 的颜色十六进制值

Question

我需要获取现有六角颜色的 50% 更亮版本的颜色值。但是它必须是 100% 不透明的，我不能使用 opacity、rgba、hexa 或 hsla.

场景：

我根据 48 个可能的十六进制值的硬编码数组在地图上绘制路线，每条路线都有不同的颜色。

当其中一条路线被编辑时，它应该显示为 "disabled"（原始颜色的 50%）。

在画面设计中，路由颜色（数组中的一种颜色）参考值为#9775fa，禁用参考值为#d5c7fd ] 颜色。这第二种颜色是设计师在基色之上绘制一个 50% 不透明度的白色层获得的。

我试图通过 JS 获得相同的值，首先使用变亮函数，然后使用 HSL 函数，最后手动变亮基色的每个 RGB 值。 None 其中确实有效。

使用 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（第二列是参考"disabled"颜色。

非常感谢！

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-p 交换。

在不使用透明度的情况下获得 50% 的颜色十六进制值

Obtain 50% of a color hex value without using transparency

javascript

css

hsl

rgb

colors