Documentation Module: rgjs/clr

RGJS6 Color module.

Methods

<static> contrast(color [, dark] [, light] [, threshold])

Get which of two colors provides the greatest contrast with another.

Parameters:

Name	Type	Argument	Default	Description
`color`	object \| string			A color object to compare against.
`dark`	object \| string	<optional>	'#000'	optional - A designated dark color (defaults to black).
`light`	object \| string	<optional>	'#fff'	optional - A designated light color (defaults to white).
`threshold`	number	<optional>	0.43	optional

<static> darken(color, factor [, relative])

Darken a color.
Converts color to hsl, then recalculates hsl.lightness with lightness *= 1.0 - factor;

Parameters:

Name	Type	Argument	Description
`color`	object \| string		An object with r, g and b values ({r:x, g:y, b:z}). Hexadecimal color values (#000000) are allowed.
`factor`	number		The factor of darkening (0.0 - 1.0).
`relative`	boolean	<optional>	Optional, set to `true` for the adjustment to be relative to the current value.

Returns:

The resulting color. Returns RGB object or hex, depends on supplied argument.

Type: object | string

Example

rgjs.clr.darken('#999', 0.25) // darkens #999 by 25%, returns `#737373`

<static> fade(color, factor)

Fade a color.

Parameters:

Name	Type	Description
`color`	object \| string	An object with r, g and b values ({r:x, g:y, b:z}). Hexadecimal color values (#000000) are allowed.
`factor`	number	The factor of fading (0.0 - 1.0).

Returns:

The resulting color as a rgba css string (rgba(x,y,z,a)).

Type: string

Example

rgjs.clr.fade('#f00', 0.25); // 'rgba(255, 0, 0, 0.25)'

<static> getAvgLuminance(color)

Get average luminance.

Parameters:

Name	Type	Description
`color`	object \| string	An object with r, g and b values ({r:x, g:y, b:z}). Hexadecimal color values (#000000) are allowed.

Returns:

A number indicating the average luminance (0-255).

Type: number

Example

rgjs.clr.getAvgLuminance('#333'); // ~ 50.999

<static> getClosest(color, colors)

Get closest color.

Parameters:

Name	Type	Description
`color`	object \| string	An object with r, g and b values ({r:x, g:y, b:z}). Hexadecimal color values (#000000) are allowed.
`colors`	array	An array of colors to compare the color to.

Returns:

The resulting color. Returns RGB object or hex, depends on supplied argument.

Type: object | string

Example

rgjs.clr.getClosest('#f00', ['#300', '#900']); // '#900'

<static> getClrComplementary()

Get complemantary color.
ALias of getComplementary().

Deprecated:

See:

rgjs/clr/getComplementary

<static> getComplementary(color)

Get complemantary color.

Parameters:

Name	Type	Description
`color`	object \| string	An object with r, g and b values ({r:x, g:y, b:z}). Hexadecimal color values (#000000) are allowed.

Returns:

The resulting color. Returns RGB object or hex, depends on supplied argument.

Type: object | string

Example

rgjs.clr.getComplementary('#f00'); // '#00ffff'
rgjs.clr.getComplementary({r: 255, g: 0, b: 0}); // {r: 0, g: 255, b: 255}

<static> getCssGradient()

Get a linear css gradient scrim.
ALias of getLinearGradientScrim().

Deprecated:

See:

rgjs/clr/getLinearGradientScrim

<static> getLinearGradient(color [, color2] [, angle] [, fade1] [, fade2])

Get a linear css gradient between two colors.

Parameters:

Name	Type	Argument	Default	Description
`color`	object \| string			An object with r, g and b values ({r:x, g:y, b:z}). Hexadecimal color values (#000000) are allowed.
`color2`	object \| string	<optional>	'transparent'	An object with r, g and b values ({r:x, g:y, b:z}). Hexadecimal color values (#000000) are allowed.
`angle`	Number	<optional>	0	Optional angle for the gradient.
`fade1`	Number	<optional>	1.0	Optional opacity multiplier for color1.
`fade2`	Number	<optional>	1.0	Optional opacity multiplier for color2.

Returns:

The resulting gradient as a css string.

Type: string

<static> getLinearGradientScrim(color [, opac] [, angle])

Get a linear css gradient scrim.

Parameters:

Name	Type	Argument	Default	Description
`color`	object \| string			[description]
`opac`	Number	<optional>	1.0	[description]
`angle`	Number	<optional>	0	[description]

Returns:

The resulting gradient as a css string.

Type: string

<static> hexToHsl(hex)

Hex to hsl.

Parameters:

Name	Type	Description
`hex`	object	Hexidecimal color value (#000000). Shorthand is allowed (#000).

Returns:

A hsl object ({hue:x, saturation:y, lightness:z}).

Type: object

Example

rgjs.clr.hexToHsl('#ff0000'); // {hue: 0, saturation: 1, lightness: 0.5}

<static> hexToHsv(hex)

Hex to hsv.

Parameters:

Name	Type	Description
`hex`	string	Hexidecimal color value (#000000). Shorthand is allowed (#000).

Returns:

A hsv object ({hue:x, saturation:y, value:z}).

Type: object

Example

rgjs.clr.hexToHsv('#f00'); // {hue: 0, saturation: 100, value: 100}

<static> hexToRgb(hex)

Hex to rgb.

Parameters:

Name	Type	Description
`hex`	string	Hexidecimal color value (#000000). Shorthand is allowed (#000).

Returns:

An object with r, g, and b values ({r:x, g:y, b:z}) or null on failure.

Type: object

Example

rgjs.clr.hexToRgb('#f00'); // {r: 255, g: 0, b: 0}

<static> hslToHex(hsl)

Hsl to hex.

Parameters:

Name	Type	Description
`hsl`	object	A hsl object ({hue:x, saturation:y, lightness:z}).

Returns:

Hexidecimal color value (#000000). Shorthand is allowed (#000).

Type: object

Example

rgjs.clr.hslToHex({hue: 0, saturation: 1, lightness: 0.5}); // '#ff0000'

<static> hslToRgb(hsl)

Hsl to rgb.
Based on https://gist.github.com/mjackson/5311256

Parameters:

Name	Type	Description
`hsl`	object	A hsl object ({hue:x, saturation:y, lightness:z}).

Returns:

An object with r, g and b values ({r:x, g:y, b:z}).

Type: object

Example

rgjs.clr.hslToRgb({hue: 0, saturation: 1, lightness: 0.5}); // {r: 255, g: 0, b: 0}

<static> hsvToHex(hsv)

Hsv to hex.

Parameters:

Name	Type	Description
`hsv`	object	A hsv object ({hue:x, saturation:y, value:z}).

Returns:

Hexadecimal color value (#000000).

Type: string

Example

rgjs.clr.hsvToHex({hue: 0, saturation: 100, value: 100}); // '#ff0000'

<static> hsvToRgb(hsv)

Hsv to rgb.

Parameters:

Name	Type	Description
`hsv`	object	A hsv object ({hue:x, saturation:y, value:z}).

Returns:

An object with r, g and b values ({r:x, g:y, b:z}).

Type: object

Example

rgjs.clr.hsvToRgb({hue: 0, saturation: 100, value: 100}); // {r: 255, g: 0, b: 0}

<static> hueShift(h, s)

Hue shift.

Parameters:

Name	Type	Description
`h`	number	HSV hue value
`s`	number	Shift

Returns:

Shifted hue

Type: number

Example

// Invert '#f00' by shifting the hue by 180 degrees
const hex = '#f00';
const hsv = hexToHsv(hex);
rgjs.clr.hueShift(hsv.hue); // 180

<static> lighten(color, factor [, relative])

Lighten a color.
Converts color to hsl, then recalculates hsl.lightness with lightness *= 1.0 + factor;

Parameters:

Name	Type	Argument	Description
`color`	object \| string		An object with r, g and b values ({r:x, g:y, b:z}). Hexadecimal color values (#000000) are allowed.
`factor`	number		The factor of lighting (0.0 - 1.0).
`relative`	boolean	<optional>	Optional, set to `true` for the adjustment to be relative to the current value.

Returns:

The resulting color. Returns RGB object or hex, depends on supplied argument.

Type: object | string

Example

rgjs.clr.lighten('#999', 0.25) //  lightens #999 by 25%, returns `#bfbfbf`.

<static> rgbToHex(rgb)

Rgb to hex.

Parameters:

Name	Type	Description
`rgb`	float	An object with r, g and b values ({r:x, g:y, b:z}).

Returns:

Hexadecimal color value (#000000).

Type: string

Example

rgjs.clr.hexToRgb({r: 255, g: 0, b: 0}); // '#f00'

<static> rgbToHsl(rgb [, toFixed])

Rgb to hsl.
Based on https://gist.github.com/mjackson/5311256

Parameters:

Name	Type	Argument	Default	Description
`rgb`	object			An object with r, g and b values ({r:x, g:y, b:z}).
`toFixed`	boolean	<optional>	true	Limits results to 2 decimals. Defaults to TRUE.

Returns:

A hsl object ({hue:x, saturation:y, lightness:z}).

Type: object

Example

rgjs.clr.rgbToHsl({r: 255, g: 0, b: 0}); // {hue: 0, saturation: 1, lightness: 0.5}

<static> rgbToHsv(rgb)

Rgb to Hsv.

Parameters:

Name	Type	Description
`rgb`	object	An object with r, g and b values ({r:x, g:y, b:z}).

Returns:

A hsv object ({hue:x, saturation:y, value:z}).

Type: object

Example

rgjs.clr.rgbToHsv({r: 255, g: 0, b: 0}); // {hue: 0, saturation: 100, value: 100}