Class Color

Color utility class.

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]

Memberof

PIXI

Since

7.2.0

Constructors

constructor

Properties

shared

Accessors

alpha blue green red value

Methods

multiply premultiply round setAlpha setValue toArray toHex toHexa toLittleEndianNumber toNumber toPremultiplied toRgb toRgba toRgbArray toRgbaString toUint8RgbArray

Constructors

constructor

Properties

Static Readonlyshared

shared: Color

Default Color object for static uses

Example

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

Accessors

alpha

  • get alpha(): number

  • Get alpha component (0 - 1)

    Returns number

blue

  • get blue(): number

  • Get blue component (0 - 1)

    Returns number

green

  • get green(): number

  • Get green component (0 - 1)

    Returns number

red

  • get red(): number

  • Get red component (0 - 1)

    Returns number

value

  • get value(): | null
    | string
    | number
    | Number
    | Uint8Array
    | number[]
    | Float32Array
    | Uint8ClampedArray
    | HslColor
    | HslaColor
    | HsvColor
    | HsvaColor
    | RgbColor
    | RgbaColor

  • Returns
        | null
        | string
        | number
        | Number
        | Uint8Array
        | number[]
        | Float32Array
        | Uint8ClampedArray
        | HslColor
        | HslaColor
        | HsvColor
        | HsvaColor
        | RgbColor
        | RgbaColor

  • set value(value: null | ColorSource): void

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

    Parameters

    Returns void

Methods

multiply

  • multiply(value: ColorSource): this

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

    Parameters

    Returns this

premultiply

  • premultiply(alpha: number, applyToRGB?: boolean): this

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

    Parameters

    • alpha: number

      The alpha to multiply by.

    • OptionalapplyToRGB: boolean

      Whether to premultiply RGB channels.

    Returns this

    • Itself.

round

  • round(steps: number): this

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

    Parameters

    • steps: number

      Number of steps which will be used as a cap when rounding colors

    Returns this

    Deprecated

    since 7.3.0

setAlpha

  • setAlpha(alpha: number): this

  • Set alpha, suitable for chaining.

    Parameters

    • alpha: number

    Returns this

setValue

  • setValue(value: ColorSource): this

  • Set the value, suitable for chaining

    Parameters

    Returns this

    See

    PIXI.Color.value

toArray

  • toArray(): number[]

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

    Returns number[]

    Example

    import { Color } from 'pixi.js';
    new Color('white').toArray(); // returns [1, 1, 1, 1]
  • toArray<T extends number[] | Float32Array>(out: T): T

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

    Type Parameters

    • T extends number[] | Float32Array

    Parameters

    • out: T

      Output array

    Returns T

    Example

    import { Color } from 'pixi.js';
    new Color('white').toArray(); // returns [1, 1, 1, 1]

toHex

  • toHex(): string

  • Convert to a hexidecimal string.

    Returns string

    Example

    import { Color } from 'pixi.js';
    new Color('white').toHex(); // returns "#ffffff"

toHexa

  • toHexa(): string

  • Convert to a hexidecimal string with alpha.

    Returns string

    Example

    import { Color } from 'pixi.js';
    new Color('white').toHexa(); // returns "#ffffffff"

toLittleEndianNumber

  • toLittleEndianNumber(): number

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

    Returns number

    • The color as a number in little endian format.

    Example

    import { Color } from 'pixi.js';
    new Color(0xffcc99).toLittleEndianNumber(); // returns 0x99ccff

toNumber

  • toNumber(): number

  • Convert to a hexadecimal number.

    Returns number

    Example

    import { Color } from 'pixi.js';
    new Color('white').toNumber(); // returns 16777215

toPremultiplied

  • toPremultiplied(alpha: number, applyToRGB?: boolean): number

  • Premultiplies alpha with current color.

    Parameters

    • alpha: number

      The alpha to multiply by.

    • OptionalapplyToRGB: boolean

      Whether to premultiply RGB channels.

    Returns number

    tint multiplied by alpha

toRgb

  • toRgb(): RgbColor

  • Convert to a RGB color object.

    Returns RgbColor

    Example

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

toRgba

  • toRgba(): RgbaColor

  • Convert to a RGBA color object.

    Returns RgbaColor

    Example

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

toRgbArray

  • toRgbArray(): number[]

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

    Returns number[]

    Example

    import { Color } from 'pixi.js';
    new Color('white').toRgbArray(); // returns [1, 1, 1]
  • toRgbArray<T extends number[] | Float32Array>(out: T): T

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

    Type Parameters

    • T extends number[] | Float32Array

    Parameters

    • out: T

      Output array

    Returns T

    Example

    import { Color } from 'pixi.js';
    new Color('white').toRgbArray(); // returns [1, 1, 1]

toRgbaString

  • toRgbaString(): string

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

    Returns string

toUint8RgbArray

  • toUint8RgbArray(): number[]

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

    Returns number[]

    Example

    import { Color } from 'pixi.js';
    new Color('white').toUint8RgbArray(); // returns [255, 255, 255]
  • toUint8RgbArray<T extends Uint8Array | number[] | Uint8ClampedArray>(out: T): T

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

    Type Parameters

    • T extends Uint8Array | number[] | Uint8ClampedArray

    Parameters

    • out: T

      Output array

    Returns T

    Example

    import { Color } from 'pixi.js';
    new Color('white').toUint8RgbArray(); // returns [255, 255, 255]

Settings

Member Visibility

On This Page

Constructors
Properties
Accessors
Methods