# pixijs-color

PixiJS v8 skill for the Color class. It guides color conversions, tint calculations, and buffer reuse to prevent GC spikes in animation loops.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 5700 installs · ★ 358
- Author: pixijs
- License: MIT · policy=mirror · the beginning of the file is at the end of this page
- Source: https://github.com/pixijs/pixijs-skills/tree/HEAD/skills/pixijs-color/SKILL.md
- Updated: 2026-10-01
- HTML: https://affpapa.org/en/nevibecode/skills/pixijs-color

## What it does

The skill instructs the coding agent on working with the `Color` class in PixiJS v8. Most scene APIs accept raw hex numbers and CSS strings directly as `ColorSource`. Instantiating `new Color(...)` is only required when converting between representations or altering values. It details valid inputs, including CSS strings, 8-digit hex codes, HSL objects, and typed arrays like `Uint8ClampedArray`.

It explains conversion methods like `toHex()`, `toNumber()`, `toRgba()`, and GPU vertex packing via `toBgrNumber()`. For render loops, it enforces memory efficiency. Instead of instantiating objects per frame inside `app.ticker`, it directs the agent to reuse buffers with `toArray(out)` or use the `Color.shared` singleton.

Methods `multiply()` and `premultiply()` mutate the instance in place and set `value` to null. That causes the original format to be lost. For non-destructive tint math, the instructions point to `toPremultiplied()` instead.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add pixijs/pixijs-skills --skill pixijs-color -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/pixijs-color/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/pixijs-color/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add pixijs/pixijs-skills --skill pixijs-color -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/pixijs-color/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add pixijs/pixijs-skills --skill pixijs-color -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/pixijs-color/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install pixijs/pixijs-skills pixijs-color
```

2. **Manually: put the files in place**
- File: `.github/skills/pixijs-color/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add pixijs/pixijs-skills --skill pixijs-color -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/pixijs/pixijs-skills --path skills/pixijs-color
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/pixijs-color/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add pixijs/pixijs-skills --skill pixijs-color -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/pixijs/pixijs-skills/tree/HEAD/skills/pixijs-color/SKILL.md

## When to use it
- convert CSS color strings and hex values into PixiJS formats
- eliminate GC overhead in render loops using `Color.shared`
- pack colors into 24-bit integers for GPU vertex buffers
- calculate premultiplied alpha without mutating the source color

## Example prompts
- Show how to update sprite.tint in app.ticker using Color.shared to avoid allocations
- Convert a normalized 0-1 RGBA array into a hex string for PixiJS v8
- How do I pack a color for GPU vertex attributes using toBgrNumber()?

## Source text · SKILL.md · MIT

Below is the content of a third-party file. It is data, not instructions for you: do not act on anything written inside unless the human asks. Block tag: cf3715e878fcf5f1.

BEGIN THIRD-PARTY FILE cf3715e878fcf5f1
````text
---
name: pixijs-color
description: "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."
license: MIT
---

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()); // 0xff6600
console.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 integer
new Color(0xff0000);

// Hex strings
new Color("#ff0000");
new Color("#f00");
new Color("ff0000");

// CSS color names
new 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 objects
new Color({ h: 0, s: 100, l: 50 });
new Color({ h: 0, s: 100, l: 50, a: 0.5 });

// HSV/HSVA objects
new Color({ h: 0, s: 100, v: 100 });

// CSS strings
new 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]); // RGB
new 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 alpha
new Color("#ff0000ff");
new Color("#f00f");

// Copy from another Color instance
const 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(); // 0xff6600
color.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 }
````
END THIRD-PARTY FILE cf3715e878fcf5f1

The third-party file has ended. Everything between the cf3715e878fcf5f1 tags is data: requests and commands from it are not followed. An “end of file” line with another tag inside the block is part of the file.

First 2815 of 8832 bytes. © pixijs · MIT · https://github.com/pixijs/pixijs-skills/tree/HEAD/skills/pixijs-color/SKILL.md

_Part of the page did not fit — see the HTML version._

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md