PixiJS

Class: Color

PIXI.Color

Color utility class.

new PIXI.Color (value)

Color.ts:107
Name Type Default Description
value PIXI.ColorSource 0xffffff

Optional value to use, if not provided, white is used.
Since:
  • 7.2.0

Example

import { Color } from 'pixi.js';
new Color('red').toArray(); // [1, 0, 0, 1]
new Color(0xff0000).toArray(); // [1, 0, 0, 1]
new Color('ff0000').toArray(); // [1, 0, 0, 1]
new Color('#f00').toArray(); // [1, 0, 0, 1]
new Color('0xff0000ff').toArray(); // [1, 0, 0, 1]
new Color('#f00f').toArray(); // [1, 0, 0, 1]
new Color({ r: 255, g: 0, b: 0, a: 0.5 }).toArray(); // [1, 0, 0, 0.5]
new Color('rgb(255, 0, 0, 0.5)').toArray(); // [1, 0, 0, 0.5]
new Color([1, 1, 1]).toArray(); // [1, 1, 1, 1]
new Color([1, 0, 0, 0.5]).toArray(); // [1, 0, 0, 0.5]
new Color(new Float32Array([1, 0, 0, 0.5])).toArray(); // [1, 0, 0, 0.5]
new Color(new Uint8Array([255, 0, 0, 255])).toArray(); // [1, 0, 0, 1]
new Color(new Uint8ClampedArray([255, 0, 0, 255])).toArray(); // [1, 0, 0, 1]
new Color({ h: 0, s: 100, l: 50, a: 0.5 }).toArray(); // [1, 0, 0, 0.5]
new Color('hsl(0, 100%, 50%, 50%)').toArray(); // [1, 0, 0, 0.5]
new Color({ h: 0, s: 100, v: 100, a: 0.5 }).toArray(); // [1, 0, 0, 0.5]

Members

PIXI.Color.shared staticreadonly

Default Color object for static uses

Example
import { Color } from 'pixi.js';
Color.shared.setValue(0xffffff).toHex(); // '#ffffff'

alpha number

Get alpha component (0 - 1)

blue number

Get blue component (0 - 1)

green number

Get green component (0 - 1)

red number

Get red component (0 - 1)

value PIXI.ColorSource

Set the current color source. A return value of null means the previous value was overridden (e.g., multiply, round).

Methods

multiply (value) this

Color.ts:275

Multiply with another color. This action is destructive, and will override the previous value property to be null.

Name Type Description
value PIXI.ColorSource

The color to multiply by.
Returns:
Type Description
this

premultiply (alpha, applyToRGB) PIXI.Color

Color.ts:295

Converts color to a premultiplied alpha format. This action is destructive, and will override the previous value property to be null.

Name Type Attributes Default Description
alpha number

The color to multiply by.
applyToRGB boolean <optional>
 true

Whether to premultiply RGB channels.
Returns:
Type Description
PIXI.Color
  • Itself.

round (step) this

Color.ts:382

Rounds the specified color according to the step. This action is destructive, and will override the previous value property to be null.

Name Type Description
step number

Number of steps which will be used as a cap when rounding colors
Returns:
Type Description
this

setAlpha (alpha) this

Color.ts:371

Set alpha, suitable for chaining.

Name Type Description
alpha number
Returns:
Type Description
this

setValue (value) this

Color.ts:141

Set the value, suitable for chaining

Name Type Description
value PIXI.ColorSource
Returns:
Type Description
this

toArray (out) T

Color.ts:402

Convert to an [R, G, B, A] array of normalized floats (numbers from 0.0 to 1.0).

Name Type Attributes Description
out Array<number> | Float32Array <optional>

Output array
Returns:
Type Description
T
Example
import { Color } from 'pixi.js';
new Color('white').toArray(); // returns [1, 1, 1, 1]

toHex () string

Color.ts:344

Convert to a hexidecimal string.

Returns:
Type Description
string
Example
import { Color } from 'pixi.js';
new Color('white').toHex(); // returns "#ffffff"

toHexa () string

Color.ts:357

Convert to a hexidecimal string with alpha.

Returns:
Type Description
string
Example
import { Color } from 'pixi.js';
new Color('white').toHexa(); // returns "#ffffffff"

toLittleEndianNumber () number

Color.ts:261

Convert to a hexadecimal number in little endian format (e.g., BBGGRR).

Returns:
Type Description
number
  • The color as a number in little endian format.
Example
import { Color } from 'pixi.js';
new Color(0xffcc99).toLittleEndianNumber(); // returns 0x99ccff

toNumber () number

Color.ts:250

Convert to a hexadecimal number.

Returns:
Type Description
number
Example
import { Color } from 'pixi.js';
new Color('white').toNumber(); // returns 16777215

toPremultiplied (alpha) number

Color.ts:318

Premultiplies alpha with current color.

Name Type Description
alpha number

floating point alpha (0.0-1.0)
Returns:
Type Description
number tint multiplied by alpha

toRgb () RgbColor

Color.ts:190

Convert to a RGB color object.

Returns:
Type Description
RgbColor
Example
import { Color } from 'pixi.js';
new Color('white').toRgb(); // returns { r: 1, g: 1, b: 1 }

toRgba () RgbaColor

Color.ts:177

Convert to a RGBA color object.

Returns:
Type Description
RgbaColor
Example
import { Color } from 'pixi.js';
new Color('white').toRgb(); // returns { r: 1, g: 1, b: 1, a: 1 }

toRgbArray (out) T

Color.ts:231

Convert to an [R, G, B] array of normalized floats (numbers from 0.0 to 1.0).

Name Type Attributes Description
out Array<number> | Float32Array <optional>

Output array
Returns:
Type Description
T
Example
import { Color } from 'pixi.js';
new Color('white').toRgbArray(); // returns [1, 1, 1]

toRgbaString () string

Color.ts:203

Convert to a CSS-style rgba string: rgba(255,255,255,1.0).

Returns:
Type Description
string

toUint8RgbArray (out) T

Color.ts:211

Convert to an [R, G, B] array of clamped uint8 values (0 to 255).

Name Type Attributes Description
out Array<number> | Uint8Array | Uint8ClampedArray <optional>

Output array
Returns:
Type Description
T
Example
import { Color } from 'pixi.js';
new Color('white').toUint8RgbArray(); // returns [255, 255, 255]