TinyColor 技术文档

1. 安装指南

在 Node.js 中安装

你可以通过 npm 安装 tinycolor2：

npm install tinycolor2

安装完成后，你可以在你的脚本中使用它：

var tinycolor = require("tinycolor2");
var color = tinycolor("red");

或者在模块中使用：

import tinycolor from "tinycolor2";
var color = tinycolor("red");

在浏览器中使用

ESM 模块

你可以通过下载 npm/esm/tinycolor.js 或使用 https://esm.sh/tinycolor2 来使用 ESM 模块：

<script type='module'>
import tinycolor from "https://esm.sh/tinycolor2";
var color = tinycolor("red");
</script>

UMD 模块

你也可以直接在 HTML 中使用 UMD 文件：

<script type='text/javascript' src='tinycolor.js'></script>
<script type='text/javascript'>
var color = tinycolor("red");
</script>

2. 项目使用说明

基本用法

你可以通过调用 tinycolor(input) 或 new tinycolor(input) 来创建一个颜色对象。该对象包含多种属性和方法，用于颜色操作和转换。

输入格式

TinyColor 支持多种颜色输入格式，包括：

• Hex, 8-digit (RGBA) Hex
• RGB, RGBA
• HSL, HSLA
• HSV, HSVA
• Named Colors

例如：

tinycolor("#000");
tinycolor("rgb (255, 0, 0)");
tinycolor("hsl(0, 100%, 50%)");
tinycolor("RED");

对象输入

你也可以通过对象输入来创建颜色：

tinycolor({ r: 255, g: 0, b: 0 });
tinycolor({ h: 0, s: 100, l: 50 });

3. 项目 API 使用文档

方法

getFormat()

返回用于创建 tinycolor 实例的格式：

var color = tinycolor("red");
color.getFormat(); // "name"

getOriginalInput()

返回传递给构造函数的原始输入：

var color = tinycolor("red");
color.getOriginalInput(); // "red"

isValid()

返回一个布尔值，指示颜色是否成功解析：

var color1 = tinycolor("red");
color1.isValid(); // true

getBrightness()

返回颜色的感知亮度，范围为 0-255：

var color1 = tinycolor("#fff");
color1.getBrightness(); // 255

isLight()

返回一个布尔值，指示颜色的感知亮度是否为浅色：

var color1 = tinycolor("#fff");
color1.isLight(); // true

isDark()

返回一个布尔值，指示颜色的感知亮度是否为深色：

var color1 = tinycolor("#fff");
color1.isDark(); // false

getLuminance()

返回颜色的感知亮度，范围为 0-1：

var color1 = tinycolor("#fff");
color1.getLuminance(); // 1

getAlpha()

返回颜色的 alpha 值，范围为 0-1：

var color1 = tinycolor("rgba(255, 0, 0, .5)");
color1.getAlpha(); // 0.5

setAlpha()

设置当前颜色的 alpha 值，范围为 0-1：

var color = tinycolor("red");
color.setAlpha(.5);
color.getAlpha(); // .5

字符串表示

toHsv()

返回颜色的 HSV 表示：

var color = tinycolor("red");
color.toHsv(); // { h: 0, s: 1, v: 1, a: 1 }

toHsl()

返回颜色的 HSL 表示：

var color = tinycolor("red");
color.toHsl(); // { h: 0, s: 1, l: 0.5, a: 1 }

toHex()

返回颜色的 Hex 表示：

var color = tinycolor("red");
color.toHex(); // "ff0000"

toRgb()

返回颜色的 RGB 表示：

var color = tinycolor("red");
color.toRgb(); // { r: 255, g: 0, b: 0, a: 1 }

颜色修改

lighten()

将颜色变亮，默认增加 10：

tinycolor("#f00").lighten().toString(); // "#ff3333"

darken()

将颜色变暗，默认减少 10：

tinycolor("#f00").darken().toString(); // "#cc0000"

saturate()

增加颜色的饱和度，默认增加 10：

tinycolor("hsl(0, 10%, 50%)").saturate().toString(); // "hsl(0, 20%, 50%)"

desaturate()

减少颜色的饱和度，默认减少 10：

tinycolor("#f00").desaturate().toString(); // "#f20d0d"

4. 项目安装方式

通过 npm 安装

npm install tinycolor2

在浏览器中使用

你可以通过下载 ESM 或 UMD 文件，或者直接使用 CDN 来在浏览器中使用 tinycolor2。

在 Node.js 中使用

通过 require 或 import 引入 tinycolor2：

var tinycolor = require("tinycolor2");

或者：

import tinycolor from "tinycolor2";