PixiJS

Class: Color

Color

Color utility class. Can accept any ColorSource format in its constructor.

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]

new Color (value)

ts:152
Name Type Default Description
value ColorSource 0xffffff

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

Members

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 Exclude<Color, ColorSource> | null

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, {@link Color.premultiply premultiply} or round).
  • Otherwise, the color source used when setting is returned.

Methods

isColorLike (value) value is ColorSource static

ts:701

Check if the value is a color-like object

Name Type Description
value unknown

Value to check
Returns:
Type Description
value is ColorSource True if the value is a color-like object
Example
import { Color } from 'pixi.js';
Color.isColorLike('white'); // returns true
Color.isColorLike(0xffffff); // returns true
Color.isColorLike([1, 1, 1]); // returns true

multiply (value) this

ts:466

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

Name Type Description
value ColorSource

The color to multiply by.
Returns:
Type Description
this

premultiply (alpha, applyToRGB) Color

ts:486

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
Color
  • Itself.

setAlpha (alpha) this

ts:566

Set alpha, suitable for chaining.

Name Type Description
alpha number
Returns:
Type Description
this

setValue (value) this

ts:188

Set the value, suitable for chaining

Name Type Description
value ColorSource
See:
  • Color.value
Returns:
Type Description
this

toArray (out) T

ts:375

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]

toBgrNumber () number

ts:439

Convert to a BGR number

Returns:
Type Description
number
Example
import { Color } from 'pixi.js';
new Color(0xffcc99).toBgrNumber(); // returns 0x99ccff

toHex () string

ts:539

Convert to a hexadecimal string.

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

toHexa () string

ts:552

Convert to a hexadecimal string with alpha.

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

toLittleEndianNumber () number

ts:452

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

ts:428

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

ts:509

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

ts:327

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

ts:314

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

ts:402

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

ts:340

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

Returns:
Type Description
string

toUint8RgbArray (out) T

ts:348

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]