选择语言 ▼

颜色 API

颜色选择器使用颜色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}

# 属性

颜色对象有几个“魔法”属性,它们以不同格式反映颜色的值。 神奇之处在于它们既可读又可写,因此它们都可以 getset 给定的格式。

# red 红色

颜色的红色通道为 0255 之间的数字。

# green 绿色

颜色的绿色通道为 0255 之间的数字。

# blue 蓝色

颜色的蓝色通道为 0255 之间的数字。

# alpha 透明度

颜色的透明通道为 01 之间的小数。

# hue 色相

颜色的色相通道为 0360 之间的数字。

# saturation 饱和度

颜色的饱和度通道为 0100 之间的数字。

# value 值

颜色的值通道为 0100 之间的数字。

# 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 可以是 hsvrgb中的一个, 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 温度