Skip to content

演示APP

推荐浏览器扫码安装

Color API

用来对颜色进行操作。

WxColor(color)

创建颜色类

参数

名称类型必填默认值描述
colorany-颜色,类型可以是 UTSJSONObjectstringArray<string> 格式的颜色

返回值

类型
WxColor
js
import WxColor from '@/uni_modules/wx-ui/libs/uts/color.uts';
let color = new WxColor('#fff')

转换颜色类型

rgb(color)

转换为 rgb 颜色

hex(color)

转换为 hex 颜色

hsl(color)

转换为 hsl 颜色

参数

名称类型必填默认值描述
colorany-颜色,类型可以是 UTSJSONObjectstringArray<string> 格式的颜色

返回值

类型
WxColor

示例

js
color.rgb() // rgb(255, 255, 255)
color.hex() // #fff
color.hsl() // hsl(0, 0%, 100%)

获取指定格式颜色

string()

获取字符串格式的颜色

返回值

类型
string

array()

获取数组格式的颜色

返回值

类型
Array<number>

map()

获取Map格式的对象

返回值

类型
Map<string, number>

示例

js
color.rgb().string() // rgb(255, 255, 255)
color.rgb().array()  // [255, 255, 255]
color.rgb().map()  // Map<string, number>([ ['r': 255], ['g': 255], ['b': 255] ])

luminance()

检测颜色亮度,返回 0 ~ 1的数值

返回值

类型
number

示例

js
color.rgb().luminance(); // 1

isDark()

判断颜色是否为暗色

返回值

类型
boolean

示例

js
color.rgb().isDark(); // false

isLight()

判断颜色是否为亮色

返回值

类型
boolean

示例

js
color.rgb().isLight(); // true

gradient(twoColor?, step?)

获取两颜色之间的渐变值

参数

名称类型必填默认值描述
twoColorstring(string.ColorString)#fff第二个颜色
stepnumber10获取渐变颜色的个数

返回值

类型
Array<string>

示例

js
color.gradient('#000', 10);
// ["#FFFFFF","#E6E6E6","#CCCCCC","#B3B3B3","#999999","#808080","#666666","#4D4D4D","#333333","#000000"]