Color
Module to generate colors.
Overview
For a human-readable color like 'red', use human().
For a hex color like #ff0000 used in HTML/CSS, use rgb(). There are also methods for other color formats such as hsl(), cmyk(), hwb(), lab(), and lch().
cmyk
Returns a CMYK color.
Parameters
| Name | Type |
|---|---|
| format | ColorFormat |
Returns: string | number[]
Examples
{{$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
Returns a random color based on CSS color space specified.
Returns: string | number[]
Parameters
| Name | Type | Default | Description |
|---|---|---|---|
| format | ColorFormat | 'decimal' | Format of generated RGB color. |
| space | ColorFormat | \sRGB' | 'display-p3' | 'rec2020' | 'a98-rgb' | 'prophoto-rgb' | Color space to generate the color for. |
Examples
{{{$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
Returns a random color based on CSS color space specified.
Returns: 'rgb' | 'rgba' | 'hsl' | 'hsla' | 'hwb' | 'cmyk' | 'lab' | 'lch' | 'color'
Examples
{{$color.cssSupportedFunction}} // 'lch'
cssSupportedSpace
Returns a random css supported color space name.
Returns: 'sRGB' | 'display-p3' | 'rec2020' | 'a98-rgb' | 'prophoto-rgb'
Examples
{{$color.cssSupportedSpace}} // 'a98-rgb'
hsl
Returns an HSL color.
Parameters
| Name | Type | Default | Description |
|---|---|---|---|
| format | ColorFormat | 'decimal' | Format of generated RGB color. |
| includeAlpha | boolean | false | Adds an alpha value to the color (RGBA). |
Returns: string | number[]
Examples
{{$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
Returns a random human-readable color name.
Returns: string
Examples
{{$color.human}} // 'purple'
hwb
Returns an HWB color.
Parameters
| Name | Type | Default | Description |
|---|---|---|---|
| format | ColorFormat | 'decimal' | Format of generated RGB color. |
Returns: string | number[]
Examples
{{$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
Returns a LAB (CIELAB) color.
Parameters
| Name | Type | Default | Description |
|---|---|---|---|
| format | ColorFormat | 'decimal' | Format of generated RGB color. |
Returns: string | number[]
Examples
{{$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
Returns an LCH color. Even though upper bound of chroma in LCH color space is theoretically unbounded, it is bounded to 230 as anything above will not make a noticeable difference in the browser.
Parameters
| Name | Type | Default | Description |
|---|---|---|---|
| format | ColorFormat | 'decimal' | Format of generated RGB color. |
Returns: string | number[]
Examples
{{$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
Returns an LCH color. Even though upper bound of chroma in LCH color space is theoretically unbounded, it is bounded to 230 as anything above will not make a noticeable difference in the browser.
Parameters
| Name | Type | Default | Description |
|---|---|---|---|
| format | ColorFormat | 'decimal' | Format of generated RGB color. |
Returns: string | number[]
Examples
{{$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
Returns an RGB color.
Parameters
| Name | Type | Default | Description |
|---|---|---|---|
| casing | Casing | 'lower' | FLetter type case of the generated hex color. Only applied when 'hex' format is used. |
| format | ColorFormat | 'decimal' | Format of generated RGB color. |
| includeAlpha | boolean | 'false' | Adds an alpha value to the color (RGBA). |
| prefix | string | '#' | Prefix of the generated hex color. Only applied when 'hex' format is used. |
Returns: string | number[]
Examples
{{$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
Returns a random color space name from the worldwide accepted color spaces. Source: https://en.wikipedia.org/wiki/List_of_color_spaces_and_their_uses
Returns: string
Examples
{{$color.space}} // 'Natural Color System (NSC)'