PixiJS

Namespace: color

color

Pixi supports multiple color formats, including CSS color strings, hex, numbers, and arrays.

When providing values for any of the color properties, you can use any of the ColorSource formats.

import { Color } from 'pixi.js';

// All of these are valid:
sprite.tint = 'red';
sprite.tint = 0xff0000;
sprite.tint = '#ff0000';
sprite.tint = new Color('red');

// Same for graphics fill/stroke colors and other  color values:
graphics.fill({ color: 'red' });
graphics.fill({ color: 0xff0000 });
graphics.stroke({ color: '#ff0000' });
graphics.stroke({ color: new Color('red')};

Classes

Color

Type Definitions

ColorSource

ts:38

Valid formats to use when defining any color properties, also valid for the Color constructor.

These types are extended from colord with some PixiJS-specific extensions.

Possible value types are:

  • Color names: 'red', 'green', 'blue', 'white', etc.
  • RGB hex integers (0xRRGGBB): 0xff0000, 0x00ff00, 0x0000ff, etc.
  • RGB(A) hex strings:
    • 6 digits (RRGGBB): 'ff0000', '#00ff00', '0x0000ff', etc.
    • 3 digits (RGB): 'f00', '#0f0', '0x00f', etc.
    • 8 digits (RRGGBBAA): 'ff000080', '#00ff0080', '0x0000ff80', etc.
    • 4 digits (RGBA): 'f008', '#0f08', '0x00f8', etc.
  • RGB(A) objects: { r: 255, g: 0, b: 0 }, { r: 255, g: 0, b: 0, a: 0.5 }, etc.
  • RGB(A) strings: 'rgb(255, 0, 0)', 'rgb(100% 0% 0%)', 'rgba(255, 0, 0, 0.5)', 'rgba(100% 0% 0% / 50%)', etc.
  • RGB(A) arrays: [1, 0, 0], [1, 0, 0, 0.5], etc.
  • RGB(A) Float32Array: new Float32Array([1, 0, 0]), new Float32Array([1, 0, 0, 0.5]), etc.
  • RGB(A) Uint8Array: new Uint8Array([255, 0, 0]), new Uint8Array([255, 0, 0, 128]), etc.
  • RGB(A) Uint8ClampedArray: new Uint8ClampedArray([255, 0, 0]), new Uint8ClampedArray([255, 0, 0, 128]), etc.
  • HSL(A) objects: { h: 0, s: 100, l: 50 }, { h: 0, s: 100, l: 50, a: 0.5 }, etc.
  • HSL(A) strings: 'hsl(0, 100%, 50%)', 'hsl(0deg 100% 50%)', 'hsla(0, 100%, 50%, 0.5)', 'hsla(0deg 100% 50% / 50%)', etc.
  • HSV(A) objects: { h: 0, s: 100, v: 100 }, { h: 0, s: 100, v: 100, a: 0.5 }, etc.
  • Color objects.
Since:
  • 7.2.0

RgbaArray

ts:30

RGBA color array.

[number, number, number, number]