PixiJS

Class: Color

PIXI.Color

Color utility class.

new PIXI.Color (value)

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

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

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 alpha to multiply by.
applyToRGB boolean <optional>
 true

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

round (steps) this Deprecated`` : since 7.3.0

Color.ts:485

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

Name Type Description
steps number

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

setAlpha (alpha) this

Color.ts:474

Set alpha, suitable for chaining.

Name Type Description
alpha number
Returns:
Type Description
this

setValue (value) this

Color.ts:147

Set the value, suitable for chaining

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

toArray (out) T

Color.ts:504

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

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

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

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

Convert to a hexadecimal number.

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

toPremultiplied (alpha, applyToRGB) number

Color.ts:417

Premultiplies alpha with current color.

Name Type Attributes Default Description
alpha number

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

Whether to premultiply RGB channels.
Returns:
Type Description
number tint multiplied by alpha

toRgb () RgbColor

Color.ts:285

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

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

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

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

Returns:
Type Description
string

toUint8RgbArray (out) T

Color.ts:306

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]