颜色选择器使用颜色API来存储选定的颜色和处理不同颜色模型之间的转换。 还可以通过 iro.Color
对其进行访问,以便可以将其用作常规颜色实用程序库。
# 构造函数
参数:
{String | Object | Color}
初始颜色。 这可以是任何 支持的颜色格式或另一个颜色实例。
# 支持的颜色格式
- 十六进制字符串:
"#ff0000"
- 带透明通道的十六进制字符串:
"#ff0000ff"
- 简写的十六进制字符串:
"#f00"
- 简写的带透明通道的十六进制字符串:
"#ff0000ff"
- RGB字符串:
"rgb(255, 0, 0)"
- 带透明通道的RGB字符串:
"rgba(255, 0, 0, 1)"
- 百分比RGB字符串:
"rgb(100%,0%,0%)"
- 带透明通道的百分比RGB字符串:
"rgba(100%,0%,0%,100%)"
- RGB对象:
{r: 255, g: 0, b: 0}
- 带透明通道的RGB对象:
{r: 255, g: 0, b: 0, a: 1}
- HSL字符串:
"hsl(360%, 50%)"
- 带透明通道的HSL字符串:
"hslam (360, 50%, 100%, 1)"
- HSL对象:
{h: 360, s: 50, l: 100}
- 带透明通道的HSL对象:
{h: 360, s: 50, l: 100, a: 1}
- HSV对象:
{h: 360, s: 100, v: 50}
- 带透明通道的HSV对象:
{h: 360, s: 100, v: 50, a: 1}
# 属性
颜色对象有几个“魔法”属性,它们以不同格式反映颜色的值。 神奇之处在于它们既可读又可写,因此它们都可以 get 和 set 给定的格式。
# red 红色
颜色的红色通道为 0
到 255
之间的数字。
# green 绿色
颜色的绿色通道为 0
到 255
之间的数字。
# blue 蓝色
颜色的蓝色通道为 0
到 255
之间的数字。
# alpha 透明度
颜色的透明通道为 0
到 1
之间的小数。
# hue 色相
颜色的色相通道为 0
到 360
之间的数字。
# saturation 饱和度
颜色的饱和度通道为 0
到 100
之间的数字。
# value 值
颜色的值通道为 0
到 100
之间的数字。
# kelvin 开尔文温度(色温、冷暖值)
颜色的大概值为开尔文温度值。
# rgb 红色 绿色 蓝色
作为 RGB 对象的颜色。
示例格式: {r: 255, g: 0, b: 0}
# rgba 红色 绿色 蓝色 透明度
作为 RGBA 对象的颜色,在那里 a
代表着颜色的透明度。
示例格式: {r: 255, g: 0, b: 0, a: 1}
# hsv 色调 饱和度 亮度
作为 HSV 对象的颜色
示例格式: {h: 360, s: 100, v: 50}
# hsva 色调 饱和度 亮度 透明度
作为 HSVA 对象的颜色,在那里 a
代表着颜色的透明度。
示例格式: {h: 360, s: 100, v: 50, a: 1}
# hsl 色相 饱和度 明亮度
作为 HSL 对象的颜色。
示例格式: {h: 360, s: 50, l: 100}
# hsla 色相 饱和度 明亮度 透明度
作为 HSLA 对象的颜色,在那里 a
代表着颜色的透明度。
示例格式: {h: 360: 50, l: 100, a: 1}
# hexString 十六进制字符串
作为十六进制字符串的颜色。 也支持简写的十六进制色值。
示例格式: "#ff0000"
或 "#f00"
# hex8String 十六进制字符串
作为带有透明通道的十六进制透明字符串的颜色。 也支持简写的十六进制色值。
示例格式: "#ff0000ff"
或 "#f00f"
# rgbString 红绿蓝字符串
作为RGB字符串的颜色。 也支持百分比的 RGB 字符串。
示例格式: "rgb(255,0,0)"
或 "rgb(100%, 0%, 0%)"
# rgbaString 红绿蓝透明字符串
作为带有透明通道的RGB字符串的颜色。 也支持百分比的 RGBA 字符串。
示例格式: "rgba(255, 0, 0, 1)"
或 "rgba(100%, 0%, 0%, 100%)"
# hslString 色相、饱和度、明亮度的字符串
作为百分比HSL字符串的颜色。
示例格式: "hsl(360, 100% 50%)"
# hslaString 色相、饱和度、明亮度、透明度的字符串
作为百分比HSLA 字符串的颜色
示例格式: "hsl(360%, 100%, 50%, 1)"
# index 索引
颜色的索引。
# 方法
# set 设置
从任意 支持的颜色格式 设置颜色。
参数:
{Color}
# setChannel 设置通道
设置一个特定的颜色通道为新值。 format
可以是 hsv
或 rgb
中的一个, channel
应该是一个字母,代表您想要设置的格式中的哪个频道。
参数:
{String}
format 格式{String}
channel 通道{Number}
value 值
示例:
//将rgb的红色通道设置为255:
color.setChannel('rgb', 'r', 255);
//将hsv的色调通道设置为180:
color.setChannel('hsv', 'h', 255);
# clone 复制
复制颜色并返回具有相同值的新颜色对象。
返回: {Color}
# reset 重置
将颜色重置为最初传递给iro.Color
构造函数的值。
# 静态方法
# hsvToRgb
将 HSV 对象转换为 RGB 对象。
参数:
{Object}
HSV 值,例如{h: 360, s: 100, v: 50}
返回: {Object}
RGB 值, 例如 {r: 255, g: 0, b: 0}
# rgbToHsv
将 RGB 对象转换为 HSV 对象。
参数:
{Object}
RGB 值,例如:{r: 255, g: 0, b: 0}
返回: {Object}
HSV 值, 例如 {h: 360, s: 100, v: 50}
# hsvToHsl
将 HSV 对象转换为 HSL 对象。
参数:
{Object}
HSV 值,例如:{h: 360, s: 50, v: 100}
返回: {Object}
HSL 值,例如 {h: 360, s: 100, l: 100}
# hslToHsv
将HSL对象转换为 HSV 对象。
参数:
{Object}
HSL 值,例如:{h: 360, s: 100, l: 100}
返回: {Object}
HSV 值,例如 {h: 360, s: 50, v: 100}
# kelvinToRgb
将kelvin温度转换为近似的 RGB 对象。
参数:
{Number}
kelvin 温度
返回: {Object}
RGB 值,例如 {r: 255, g: 0, b: 0}
# rgbToKelvin
将RGB 对象转换为近似的kelvin温度。
参数:
{Object}
RGB 值,例如:{r: 255, g: 0, b: 0}
返回: {Number}
kelvin 温度