以编程方式为 Typescript 中的颜色添加不透明度

Question

我一直在尝试寻找一种方法来为颜色添加不透明度并在 Typescript 中检索结果颜色的十六进制代码。

是否可以在 Typescript 中执行以下操作：Color('#A25297').alpha(0.65)？

Answer 1

您可以使用 color 库来执行您要查找的操作。它具有类型定义，可以在打字稿中舒适地使用它。

安装：

npm i color
npm i @types/color

用法：

let Color = require('color');
let cmyColor = Color('#A25297').alpha(0.65);
let colorAsHex = cmyColor.hex();

...巧合的是，这正是您提出的语法。

编辑：

在实际尝试我提出的解决方案之后，很明显结果不会按预期工作。返回的十六进制值不考虑 alpha 的变化。但是，在库解析 this issue 以包含 8 个字母的十六进制表示法之后。

Answer 2

嗯，如果你编程的话，它是......

function addAlpha(color: string, opacity: number): string {
    // coerce values so ti is between 0 and 1.
    const _opacity = Math.round(Math.min(Math.max(opacity || 1, 0), 1) * 255);
    return color + _opacity.toString(16).toUpperCase();
}
addAlpha('FF0000', 1); // returns 'FF0000FF'
addAlpha('FF0000', 0.5); // returns 'FF000080'

当然，您可以通过使用正则表达式检查 color 是否具有正确的格式来改进此功能。

以编程方式为 Typescript 中的颜色添加不透明度

Programmatically add opacity to a color in Typescript

alpha

colors

opacity

typescript

编辑：