Use this skill when creating, converting, or manipulating colors in PixiJS v8. Covers Color class input formats (hex, CSS names, RGB/HSL objects, arrays, Uint8Array), conversion methods (toHex, toNumber, toArray, toRgba), component access, setAlpha/multiply/premultiply, Color.shared singleton. Trigg

The Color class creates and converts colors for tints, fills, strokes, and anywhere PixiJS accepts a ColorSource . Most APIs accept raw hex/strings directly, so explicit new Color(...) is only needed when converting formats or manipulating values. Quick Start Related skills: pixijs scene graphics (fill/stroke colors), pixijs scene sprite (tint), pixijs blend modes (compositing). Core Patterns Accepted input formats Conversion methods Component access All component getters return normalized 0 1 values. Manipulation multiply() and premultiply() are destructive; they modify the color and set value to null (original format is lost). Non destructive premultiplied output toPremultiplied(alpha, applyToRGB?) returns a 32 bit 0xAARRGGBB integer without mutating this . Use it in batchers and tint math where the source color must be reused. When applyToRGB is false , only the alpha byte is packed; the RGB stays at its full value. Reusing output buffers toArray(out?) , toRgbArray(out?) , and toUint8RgbArray(out?) accept a reusable number[] , Float32Array , Uint8Array , or Uint8ClampedArray and write into it. Pass your own buffer in hot paths to avoid allocating per frame; omit the argument and the Color instance returns its internal cache array. Packing for GPU buffers Method Returns toBgrNumber() 24 bit 0xBBGGRR integer with R/B swapped toLittleEndianNumber() Same 24 bit swap, convenient for little endian vertex writes Both are cheap and useful when emitting colors straight into packed vertex attributes. Color.shared for temporary operations Color.shared is a singleton that avoids allocating a new Color on every call. This matters in hot paths like render loops or per frame tint calculations where repeated new Color() creates GC pressure. Do not store references to it; other code may mutate it. Validating input Color.isColorLike() checks the structural shape (string, number, array, or recognized object). It doesn't validate that a string is a real CSS color name, nor that array values fall in range. Use it as a type guard before passing user input to new Color() or setValue() . Common Mistakes [MEDIUM] Expecting toRgba() to return 0 255 values Wrong: Correct: RGB object inputs use 0 255 range ( { r: 255, g: 0, b: 0 } ), but all output methods ( toRgba() , toRgb() , toArray() , toRgbArray() ) normalize to 0 1. Use toUint8RgbArray() when you need 0 255 integers for CSS or external APIs. [MEDIUM] Using 0 255 range in color arrays Wrong: Correct: Plain number arrays ( number[] and Float32Array ) use normalized 0 1 range. [255, 0, 0] clamps to [1, 0, 0] because values are clamped, but [200, 100, 50] does not produce the expected color. Use Uint8Array or Uint8ClampedArray for 0 255 input. [MEDIUM] Using utils.string2hex or utils.hex2string Wrong: Correct: The utils namespace was removed in v8. Use the Color class for all color conversions. API Reference [Color](https://pixijs.download/release/docs/color.Color.html.md) [ColorSource](https://pixijs.download/release/docs/color.ColorSource.html.md)

pixijs-color