Tinycolor2

Tinycolor2是一个小型的JavaScript库，用于操作和转换颜色，并提供了对HSL、HSV、RGB和HEX颜色空间的支持。它是tinycolor的升级版。

特点

• 轻量级（<1KB）。
• 支持色彩空间：HSL、HSV、RGB、HEX。
• 支持alpha通道。
• 高效的性能。
• TypeScript支持。

安装

通过npm安装：

npm install tinycolor2

或者通过CDN：

<script src="https://cdn.jsdelivr.net/npm/tinycolor2@2.2.1/dist/tinycolor-min.js"></script>

文档

以下是一些常见的用法示例。您也可以在官方文档中了解更多。

创建实例

您可以通过传递一个字符串或对象来创建一个新的Tinycolor2实例，表示颜色：

const color1 = tinycolor("red");
const color2 = tinycolor({ r: 255, g: 0, b: 0 });

转换颜色空间

您可以将颜色从一种空间转换为另一种空间。以下是一些示例：

const color = tinycolor("red");

// RGB -> HEX
color.toHex(); // #ff0000

// RGB -> HSL
color.toHsl(); // { h: 0, s: 1, l: 0.5 }

// RGB -> HSV
color.toHsv(); // { h: 0, s: 1, v: 1 }

// HEX -> RGB
tinycolor("#ff0000").toRgb(); // { r: 255, g: 0, b: 0 }

// HSL -> RGB
tinycolor({ h: 0, s: 1, l: 0.5 }).toRgb(); // { r: 255, g: 0, b: 0 }

// HSV -> RGB
tinycolor({ h: 0, s: 1, v: 1 }).toRgb(); // { r: 255, g: 0, b: 0 }

操作颜色

您可以对颜色进行一些基本的操作，例如增加/减少亮度、增加/减少饱和度、增加/减少透明度等等：

const color = tinycolor("red");

// 增加亮度
color.lighten(10); // tinycolor("#ff6666")

// 减少亮度
color.darken(10); // tinycolor("#cc0000")

// 增加饱和度
color.saturate(10); // tinycolor("#ff1a1a")

// 减少饱和度
color.desaturate(10); // tinycolor("#ff3333")

// 增加透明度
color.setAlpha(0.5); // tinycolor("rgba(255,0,0,0.5)")

// 减少透明度
color.setAlpha(0.2); // tinycolor("rgba(255,0,0,0.2)")

总结

Tinycolor2是一个小型但功能强大的库，用于操作和转换颜色。它支持多种颜色空间，并提供了基本的颜色操作，例如增加/减少亮度、饱和度、透明度等等。在您开发需要涉及颜色操作的项目时，Tinycolor2将是您值得尝试的选择。