Class: Color

fabric.Color

new Color(color) → {fabric.Color}

Color class The purpose of fabric.Color is to abstract and encapsulate common color operations; fabric.Color is a constructor and creates instances of fabric.Color objects.

Parameters:

Name	Type	Description
`color`	String	optional in hex or rgb(a) or hsl format or from known color list

Source:

fabric.js, line 6051

Tutorials:

Tutorial: http://fabric5.fabricjs.com/fabric-intro-part-2/#colors

Returns:

thisArg

Type: fabric.Color

Members

(static) colorNameMap

Map of the 148 color names with HEX code

Source:

fabric.js, line 6347

(static) reHex

Regex matching color in HEX format (ex: #FF5544CC, #FF5555, 010155, aff)

Source:

fabric.js, line 6338

(static) reHSLa

Regex matching color in HSL or HSLA formats (ex: hsl(200, 80%, 10%), hsla(300, 50%, 80%, 0.5), hsla( 300 , 50% , 80% , 0.5 ))

Source:

fabric.js, line 6330

(static) reRGBa

Regex matching color in RGB or RGBA formats (ex: rgb(0, 0, 0), rgba(255, 100, 10, 0.5), rgba( 255 , 100 , 10 , 0.5 ), rgb(1,1,1), rgba(100%, 60%, 10%, 0.5))

Source:

fabric.js, line 6322

Methods

(static) fromHex(color) → {fabric.Color}

Returns new color object, when given a color in HEX format

Parameters:

Name	Type	Description
`color`	String	Color value ex: FF5555

Source:

fabric.js, line 6632

Returns:

Type: fabric.Color

(static) fromHsl(color) → {fabric.Color}

Returns new color object, when given a color in HSL format

Parameters:

Name	Type	Description
`color`	String	Color value ex: hsl(0-260,0%-100%,0%-100%)

Source:

fabric.js, line 6572

Returns:

Type: fabric.Color

(static) fromHsla(color) → {fabric.Color}

Returns new color object, when given a color in HSLA format

Parameters:

Name	Type	Description
`color`	String

Source:

fabric.js, line 6623

Returns:

Type: fabric.Color

(static) fromRgb(color) → {fabric.Color}

Returns new color object, when given a color in RGB format

Parameters:

Name	Type	Description
`color`	String	Color value ex: rgb(0-255,0-255,0-255)

Source:

fabric.js, line 6530

Returns:

Type: fabric.Color

(static) fromRgba(color) → {fabric.Color}

Returns new color object, when given a color in RGBA format

Parameters:

Name	Type	Description
`color`	String

Source:

fabric.js, line 6564

Returns:

Type: fabric.Color

(static) fromSource(source) → {fabric.Color}

Returns new color object, when given color in array representation (ex: [200, 100, 100, 0.5])

Parameters:

Name	Type	Description
`source`	Array

Source:

fabric.js, line 6669

Returns:

Type: fabric.Color

(static) sourceFromHex(color) → {Array}

Returns array representation (ex: [100, 100, 200, 1]) of a color that's in HEX format

Parameters:

Name	Type	Description
`color`	String	ex: FF5555 or FF5544CC (RGBa)

Source:

fabric.js, line 6643

Returns:

source

Type: Array

(static) sourceFromHsl(color) → {Array}

Returns array representation (ex: [100, 100, 200, 1]) of a color that's in HSL or HSLA format. Adapted from https://github.com/mjijackson

Parameters:

Name	Type	Description
`color`	String	Color value ex: hsl(0-360,0%-100%,0%-100%) or hsla(0-360,0%-100%,0%-100%, 0-1)

Source:

fabric.js, line 6584

See:

http://http://www.w3.org/TR/css3-color/#hsl-color

Returns:

source

Type: Array

(static) sourceFromRgb(color) → {Array}

Returns array representation (ex: [100, 100, 200, 1]) of a color that's in RGB or RGBA format

Parameters:

Name	Type	Description
`color`	String	Color value ex: rgb(0-255,0-255,0-255), rgb(0%-100%,0%-100%,0%-100%)

Source:

fabric.js, line 6540

Returns:

source

Type: Array

getAlpha() → {Number}

Gets value of alpha channel for this color

Source:

fabric.js, line 6244

Returns:

0-1

Type: Number

getSource() → {Array}

Returns source of this color (where source is an array representation; ex: [200, 200, 100, 1])

Source:

fabric.js, line 6155

Returns:

Type: Array

overlayWith(otherColor) → {fabric.Color}

Overlays color with another color

Parameters:

Name	Type	Description
`otherColor`	String \| fabric.Color

Source:

fabric.js, line 6294

Returns:

thisArg

Type: fabric.Color

setAlpha(alpha) → {fabric.Color}

Sets value of alpha channel for this color

Parameters:

Name	Type	Description
`alpha`	Number	Alpha value 0-1

Source:

fabric.js, line 6253

Returns:

thisArg

Type: fabric.Color

setSource(source)

Sets source of this color (where source is an array representation; ex: [200, 200, 100, 1])

Parameters:

Name	Type	Description
`source`	Array

Source:

fabric.js, line 6163

toBlackWhite(threshold) → {fabric.Color}

Transforms color to its black and white representation

Parameters:

Name	Type	Description
`threshold`	Number

Source:

fabric.js, line 6277

Returns:

thisArg

Type: fabric.Color

toGrayscale() → {fabric.Color}

Transforms color to its grayscale representation

Source:

fabric.js, line 6264

Returns:

thisArg

Type: fabric.Color

toHex() → {String}

Returns color representation in HEX format

Source:

fabric.js, line 6211

Returns:

ex: FF5555

Type: String

toHexa() → {String}

Returns color representation in HEXA format

Source:

fabric.js, line 6230

Returns:

ex: FF5555CC

Type: String

toHsl() → {String}

Returns color representation in HSL format

Source:

fabric.js, line 6189

Returns:

ex: hsl(0-360,0%-100%,0%-100%)

Type: String

toHsla() → {String}

Returns color representation in HSLA format

Source:

fabric.js, line 6200

Returns:

ex: hsla(0-360,0%-100%,0%-100%,0-1)

Type: String

toRgb() → {String}

Returns color representation in RGB format

Source:

fabric.js, line 6171

Returns:

ex: rgb(0-255,0-255,0-255)

Type: String

toRgba() → {String}

Returns color representation in RGBA format

Source:

fabric.js, line 6180

Returns:

ex: rgba(0-255,0-255,0-255,0-1)

Type: String