pencil.js / color / Color

Class: Color

Defined in: color.ts:17

Color class

Constructors

Constructor

new Color(...colorDefinition): Color;

Defined in: color.ts:45

Color constructor

Parameters

Parameter	Type	Description
...colorDefinition	ColorDefinition[]	Many types accepted (other Color instance, color name, hex string, hex number, red/green/blue/alpha value)

Returns

Color

Example

new Color("indigo"); // Any valid CSS color name
new Color("#123456"); // Hex string definition
new Color("#123"); // Hex shorthand string definition, #123 <=> #112233
new Color("rgb(10, 20, 30)"); // Any valid CSS color string
new Color(0x123456); // Hex number definition
new Color(0.1, 0.2, 0.3); // Red, Green, Blue definition
// Every definition can have one more optional parameter for alpha (opacity)
new Color("violet", 0.5);

Accessors

alpha

Get Signature

get alpha(): number;

Defined in: color.ts:99

Transparency channel value (from 0 to 1)

Returns

number

Set Signature

set alpha(value): void;

Defined in: color.ts:103

Parameters

Parameter	Type
value	number

Returns

void

---

array

Get Signature

get array(): [number, number, number];

Defined in: color.ts:111

Return an array with red, green and blue value

Example

[0.1, 0.2, 0.3]

Returns

[number, number, number]

---

blue

Get Signature

get blue(): number;

Defined in: color.ts:88

Blue channel value (from 0 to 1)

Returns

number

Set Signature

set blue(value): void;

Defined in: color.ts:92

Parameters

Parameter	Type
value	number

Returns

void

---

green

Get Signature

get green(): number;

Defined in: color.ts:77

Green channel value (from 0 to 1)

Returns

number

Set Signature

set green(value): void;

Defined in: color.ts:81

Parameters

Parameter	Type
value	number

Returns

void

---

hex

Get Signature

get hex(): string;

Defined in: color.ts:119

Return hexadecimal notation (with alpha when not opaque)

Example

"#123456"

Returns

string

---

name

Get Signature

get name(): string;

Defined in: color.ts:136

Return the closest CSS color name

Example

"aliceblue"

Returns

string

---

red

Get Signature

get red(): number;

Defined in: color.ts:66

Red channel value (from 0 to 1)

Returns

number

Set Signature

set red(value): void;

Defined in: color.ts:70

Parameters

Parameter	Type
value	number

Returns

void

---

rgb

Get Signature

get rgb(): string;

Defined in: color.ts:128

Return hexadecimal notation (alias of hex)

Example

"#123456"

Returns

string

Methods

clone()

clone(): Color;

Defined in: color.ts:52

Create a new copy of this color

Returns

Color

---

gray()

gray(): this;

Defined in: color.ts:194

Change to its greyscale value (alias of grey)

Returns

this

Itself

---

grey()

grey(): this;

Defined in: color.ts:185

Change to its greyscale value

Returns

this

Itself

---

hue()

hue(value): this;

Defined in: color.ts:203

Change hue value (0 = red, 0.5 = cyan, 1 = red, 1.5 = cyan ...)

Parameters

Parameter	Type	Description
value	number	Any value between 0 and 1

Returns

this

Itself

---

lerp()

lerp(colorDefinition, ratio): this;

Defined in: color.ts:267

Change the color toward another color

Parameters

Parameter	Type	Description
colorDefinition	ColorDefinition	Any other color
ratio	number	Ratio of distance to move (0 = no change, 0.5 = equal mix, 1 = same as target color)

Returns

this

Itself

---

level()

level(number): this;

Defined in: color.ts:248

Restrict the color space to an amount of possible value

Parameters

Parameter	Type	Description
number	number	Number of allowed value

Returns

this

Itself

---

lightness()

lightness(value): this;

Defined in: color.ts:226

Change lightness value (0 = black, 0.5 = pure color, 1 = white)

Parameters

Parameter	Type	Description
value	number	Any value between 0 and 1

Returns

this

Itself

---

mix()

mix(colorDefinition, ratio): this;

Defined in: color.ts:279

Change the color toward another color (alias of lerp)

Parameters

Parameter	Type	Description
colorDefinition	ColorDefinition	Any other color
ratio	number	Ratio of distance to move (0 = no change, 0.5 = equal mix, 1 = same as target color)

Returns

this

Itself

---

reverse()

reverse(): this;

Defined in: color.ts:238

Invert the color value

Returns

this

Itself

---

saturation()

saturation(value): this;

Defined in: color.ts:213

Change saturation value (0 = grey, 1 = pure color)

Parameters

Parameter	Type	Description
value	number	Any value between 0 and 1

Returns

this

Itself

---

set()

set(...colorDefinition): this;

Defined in: color.ts:147

Change this values

Parameters

Parameter	Type	Description
...colorDefinition	ColorDefinition[]	Any supported color definition (see constructor)

Returns

this

Itself

---

toJSON()

toJSON(): [number, number, number, number];

Defined in: color.ts:293

Return a json ready array [red, green, blue, alpha]

Returns

[number, number, number, number]

---

toString()

toString(): string;

Defined in: color.ts:286

Return a CSS compatible color string

Returns

string

---

from()

static from(...colorDefinition): Color;

Defined in: color.ts:301

Return an instance from a generic definition

Parameters

Parameter	Type	Description
...colorDefinition	| ColorDefinition[] | [[number, number, number, number?]]	Any valid color definition (see constructor)

Returns

Color