Pixijs Color

作者 pixijs83760c6f5346MIT346 個星標收錄於 2026年10月8日更新於 2026年10月8日儲存庫7 天前更新

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. Triggers on: Color, ColorSource, hex, rgb, hsl, tint, premultiply, Color.shared, color conversion.

僅含說明Software Development
AI 產生的概覽

介紹 PixiJS v8 Color 類別建立、轉換與操作顏色的參考文件。

功能
這個技能說明 PixiJS v8 的 Color 類別：支援的輸入格式（十六進位、CSS 顏色名稱、RGB/HSL/HSV 物件、正規化陣列、Uint8Array）、轉換方法（例如 toHex、toNumber、toArray、toRgba）、分量存取，以及 setAlpha、multiply、premultiply 等操作方法。內容也涵蓋 Color.shared 單例、可重複使用的輸出緩衝區、GPU 封裝輔助方法、以 Color.isColorLike 驗證輸入，以及常見錯誤。它只是純說明文件，內含程式碼範例，沒有指令碼或素材。
適用情境
適合在撰寫需要為 tint、填色與描邊建立、轉換或操作顏色的 PixiJS v8 程式碼時使用，或排查顏色格式與數值範圍（0-1 與 0-255）問題時。
執行需求
需要以 PixiJS v8 為目標函式庫；不需要指令碼、憑證或網路存取。

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

ts
const fillColor = new Color("#ff6600");console.log(fillColor.toHex()); // '#ff6600'console.log(fillColor.toNumber()); // 0xff6600console.log(fillColor.toArray()); // [1, 0.4, 0, 1]
const g = new Graphics().rect(0, 0, 200, 100).fill(fillColor);app.stage.addChild(g);
const sprite = Sprite.from("hero.png");sprite.tint = "dodgerblue";app.stage.addChild(sprite);
const t = Color.shared.setValue(0xffffff).multiply([1, 0.5, 0.5]).toNumber();sprite.tint = t;

Related skills: pixijs-scene-graphics (fill/stroke colors), pixijs-scene-sprite (tint), pixijs-blend-modes (compositing).

Core Patterns

Accepted input formats

ts
import { Color } from "pixi.js";
// Hex integernew Color(0xff0000);
// Hex stringsnew Color("#ff0000");new Color("#f00");new Color("ff0000");
// CSS color namesnew Color("red");new Color("dodgerblue");
// RGB/RGBA objects (components 0-255)new Color({ r: 255, g: 0, b: 0 });new Color({ r: 255, g: 0, b: 0, a: 0.5 });
// HSL/HSLA objectsnew Color({ h: 0, s: 100, l: 50 });new Color({ h: 0, s: 100, l: 50, a: 0.5 });
// HSV/HSVA objectsnew Color({ h: 0, s: 100, v: 100 });
// CSS stringsnew Color("rgb(255, 0, 0)");new Color("rgba(255, 0, 0, 0.5)");new Color("hsl(0, 100%, 50%)");
// Normalized 0-1 arrays (Float32Array or plain arrays)new Color([1, 0, 0]); // RGBnew Color([1, 0, 0, 0.5]); // RGBA
// Uint8 arrays (components 0-255)new Color(new Uint8Array([255, 0, 0]));new Color(new Uint8ClampedArray([255, 0, 0, 128]));
// 8-digit hex with alphanew Color("#ff0000ff");new Color("#f00f");
// Copy from another Color instanceconst red = new Color("red");const copy = new Color(red);

Conversion methods

ts
import { Color } from "pixi.js";
const color = new Color("#ff6600");
color.toHex(); // '#ff6600'color.toHexa(); // '#ff6600ff' (hex with alpha)color.toNumber(); // 0xff6600color.toArray(); // [1, 0.4, 0, 1] (normalized RGBA)color.toRgbArray(); // [1, 0.4, 0] (normalized RGB, no alpha)color.toRgbaString(); // 'rgba(255,102,0,1)'color.toRgba(); // { r: 1, g: 0.4, b: 0, a: 1 }color.toRgb(); // { r: 1, g: 0.4, b: 0 }color.toUint8RgbArray(); // [255, 102, 0]
// setValue() is the chainable way to change a color's valuecolor.setValue(0xff0000).toHex(); // '#ff0000'

Component access

ts
import { Color } from "pixi.js";
const color = new Color("rgba(255, 128, 0, 0.8)");
color.red; // 1color.green; // ~0.502color.blue; // 0color.alpha; // 0.8

All component getters return normalized 0-1 values.

Manipulation

ts
import { Color } from "pixi.js";
const color = new Color("red");
// Set alpha (chainable)color.setAlpha(0.5);
// Multiply with another color (destructive, modifies in place)color.multiply(0x808080);
// Premultiply alpha (destructive, RGB channels multiplied by alpha)color.premultiply(0.8);
// Premultiply alpha only (RGB unchanged)color.premultiply(0.8, false);
// Chain operationsnew Color("white").setAlpha(0.5).multiply([0.8, 0.2, 0.2]);

multiply() and premultiply() are destructive; they modify the color and set value to null (original format is lost).

Non-destructive premultiplied output

ts
import { Color } from "pixi.js";
const color = new Color("red").setAlpha(0.5);
const packed = color.toPremultiplied(color.alpha); // 0x7F7F0000const alphaOnly = color.toPremultiplied(color.alpha, false); // 0x7FFF0000

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

ts
import { Color } from "pixi.js";
const rgba = new Float32Array(4);const rgb = new Float32Array(3);const rgb8 = new Uint8Array(3);
app.ticker.add(() => {  Color.shared.setValue(sprite.tint).toArray(rgba).toRgbArray(rgb);
  Color.shared.toUint8RgbArray(rgb8);});

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

MethodReturns
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

ts
import { Color } from "pixi.js";
// One-off conversion without allocating a new Colorconst hex = Color.shared.setValue("#ff6600").toNumber();const arr = Color.shared.setValue(0xff0000).toArray();

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.

ts
import { Color } from "pixi.js";
// Good: reuse shared instance in a per-frame callbackapp.ticker.add(() => {  const t = performance.now() / 1000;  sprite.tint = Color.shared    .setValue("white")    .multiply([Math.sin(t) * 0.5 + 0.5, 0.2, 0.8])    .toNumber();});

Validating input

ts
import { Color } from "pixi.js";
Color.isColorLike("red"); // trueColor.isColorLike("#ff0000"); // trueColor.isColorLike(0xff0000); // trueColor.isColorLike([1, 0, 0]); // trueColor.isColorLike({ r: 1, g: 0, b: 0 }); // trueColor.isColorLike({ foo: 1 }); // falseColor.isColorLike(null); // false

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:

ts
import { Color } from "pixi.js";
const { r, g, b } = new Color({ r: 255, g: 128, b: 0 }).toRgba();// r = 1, g = ~0.502, b = 0 (NOT 255, 128, 0)

Correct:

ts
import { Color } from "pixi.js";
// Use toUint8RgbArray() for 0-255 outputconst [r, g, b] = new Color({ r: 255, g: 128, b: 0 }).toUint8RgbArray();// r = 255, g = 128, b = 0

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:

ts
import { Color } from "pixi.js";
new Color([255, 0, 0]); // NOT red; values are interpreted as 0-1

Correct:

ts
import { Color } from "pixi.js";
new Color([1, 0, 0]); // red via normalized arraynew Color(0xff0000); // red via hexnew Color("red"); // red via CSS namenew Color(new Uint8Array([255, 0, 0])); // red via Uint8Array (0-255)

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:

ts
import { utils } from "pixi.js";
const hex = utils.string2hex("#ff0000");

Correct:

ts
import { Color } from "pixi.js";
const hex = new Color("#ff0000").toNumber();const str = new Color(0xff0000).toHex();

The utils namespace was removed in v8. Use the Color class for all color conversions.

API Reference

來源與署名

來源：pixijs/pixijs-skills位於skills/pixijs-color提交83760c6

授權條款： MIT

內容歸原作者所有。SourceWeft 從公開儲存庫中收錄這些內容。

檢舉或申請下架

更多來自 pixijs/pixijs-skills 的技能

Pixijs Ticker

pixijs

說明 PixiJS v8 中如何透過 Ticker 控制渲染迴圈：回呼、時間增量、優先順序、影格率上限與手動渲染。

Software Development3467 天前更新

Pixijs Scene Text

pixijs

指導在 PixiJS v8 中使用 Text、BitmapText、HTMLText、SplitText 與 SplitBitmapText 繪製文字。

Software Development3467 天前更新

Pixijs Scene Sprite

pixijs

在 PixiJS v8 中使用 Sprite、AnimatedSprite、NineSliceSprite 和 TilingSprite 繪製圖像的參考指南。

Software Development3467 天前更新

Pixijs Scene Particle Container

pixijs

PixiJS v8 ParticleContainer 與 Particle 使用參考，用於高效渲染成千上萬個輕量精靈。

Software Development3467 天前更新

Pixijs Scene Mesh

pixijs

指導 PixiJS v8 網格渲染：Mesh、MeshSimple、MeshPlane、MeshRope 與 PerspectiveMesh 的用法。

Software Development3467 天前更新

Pixijs Scene Graphics

pixijs

PixiJS v8 Graphics API 參考，用於繪製向量圖形、路徑、填色、描邊與漸層。

Software Development3467 天前更新

更多Software Development技能

Playground

anthropics

精選

建立自成一體的互動式 HTML 遊樂場，包含控制項、即時預覽與可複製的提示詞輸出。

Software Development37K今天更新

M5 Onboard

anthropics

精選

透過 USB 偵測 M5Stack ESP32 開發板，燒錄 UIFlow 2.0 韌體並安裝 MicroPython 應用程式套件。

Software Development37K今天更新

Cardputer Buddy

anthropics

精選

指導迭代 Cardputer-Adv 的 MicroPython 應用程式套件：新增應用程式、透過 USB 序列埠推送檔案、查看日誌並執行 REPL 指令。

Software Development37K今天更新

Web Design Guidelines

vercel-labs

精選

依據從遠端來源取得的 Web Interface Guidelines 審查 UI 程式碼，並以 file:line 形式回報問題。

Software Development32K5 週前更新

Vercel React Native Skills

vercel-labs

精選

React Native 與 Expo 最佳實務規則，涵蓋清單效能、動畫、導覽、UI 模式、狀態與 monorepo 設定。

Software Development32K5 週前更新

Vercel React Best Practices

vercel-labs

精選

Vercel 的 React 與 Next.js 效能指南，以 70 條規則的形式用於撰寫、審查與重構程式碼。

Software Development32K5 週前更新