PixiJS

Class: Color

PIXI.Color

Color utility class.

new PIXI.Color (value)

Color.ts:109
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

The current color source.

When setting:

  • Setting to an instance of Color will copy its color source and components.
  • Otherwise, Color will try to normalize the color source and set the components. If the color source is invalid, an Error will be thrown and the Color will left unchanged.

Note: The null in the setter's parameter type is added to match the TypeScript rule: return type of getter must be assignable to its setter's parameter type. Setting value to null will throw an Error.

When getting:

  • A return value of null means the previous value was overridden (e.g., multiply, premultiply or round).
  • Otherwise, the color source used when setting is returned.

Methods

multiply (value) this

Color.ts:300

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:320

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:407

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:396

Set alpha, suitable for chaining.

Name Type Description
alpha number
Returns:
Type Description
this

setValue (value) this

Color.ts:145

Set the value, suitable for chaining

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

toArray (out) T

Color.ts:427

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:369

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:382

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:286

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:275

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:343

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:211

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:198

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:254

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:224

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

Returns:
Type Description
string

toUint8RgbArray (out) T

Color.ts:232

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]