颜色（Color）

生成颜色的模块。

概述

对于像 'red' 这样人类可读的颜色，请使用 human()。

对于像 #ff0000 这样的十六进制颜色（在 HTML/CSS 中使用），请使用 rgb()。还有其他颜色格式的方法，例如 hsl()、cmyk()、hwb()、lab() 和 lch()。

cmyk

返回 CMYK 颜色。

参数

名称	类型	默认值	说明
format	ColorFormat	'decimal'	生成的 CMYK 颜色的格式。

返回: 字符串 | 数字数组

示例

{{$color.cmyk}}  // '["0.74","0.58","0.22","0.01"]'
{{$color.cmyk(format='decimal')}}  // '["0.96","0.74","0.2","0.97"]'

{{$color.cmyk(format='css')}}   //'cmyk(96%, 21%, 9%, 77%)'
{{$color.cmyk(format='binary')}}  // '00111110110111000010100011110110 00111111010011001100110011001101 00111111000010100011110101110001 00111110000011110101110000101001'

colorByCSSColorSpace

根据指定的 CSS 颜色空间返回随机颜色。

返回: 字符串 | 数字数组

参数

名称	类型	默认值	说明
format	ColorFormat	'decimal'	生成的 RGB 颜色的格式。
space	ColorFormat	\sRGB' | 'display-p3' | 'rec2020' | 'a98-rgb' | 'prophoto-rgb'	要为其生成颜色的颜色空间。

示例

{{{$color.colorByCSSColorSpace}}  // '["0.3477","0.1883","0.015"]'

{{$color.colorByCSSColorSpace(format='decimal')}}  // '["0.3812","0.8841","0.2135"]'

{{$color.colorByCSSColorSpace(format='css',space='display-p3')}}  // 'color(display-p3 0.0083 0.6872 0.7923)'

{{$color.colorByCSSColorSpace(format='binary')}}  // '00111100001000100011001110011100 00111111001010001100000101010101 00111110100000001011011110000000'

cssSupportedFunction

根据指定的 CSS 颜色空间返回随机颜色。

返回: 'rgb' | 'rgba' | 'hsl' | 'hsla' | 'hwb' | 'cmyk' | 'lab' | 'lch' | 'color'

示例

{{$color.cssSupportedFunction}}  // 'lch'

cssSupportedSpace

返回随机的 CSS 支持的颜色空间名称。

返回: 'sRGB' | 'display-p3' | 'rec2020' | 'a98-rgb' | 'prophoto-rgb'

示例

{{$color.cssSupportedSpace}} // 'a98-rgb'

hsl

返回 HSL 颜色。

参数

名称	类型	默认值	说明
format	ColorFormat	'decimal'	生成的 RGB 颜色的格式。
includeAlpha	布尔值	false	向颜色添加 Alpha 值（RGBA）。

返回: 字符串 | 数字数组

示例

{{$color.hsl}}  // '["153","0.33","0.46"]'

{{$color.hsl(format='decimal')}}  // '["323","0.58","0.96"]'

{{$color.hsl(format='decimal',includeAlpha=true)}}  // '["164","0.13","0.57","0.44"]'

{{$color.hsl(format='css')}}  // 'hsl(180deg 53% 15%)'

{{$color.hsl(format='css',includeAlpha=true)}}  // 'hsl(145deg 77% 35% / 20)'

{{$color.hsl(format='binary')}}  // '10001110 00111111001000010100011110101110 00111111010100011110101110000101'

{{$color.hsl(format='binary',includeAlpha=true)}}  // '100110000 00111100111101011100001010001111 00111111001011100001010001111011 00111110110100011110101110000101'

human

返回一个随机的人类可读颜色名称。

返回: 字符串

示例

{{$color.human}}  // '紫色'

hwb

返回 HWB 颜色。

参数

名称	类型	默认值	说明
format	ColorFormat	'decimal'	生成的 RGB 颜色的格式。

返回: 字符串 | 数字数组

示例

{{$color.hwb(format='css')}}  // 'hwb(44 90% 42%)'

{{$color.hwb(format='binary')}}  // '00100011 00111110010000101000111101011100 00111110111101011100001010001111'

{{$color.hwb(format='decimal')}}  // '["0","0.03","0.4"]'

lab

返回 LAB (CIELAB) 颜色。

参数

名称	类型	默认值	说明
format	ColorFormat	'decimal'	生成的 RGB 颜色的格式。

返回: 字符串 | 数字数组

示例

{{$color.lab(format='css')}}  // 'lab(91% 31.4661 80.1946)'

{{$color.lab(format='binary')}}  // '00111111011111110111111011010100 11000010100001001001001011100101 11000001000101010111000100001101'

{{$color.lab(format='decimal')}}  // '["0.685823","-67.8905","8.7299"]'

lch

返回 LCH 颜色。尽管 LCH 颜色空间中色度的上限理论上是无限的，但它被限制在 230，因为任何高于此值的都不会在浏览器中产生明显的差异。

参数

名称	类型	默认值	说明
format	ColorFormat	'decimal'	生成的 RGB 颜色的格式。

返回: 字符串 | 数字数组

示例

{{$color.lch}}  // '["0.958904","16.2","56.8"]'

{{$color.lch(format='decimal')}}  // '["0.958904","16.2","56.8"]'

{{$color.lch(format='binary')}}  // '00111111000011111100000100000101 01000010001011100000000000000000 01000011001000100001100110011010'

lch

返回 LCH 颜色。尽管 LCH 颜色空间中色度的上限理论上是无限的，但它被限制在 230，因为任何高于此值的都不会在浏览器中产生明显的差异。

参数

名称	类型	默认值	说明
format	ColorFormat	'decimal'	生成的 RGB 颜色的格式。

返回: 字符串 | 数字数组

示例

{{$color.lch}}  // '["0.958904","16.2","56.8"]'

{{$color.lch(format='decimal')}}  // '["0.958904","16.2","56.8"]'

{{$color.lch(format='binary')}}  // '00111111000011111100000100000101 01000010001011100000000000000000 01000011001000100001100110011010'

rgb

返回 RGB 颜色。

参数

名称	类型	默认值	说明
casing	大小写	'lower'	生成的十六进制颜色的字母类型大小写。仅在使用 'hex' 格式时适用。
format	ColorFormat	'decimal'	生成的 RGB 颜色的格式。
includeAlpha	布尔值	'false'	向颜色添加 Alpha 值（RGBA）。
prefix	字符串	'#'	生成的十六进制颜色的前缀。仅在使用 'hex' 格式时适用。

返回: 字符串 | 数字数组

示例

{{$color.rgb}}  // '#5dc801'

{{$color.rgb(prefix='0x')}}  // '0xbfdc04'

{{$color.rgb(casing='lower')}}  // '#eb5374'

{{$color.rgb(casing='upper')}}  // '#EC9DE8'

{{$color.rgb(prefix="'#'",casing='lower')}}  // ''#'eb170e'

{{$color.rgb(casing='lower',format='hex')}}  // '#cd1963'

{{$color.rgb(format='decimal')}}  // '["73","61","224"]'

{{$color.rgb(format='css')}}  // 'rgb(252, 100, 135)'

{{$color.rgb(format='binary')}}  // '01111110 10101011 00110011'

{{$color.rgb(includeAlpha=true)}}  // #6be1eeb3

{{$color.rgb(format='css',includeAlpha=true)}}  // 'rgba(178, 136, 43, 0.56)'

{{$color.rgb(format='decimal',includeAlpha=true)}}  // '["173","245","204","0.71"]'

space

从全球公认的颜色空间中返回随机颜色空间名称。来源：https://en.wikipedia.org/wiki/List_of_color_spaces_and_their_uses

返回: 字符串

示例

{{$color.space}}  // '自然色彩系统 (NCS)'