css-color-converter-class

import { CssColor, fromString, fromHsla, fromRgba } from 'css-color-converter-class'

fromString(value)

parameter	type	description
value	string	Supports named colors (only client side), hex, rgb/rgba, hsl/hsla

Returns instance of CssColor if valid, null if invalid.

fromHsla(hue, saturation, lightness, alpha)

parameter	type	description
hue	number	/
saturation	number	/
lightness	number	/
alpha	number	default = 1

Returns instance of CssColor

fromRgba(red, green, blue, alpha)

parameter	type	description
red	number	/
green	number	/
blue	number	/
alpha	number	default = 1

Returns instance of CssColor

CssColor

Properties

static

accessibility	name	type	description
public	hexRegExp	RegExp	new RegExp('^#?([0-9a-fd]{2})([0-9a-fd]{1,2})([0-9a-fd]{0,2})([0-9a-fd]{0,2})$', 'i')
public	rgbRegExp	RegExp	new RegExp('^rgb\\(([0-9]*.[0-9]+|[0-9]+),([0-9]*.[0-9]+|[0-9]+),([0-9]*.[0-9]+|[0-9]+)\\)$', 'i')
public	rgbaRegExp	RegExp	new RegExp('^rgba\\(([0-9]*.[0-9]+|[0-9]+),([0-9]*.[0-9]+|[0-9]+),([0-9]*.[0-9]+|[0-9]+),([0-9]*.[0-9]+|[0-9]+)\\)$', 'i')
public	hslRegExp	RegExp	new RegExp('^hsl\\(([0-9]*.[0-9]+|[0-9]+),([0-9]*.[0-9]+|[0-9]+)%?,([0-9]*.[0-9]+|[0-9]+)%?\\)$', 'i')
public	hslaRegExp	RegExp	new RegExp('^hsla\\(([0-9]*.[0-9]+|[0-9]+),([0-9]*.[0-9]+|[0-9]+)%?,([0-9]*.[0-9]+|[0-9]+)%?,([0-9]*.[0-9]+|[0-9]+)\\)$', 'i')

non static

accessibility	name	type	description
public	htmlColorName	string	only set if it was created with one default = ''
public	hex	string	default = ''
public	red	number	default = 0
public	green	number	default = 0
public	blue	number	default = 0
public	hue	number	default = 0
public	saturation	number	default = 50
public	lightness	number	default = 100
public	alpha	number	default = 1

Accessors (Javascript, Typescript)

non static

accessibility	name	type	get	set	description
public	hexString	string	✔️	❌	returns "hex" property and applies a "#" if it has non does the same as the method toHexString
public	saturationString	string	✔️	❌	returns "saturation" property as string with "%" at the end
public	lightnessString	string	✔️	❌	returns "lightness" property as string with "%" at the end
public	rgbString	string	✔️	❌	returns a rgb string 'rgb(100,100,100)' does the same as the method toRgbString
public	rgbaString	string	✔️	❌	returns a rgba string 'rgba(100,100,100, 1)' does the same as the method toRgbaString
public	hslString	string	✔️	❌	returns a hsl string 'hsl(0,50%,100%)' does the same as the method toHslString
public	hslaString	string	✔️	❌	returns a hsla string 'hsla(0,50%,100%, 1)' does the same as the method toHslaString

Methods

static

accessibility	name	parameter	returns	description
public	getInstanceFromString	value: string	instance of CssColor if valid else null	does the same as fromString Supports named colors (only client side), hex, rgb/rgba, hsl/hsla

non static

accessibility	name	parameter	returns	description
public	constructor	rgb?: Partial<RGB> | null hsl?: Partial<HSL> | null alpha = 1 hex = '' htmlColorName = ''	instance of CssColor	/
public	setHtmlColorName	value: string	void	sets htmlColorName to the new value and re-calculates "hsl-values", "rgb-values" and "alpha" (if valid string)
public	fromHtmlColorName	/	void	re-calculates "hsl-values", "rgb-values" and "alpha" based on htmlColorName
public	setHex	value: string	void	sets hex to the new value (if it matches hexRegExp) and re-calculates "hsl-values", "rgb-values" and "alpha"
public	fromHex	/	void	re-calculates "hsl-values", "rgb-values" and "alpha" based on hex
public	setRed	value: number	void	sets red to the new value and re-calculates "hsl-values" and "hex"
public	setGreen	value: number	void	sets green to the new value and re-calculates "hsl-values" and "hex"
public	setBlue	value: number	void	sets blue to the new value and re-calculates "hsl-values" and "hex"
public	setRgb	rgb: Partial<RGB>	void	sets the new RGB values and re-calculates "hsl-values" and "hex"
public	setRgba	rgba: Partial<RGBA>	void	sets the new RGBA values and re-calculates "hsl-values" and "hex"
public	fromRgb	/	void	re-calculates "hsl-values" and "hex" based on "rgb-values" and "alpha"
public	fromRgba	/	void	re-calculates "hsl-values" and "hex" based on "rgb-values" and "alpha"
public	setHue	value: number	void	sets hue to the new value and re-calculates "rgb-values" and "hex"
public	setSaturation	value: number	void	sets saturation to the new value and re-calculates "rgb-values" and "hex"
public	setLightness	value: number	void	sets lightness to the new value and re-calculates "rgb-values" and "hex"
public	setHsl	hsl: Partial<HSL>	void	sets the new HSL values and re-calculates "rgb-values" and "hex"
public	setHsla	hsla: Partial<HSLA>	void	sets the new RGBA values and re-calculates "hsl-values" and "hex"
public	fromHsl	/	void	re-calculates "rgb-values" and "hex" based on "hsl-values" and "alpha"
public	fromHsla	/	void	re-calculates "rgb-values" and "hex" based on "hsl-values" and "alpha"
public	setAlpha	value: number	void	sets alpha to the new value an re-calculates "hex"
public	getRgb	/	Required<RGB>	/
public	getRgba	/	Required<RGBA>	/
public	getHsl	/	Required<HSL>	/
public	getHsla	/	Required<HSLA>	/
public	toRgbString	/	string	does the same as accessor rbgString
public	toRgbaString	/	string	does the same as accessor rbgaString
public	toHslString	/	string	does the same as accessor hslString
public	toHslaString	/	string	does the same as accessor hslaString
public	getStrings	/	Array<string>	[ this.rgbString, this.rgbaString, this.hslString, this.hslaString, this.hexString, this.htmlColorName ]

Helper Classes

class RGB {
  red = 0
  green = 0
  blue = 0
}

class RGBA extends RGB {
  alpha = 1
}

class HSL {
  hue = 0
  saturation = 50
  lightness = 100
}

class HSLA extends HSL {
  alpha = 1
}