Colors - Documentation

TK.Colors provides a couple of functions for easy-to-use color calculations and conversions. Functions requiring RGB or HSL color definitions as argument (all rgb2x and hsl2x) can be called with different types of arguments to make using them more convenient. Examples:

rgb2hsl(240, 128, 128)
rgb2hsl({'r':240,'g':128,'b':128})
rgb2hsl([240, 128, 128])

The universal functions color2x take even more diverse arguments. The following examples all define the same color:

("lightcoral")
("#F08080")
([0,0.31,0.28])
(240,128,128)
({"r":240,"g":128,"b":128})

Source:

widgets/colors.js | line 290

Methods

color2bw(1st_value, 2nd_valueopt, 3rd_valueopt) → {string}

Returns a hex color string either black or white at highest contrast compared to the argument from any type of valid color.

Parameters:

Name	Type	Attributes	Description
`1st_value`	number \| array \| object \| string		red (0..255) or hue (0..1) or object with members `r, g, b` or `h, s, l` or array of RGB or HSL or color name or hex string.
`2nd_value`	number	<optional>	green (0..255) or saturation (0..1)
`3rd_value`	number	<optional>	blue (0..255) or lightnes (0..1)

Source:

widgets/colors.js | line 352

Returns:

Hex color string.

Type: string

color2gray(1st_value, 2nd_valueopt, 3rd_valueopt) → {string}

Returns a hex color string of the grayscaled argument from any type of valid color.

Parameters:

Name	Type	Attributes	Description
`1st_value`	number \| array \| object \| string		red (0..255) or hue (0..1) or object with members `r, g, b` or `h, s, l` or array of RGB or HSL or color name or hex string.
`2nd_value`	number	<optional>	green (0..255) or saturation (0..1)
`3rd_value`	number	<optional>	blue (0..255) or lightnes (0..1)

Source:

widgets/colors.js | line 380

Returns:

Hex color string.

Type: string

color2hex(1st_value, 2nd_valueopt, 3rd_valueopt) → {string}

Returns a hex color string from any type of valid color.

Parameters:

Name	Type	Attributes	Description
`1st_value`	number \| array \| object \| string		red (0..255) or hue (0..1) or object with members `r, g, b` or `h, s, l` or array of RGB or HSL or color name or hex string.
`2nd_value`	number	<optional>	green (0..255) or saturation (0..1)
`3rd_value`	number	<optional>	blue (0..255) or lightnes (0..1)

Source:

widgets/colors.js | line 338

Returns:

Hex color string.

Type: string

color2hsl(1st_value, 2nd_valueopt, 3rd_valueopt) → {object}

Returns an object containing hue ('h'), saturation ('s') and lightness ('l') from any type of valid color.

Parameters:

Name	Type	Attributes	Description
`1st_value`	number \| array \| object \| string		red (0..255) or hue (0..1) or object with members `r, g, b` or `h, s, l` or array of RGB or HSL or color name or hex string.
`2nd_value`	number	<optional>	green (0..255) or saturation (0..1)
`3rd_value`	number	<optional>	blue (0..255) or lightnes (0..1)

Source:

widgets/colors.js | line 324

Returns:

Object with members h, s and l as numbers (0..1)

Type: object

color2rgb(1st_value, 2nd_valueopt, 3rd_valueopt) → {object}

Returns an object containing red ('r'), green ('g') and blue ('b') from any type of valid color.

Parameters:

Name	Type	Attributes	Description
`1st_value`	number \| array \| object \| string		red (0..255) or hue (0..1) or object with members `r, g, b` or `h, s, l` or array of RGB or HSL or color name or hex string.
`2nd_value`	number	<optional>	green (0..255) or saturation (0..1)
`3rd_value`	number	<optional>	blue (0..255) or lightnes (0..1)

Source:

widgets/colors.js | line 310

Returns:

Object with members r, g and b as numbers (0..255)

Type: object

color2wb(1st_value, 2nd_valueopt, 3rd_valueopt) → {string}

Returns a hex color string either black or white at lowest contrast compared to the argument from any type of valid color.

Parameters:

Name	Type	Attributes	Description
`1st_value`	number \| array \| object \| string		red (0..255) or hue (0..1) or object with members `r, g, b` or `h, s, l` or array of RGB or HSL or color name or hex string.
`2nd_value`	number	<optional>	green (0..255) or saturation (0..1)
`3rd_value`	number	<optional>	blue (0..255) or lightnes (0..1)

Source:

widgets/colors.js | line 366

Returns:

Hex color string.

Type: string

hex2bw(hex) → {string}

Returns a hex color string either black or white at highest contrast compared to the argument from a hex color string.

Parameters:

Name	Type	Description
`hex`	string	Hex color string.

Source:

widgets/colors.js | line 564

Returns:

Hex color string.

Type: string

hex2gray(hex) → {string}

Returns a hex color string of the grayscaled argument from a hex color string.

Parameters:

Name	Type	Description
`hex`	string	Hex color string.

Source:

widgets/colors.js | line 588

Returns:

Hex color string.

Type: string

hex2hsl(hex) → {object}

Returns an object containing hue ('h'), saturation ('s') and lightness ('l') from a hex color string.

Parameters:

Name	Type	Description
`hex`	string	Hex color string.

Source:

widgets/colors.js | line 552

Returns:

Object with members h, s and l as numbers (0..1)

Type: object

hex2rgb(hex) → {object}

Returns an object containing red ('r'), green ('g') and blue ('b') from a hex color string.

Parameters:

Name	Type	Description
`hex`	string	Hex color string.

Source:

widgets/colors.js | line 540

Returns:

Object with members r, g and b as numbers (0..255)

Type: object

hex2wb(hex) → {string}

Returns a hex color string either black or white at lowest contrast compared to the argument from a hex color string.

Parameters:

Name	Type	Description
`hex`	string	Hex color string.

Source:

widgets/colors.js | line 576

Returns:

Hex color string.

Type: string

hsl2bw(1st_value, 2nd_valueopt, 3rd_valueopt) → {string}

Returns a hex color string either black or white at highest contrast compared to the argument from a HSL color.

Parameters:

Name	Type	Attributes	Description
`1st_value`	number \| array \| object		hue (0..1) or object with members `h, s, l` or array of HSL.
`2nd_value`	number	<optional>	saturation (0..1)
`3rd_value`	number	<optional>	lightness (0..1)

Source:

widgets/colors.js | line 496

Returns:

Hex color string.

Type: string

hsl2gray(1st_value, 2nd_valueopt, 3rd_valueopt) → {string}

Returns a hex color string of the grayscaled argument from a HSL color.

Parameters:

Name	Type	Attributes	Description
`1st_value`	number \| array \| object		hue (0..1) or object with members `h, s, l` or array of HSL.
`2nd_value`	number	<optional>	saturation (0..1)
`3rd_value`	number	<optional>	lightness (0..1)

Source:

widgets/colors.js | line 524

Returns:

Hex color string.

Type: string

hsl2hex(1st_value, 2nd_valueopt, 3rd_valueopt) → {string}

Returns a hex color string from a HSL color.

Parameters:

Name	Type	Attributes	Description
`1st_value`	number \| array \| object		hue (0..1) or object with members `h, s, l` or array of HSL.
`2nd_value`	number	<optional>	saturation (0..1)
`3rd_value`	number	<optional>	lightness (0..1)

Source:

widgets/colors.js | line 482

Returns:

Hex color string.

Type: string

hsl2rgb(1st_value, 2nd_valueopt, 3rd_valueopt) → {object}

Returns an object containing red ('r'), green ('g') and blue ('b') from a HSL color.

Parameters:

Name	Type	Attributes	Description
`1st_value`	number \| array \| object		hue (0..1) or object with members `h, s, l` or array of HSL.
`2nd_value`	number	<optional>	saturation (0..1)
`3rd_value`	number	<optional>	lightness (0..1)

Source:

widgets/colors.js | line 468

Returns:

Object with members r, g and b as numbers (0..255)

Type: object

hsl2wb(1st_value, 2nd_valueopt, 3rd_valueopt) → {string}

Returns a hex color string either black or white at lowest contrast compared to the argument from a HSL color.

Parameters:

Name	Type	Attributes	Description
`1st_value`	number \| array \| object		hue (0..1) or object with members `h, s, l` or array of HSL.
`2nd_value`	number	<optional>	saturation (0..1)
`3rd_value`	number	<optional>	lightness (0..1)

Source:

widgets/colors.js | line 510

Returns:

Hex color string.

Type: string

name2bw(color) → {string}

Returns a hex color string either black or white at highest contrast compared to the argument from a color name.

Parameters:

Name	Type	Description
`color`	string	Color name.

Source:

widgets/colors.js | line 638

Returns:

Hex color string.

Type: string

name2gray(color) → {string}

Returns a hex color string of the grayscaled argument from a color name.

Parameters:

Name	Type	Description
`color`	string	Color name.

Source:

widgets/colors.js | line 662

Returns:

Hex color string.

Type: string

name2hex(color) → {string}

Returns a hex color string from a color name.

Parameters:

Name	Type	Description
`color`	string	Color name.

Source:

widgets/colors.js | line 626

Returns:

Hex color string.

Type: string

name2hsl(color) → {object}

Returns an object containing hue ('h'), saturation ('s') and lightness ('l') from a color name.

Parameters:

Name	Type	Description
`color`	string	Color name.

Source:

widgets/colors.js | line 614

Returns:

Object with members h, s and l as numbers (0..1)

Type: object

name2rgb(color) → {object}

Returns an object containing red ('r'), green ('g') and blue ('b') from a color name.

Parameters:

Name	Type	Description
`color`	string	Color name.

Source:

widgets/colors.js | line 602

Returns:

Object with members r, g and b as numbers (0..255)

Type: object

name2wb(color) → {string}

Returns a hex color string either black or white at lowest contrast compared to the argument from a color name.

Parameters:

Name	Type	Description
`color`	string	Color name.

Source:

widgets/colors.js | line 650

Returns:

Hex color string.

Type: string

rgb2bw(1st_value, 2nd_valueopt, 3rd_valueopt) → {string}

Returns a hex color string either black or white at highest contrast compared to the argument from a RGB color.

Parameters:

Name	Type	Attributes	Description
`1st_value`	number \| array \| object \| string		red (0..255) or object with members `r, g, b` or array of RGB or color name or hex string.
`2nd_value`	number	<optional>	green (0..255) or saturation (0..1)
`3rd_value`	number	<optional>	blue (0..255) or lightnes (0..1)

Source:

widgets/colors.js | line 424

Returns:

Hex color string.

Type: string

rgb2gray(1st_value, 2nd_valueopt, 3rd_valueopt) → {string}

Returns a hex color string of the grayscaled argument from a RGB color.

Parameters:

Name	Type	Attributes	Description
`1st_value`	number \| array \| object \| string		red (0..255) or object with members `r, g, b` or array of RGB or color name or hex string.
`2nd_value`	number	<optional>	green (0..255) or saturation (0..1)
`3rd_value`	number	<optional>	blue (0..255) or lightnes (0..1)

Source:

widgets/colors.js | line 452

Returns:

Hex color string.

Type: string

rgb2hex(1st_value, 2nd_valueopt, 3rd_valueopt) → {string}

Returns a hex color string from a RGB color.

Parameters:

Name	Type	Attributes	Description
`1st_value`	number \| array \| object \| string		red (0..255) or object with members `r, g, b` or array of RGB or color name or hex string.
`2nd_value`	number	<optional>	green (0..255) or saturation (0..1)
`3rd_value`	number	<optional>	blue (0..255) or lightnes (0..1)

Source:

widgets/colors.js | line 410

Returns:

Hex color string.

Type: string

rgb2hsl(1st_value, 2nd_valueopt, 3rd_valueopt) → {object}

Returns an object containing hue ('h'), saturation ('s') and lightness ('l') from a RGB color.

Parameters:

Name	Type	Attributes	Description
`1st_value`	number \| array \| object \| string		red (0..255) or object with members `r, g, b` or array of RGB or color name or hex string.
`2nd_value`	number	<optional>	green (0..255) or saturation (0..1)
`3rd_value`	number	<optional>	blue (0..255) or lightnes (0..1)

Source:

widgets/colors.js | line 396

Returns:

Object with members h, s and l as numbers (0..1)

Type: object

rgb2wb(1st_value, 2nd_valueopt, 3rd_valueopt) → {string}

Returns a hex color string either black or white at lowest contrast compared to the argument from a RGB color.

Parameters:

Name	Type	Attributes	Description
`1st_value`	number \| array \| object \| string		red (0..255) or object with members `r, g, b` or array of RGB or color name or hex string.
`2nd_value`	number	<optional>	green (0..255) or saturation (0..1)
`3rd_value`	number	<optional>	blue (0..255) or lightnes (0..1)

Source:

widgets/colors.js | line 438

Returns:

Hex color string.

Type: string