颜色处理util/color

颜色计算

❐<input type="color" id="input" value="#ff0000" style="padding: 0">
<br>
<input type="number" id="input_value" step="0.1" min="-1" max="1" value="0.1">
<button onclick="input.value=darken(input.value, +input_value.value)">更暗</button>
<button onclick="input.value=lighten(input.value, +input_value.value)">更亮</button>
<button onclick="input.value=mix(input.value, '#fff', +input_value.value)">更透明</button>
<br>
<input type="color" id="input_mix" value="#0000ff" style="padding: 0">
<button onclick="input.value=mix(input.value, input_mix.value)">混合</button>

另参考

http://en.wikipedia.org/wiki/HSL_color_space

HSL to RGB color conversion

RGB to HSL color conversion

API: 全局; RGB 接口; HSL 接口; HSV 接口; Color 类型

API

全局

函数描述

⮞ toRGB(color)(color:Color):RGB

将任意颜色格式转为 RGB 对象格式。

参数	类型	描述	默认值
`color*`	`Color`		—

返回值

类型：RGB

返回包含 RGB 信息的对象。如果原对象已经是 RGB 格式则返回原对象。

示例

❐toRGB("#000") // {r: 0, g: 0, b: 0}

❐toRGB("#ff0000") // {r: 255, g: 0, b: 0}

❐toRGB("#ff0000ff") // {r: 255, g: 0, b: 0, a: 1}

❐toRGB("rgb(255,0,0)") // {r: 255, g: 0, b: 0, a: 1}

❐toRGB("rgba(255,0,0,0.9)") // {r: 255, g: 0, b: 0, a: 0.9}

❐toRGB("hsl(255,0,0)") // {r: 255, g: 0, b: 0, a: 0.9}

❐toRGB("hsla(255,0,0,0.9)") // {r: 255, g: 0, b: 0, a: 0.9}

❐toRGB({h:255, s: 0, l: 0}) // {r: 255, g: 0, b: 0}

❐toRGB({h:255, s: 0, l: 0, a: 0}) // {r: 255, g: 0, b: 0}

将任意颜色格式转为 RGB 对象格式。

⮞ toHSL(color)(color:Color):HSL

将任意颜色格式转为 HSL 对象格式。

参数	类型	描述	默认值
`color*`	`Color`		—

返回值

类型：HSL

返回包含 HSL 信息的对象。如果原对象已经是 HSL 格式则返回原对象。

示例

❐toHSL("#000") // {h: 0, s: 0, l: 0}

将任意颜色格式转为 HSL 对象格式。

⮞ toHSV(color)(color:Color):HSV

将任意颜色格式转为 HSV 对象格式。

参数	类型	描述	默认值
`color*`	`Color`		—

返回值

类型：HSV

返回包含 HSV 信息的对象。

示例

❐toHSV("#000") // {h: 0, s: 0, v: 0}

将任意颜色格式转为 HSV 对象格式。

⮞ toInt(color)(color:Color):number

将任意格式的颜色转为 32 位整数。

参数	类型	描述	默认值
`color*`	`Color`		—

返回值

类型：number

返回 32 位整数，从高位到地位分别是：1 - 透明度、红值、绿值、蓝值。

示例

❐toInt("#000") // {h: 0, s: 0, v: 0}

将任意格式的颜色转为 32 位整数。

⮞ format(color, ...)(color:Color, format?:string):string

格式化颜色为字符串。

参数	类型	描述	默认值
`color*`	`Color`		—
`format`	`"auto" \| "hex" \| "hex6" \| "hex8" \| "rgb" \| "rgba" \| "hsl" \| "hsla"`		`"auto"`

返回值

类型：string

返回格式化后的字符串。

示例

❐format("rgb(0, 0, 0)") // "#000000"

格式化颜色为字符串。

⮞ spin(color, value)<T>(color:T, value:number):string | number | RGB | HSL

调整颜色的色相。

泛型参数	约束类型	默认类型
T	—	—

参数	类型	描述	默认值
`color*`	`T`		—
`value*`	`number`		—

返回值

类型：string | number | RGB | HSL

返回新颜色，格式同原颜色。

示例

❐spin("#666", 50) // "#666666"

调整颜色的色相。

⮞ saturate(color, value)<T>(color:T, value:number):string | number | RGB | HSL

调整颜色的饱和度。

泛型参数	约束类型	默认类型
T	—	—

参数	类型	描述	默认值
`color*`	`T`		—
`value*`	`number`		—

返回值

类型：string | number | RGB | HSL

返回新颜色，格式同原颜色。

示例

❐saturate("#666", 0.5) // "#993333"

调整颜色的饱和度。

⮞ darken(color, value)<T>(color:T, value:number):string | number | RGB | HSL

减少颜色的亮度。

泛型参数	约束类型	默认类型
T	—	—

参数	类型	描述	默认值
`color*`	`T`		—
`value*`	`number`		—

返回值

类型：string | number | RGB | HSL

返回新颜色，格式同原颜色。

示例

❐darken("#666", 0.5) // "#000000"

减少颜色的亮度。

⮞ lighten(color, value)<T>(color:T, value:number):string | number | RGB | HSL

增加颜色的亮度。

泛型参数	约束类型	默认类型
T	—	—

参数	类型	描述	默认值
`color*`	`T`		—
`value*`	`number`		—

返回值

类型：string | number | RGB | HSL

返回新颜色，格式同原颜色。

示例

❐lighten("#666", 0.5) // "#e6e6e6"

增加颜色的亮度。

⮞ fade(color, value)<T>(color:T, value:number):string | number | RGB | HSL

调整颜色的透明度。

泛型参数	约束类型	默认类型
T	—	—

参数	类型	描述	默认值
`color*`	`T`		—
`value*`	`number`		—

返回值

类型：string | number | RGB | HSL

返回新颜色，格式同原颜色。

示例

❐fade("#666", 0.5) // "rgba(102,102,102,0.5)"

调整颜色的透明度。

⮞ alpha(color, value)<T>(color:T, value:number):string | number | RGB | HSL

设置颜色的透明度。

泛型参数	约束类型	默认类型
T	—	—

参数	类型	描述	默认值
`color*`	`T`		—
`value*`	`number`		—

返回值

类型：string | number | RGB | HSL

返回新颜色，格式同原颜色。

示例

❐alpha("#666", 0.5) // "rgba(102,102,102,0.5)"

设置颜色的透明度。

⮞ invert(color)<T>(color:T):string | number | RGB | HSL

获取颜色的反色。

泛型参数	约束类型	默认类型
T	—	—

参数	类型	描述	默认值
`color*`	`T`		—

返回值

类型：string | number | RGB | HSL

返回新颜色，格式同原颜色。

示例

❐invert("#666") // "#999999"

获取颜色的反色。

⮞ mix(color1, color2, ...)<T>(color1:T, color2:Color, weight?:number):string | number | RGB | HSL

叠加两个颜色并返回新颜色。

泛型参数	约束类型	默认类型
T	—	—

参数	类型	默认值
`color1*`	`T`	—
`color2*`	`Color`	—
`weight`	`number`	`0.5`

返回值

类型：string | number | RGB | HSL

返回新颜色，格式同第一个颜色。

示例

❐mix("#0f0", "#f00") // "#808000"

叠加两个颜色并返回新颜色。

⮞ luma(color)(color:Color):number

获取颜色的亮度。

参数	类型	描述	默认值
`color*`	`Color`		—

返回值

类型：number

返回亮度，值越大亮度越高（越接近白色），范围为 0 到 1（含）。

示例

❐luma("#666") // 0.13286832155381795

获取颜色的亮度。

⮞ contrast(color, color1, color2, ...)<T, U>(color:Color, color1:T, color2:U, threshold?:number):T | U

计算和指定颜色对比度最大的颜色。

泛型参数	约束类型	默认类型
T	—	—
U	—	—

参数	类型	默认值
`color*`	`Color`	—
`color1*`	`T`	—
`color2*`	`U`	—
`threshold`	`number`	`0.43`

返回值

类型：T | U

返回给定两个颜色中的其中一个。

示例

❐contrast("#666", "#000", "#fff") // "#ffffff"

计算和指定颜色对比度最大的颜色。

RGB 接口

表示一个由红、绿、蓝三原色组成的颜色。

字段	类型	描述
⮞ `r` : `number` 红值（Red）。范围为 0 到 255（含）。	`number`	红值（Red）。范围为 0 到 255（含）。
⮞ `g` : `number` 绿值（Green）。范围为 0 到 255（含）。	`number`	绿值（Green）。范围为 0 到 255（含）。
⮞ `b` : `number` 蓝值（Blue）。范围为 0 到 255（含）。	`number`	蓝值（Blue）。范围为 0 到 255（含）。
⮞ `a` : `number` 透明度（Alpha）。范围为 0 到 1（含）。	`number`	透明度（Alpha）。范围为 0 到 1（含）。

HSL 接口

表示一个由色调、饱和度、亮度组成的颜色。

字段	类型	描述
⮞ `h` : `number` 色调（Hue）。范围为 0 到 359（含）。	`number`	色调（Hue）。范围为 0 到 359（含）。
⮞ `s` : `number` 饱和度（Saturation）。范围为 0 到 1（含）。	`number`	饱和度（Saturation）。范围为 0 到 1（含）。
⮞ `l` : `number` 亮度（Lightness）。范围为 0 到 1（含）。	`number`	亮度（Lightness）。范围为 0 到 1（含）。
⮞ `a` : `number` 透明度（Alpha）。范围为 0 到 1（含）。	`number`	透明度（Alpha）。范围为 0 到 1（含）。

HSV 接口

表示一个由色调、饱和度、明度组成的颜色。

字段	类型	描述
⮞ `h` : `number` 色调（Hue）。范围为 0 到 359（含）。	`number`	色调（Hue）。范围为 0 到 359（含）。
⮞ `s` : `number` 饱和度（Saturation）。范围为 0 到 1（含）。	`number`	饱和度（Saturation）。范围为 0 到 1（含）。
⮞ `v` : `number` 明度（Value）。范围为 0 到 1（含）。	`number`	明度（Value）。范围为 0 到 1（含）。
⮞ `a` : `number` 透明度（Alpha）。范围为 0 到 1（含）。	`number`	透明度（Alpha）。范围为 0 到 1（含）。

Color 类型

表示一个颜色。

同：string | number | RGB | HSL | HSV

说明

颜色有以下格式：

{r: 0, g: 0, b: 0, a: 1}
{h: 0, s: 0, l: 0, a: 1}
{h: 0, s: 0, v: 0, a: 1}
"#000"
"#000000"
"#000000ff"
"rgb(0, 0, 0)"
"rgba(0, 0, 0, 1)"
"hsl(0, 0, 0)"
"hsla(0, 0, 0, 1)"
0x000000

☍颜色处理util/color

另参考

☍API

☍全局

返回值

示例

返回值

示例

返回值

示例

返回值

示例

返回值

示例

返回值

示例

返回值

示例

返回值

示例

返回值

示例

返回值

示例

返回值

示例

返回值

示例

返回值

示例

返回值

示例

返回值

示例

☍⅏RGB 接口

☍⅏HSL 接口

☍⅏HSV 接口

☍⅏Color 类型

说明

颜色处理util/color

API

全局

RGB 接口

HSL 接口

HSV 接口

Color 类型