不使用透明度获取颜色十六进制值的50%

Question

不使用透明度获取颜色十六进制值的50%

javascriptcsscolorsrgbhsl

3

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

场景描述：

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

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

在屏幕设计中，参考值为#9775fa用于路线颜色（数组中的颜色之一），#d5c7fd用于禁用颜色。设计师通过在基础颜色上面绘制50%不透明度的白色图层来获得第二种颜色。

我尝试通过JS获取相同的值，首先使用lighten函数，然后使用HSL函数，最后手动加亮基础颜色的每个RGB值。但没有一个真正起作用。

使用lighten函数，增加62的光亮度可以得到接近的值，但不是完全相同的值。使用HSL和手动加亮50%也不起作用。

这些是我得到的值：

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

所以，最终的问题是，这是否有可能实现？

这里有一个“游乐场”，以及我的实验的完整代码（第二列是参考的“禁用”颜色）。

非常感谢！

- Renato Rodrigues

你可以使用SASS或LESS来呈现颜色百分比，例如：background: lighten(#ff0000, 50%); - Nathaniel Flick

很抱歉，@NathanielFlick。我不能依赖CSS，我需要这个值来在前端上呈现各种东西，例如路线本身（svg），停靠标记，弹出式标题，卡片装饰等等。 - Renato Rodrigues

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Bemmu · Accepted Answer

通过将颜色与您提供的百分比的白色混合，我成功获得了更准确的结果。

我将 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交换。