pixijs-color

Name: pixijs-color
Author: pixijs

2.9kinstalls15forks

How to install pixijs-color?

pixijs/pixijs-skills/pixijs-color

$npx -y skills add pixijs/pixijs-skills --skill pixijs-color

Installs into the current project.

Summary

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

Files · 1

View on GitHub

SKILL.md

1	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.
2
3	## Quick Start
4
5	```ts
6	const fillColor = new Color("#ff6600");
7	console.log(fillColor.toHex()); // '#ff6600'
8	console.log(fillColor.toNumber()); // 0xff6600
9	console.log(fillColor.toArray()); // [1, 0.4, 0, 1]
10
11	const g = new Graphics().rect(0, 0, 200, 100).fill(fillColor);
12	app.stage.addChild(g);
13
14	const sprite = Sprite.from("hero.png");
15	sprite.tint = "dodgerblue";
16	app.stage.addChild(sprite);
17
18	const t = Color.shared.setValue(0xffffff).multiply([1, 0.5, 0.5]).toNumber();
19	sprite.tint = t;
20	```
21
22	Related skills: `pixijs-scene-graphics` (fill/stroke colors), `pixijs-scene-sprite` (tint), `pixijs-blend-modes` (compositing).
23
24	## Core Patterns
25
26	### Accepted input formats
27
28	```ts
29	import { Color } from "pixi.js";
30
31	// Hex integer
32	new Color(0xff0000);
33
34	// Hex strings
35	new Color("#ff0000");
36	new Color("#f00");
37	new Color("ff0000");
38
39	// CSS color names
40	new Color("red");
41	new Color("dodgerblue");
42
43	// RGB/RGBA objects (components 0-255)
44	new Color({ r: 255, g: 0, b: 0 });
45	new Color({ r: 255, g: 0, b: 0, a: 0.5 });
46
47	// HSL/HSLA objects
48	new Color({ h: 0, s: 100, l: 50 });
49	new Color({ h: 0, s: 100, l: 50, a: 0.5 });
50
51	// HSV/HSVA objects
52	new Color({ h: 0, s: 100, v: 100 });
53
54	// CSS strings
55	new Color("rgb(255, 0, 0)");
56	new Color("rgba(255, 0, 0, 0.5)");
57	new Color("hsl(0, 100%, 50%)");
58
59	// Normalized 0-1 arrays (Float32Array or plain arrays)
60	new Color([1, 0, 0]); // RGB
61	new Color([1, 0, 0, 0.5]); // RGBA
62
63	// Uint8 arrays (components 0-255)
64	new Color(new Uint8Array([255, 0, 0]));
65	new Color(new Uint8ClampedArray([255, 0, 0, 128]));
66
67	// 8-digit hex with alpha
68	new Color("#ff0000ff");
69	new Color("#f00f");
70
71	// Copy from another Color instance
72	const red = new Color("red");
73	const copy = new Color(red);
74	```
75
76	### Conversion methods
77
78	```ts
79	import { Color } from "pixi.js";
80
81	const color = new Color("#ff6600");
82
83	color.toHex(); // '#ff6600'
84	color.toHexa(); // '#ff6600ff' (hex with alpha)
85	color.toNumber(); // 0xff6600
86	color.toArray(); // [1, 0.4, 0, 1] (normalized RGBA)
87	color.toRgbArray(); // [1, 0.4, 0] (normalized RGB, no alpha)
88	color.toRgbaString(); // 'rgba(255,102,0,1)'
89	color.toRgba(); // { r: 1, g: 0.4, b: 0, a: 1 }
90	color.toRgb(); // { r: 1, g: 0.4, b: 0 }
91	color.toUint8RgbArray(); // [255, 102, 0]
92
93	// setValue() is the chainable way to change a color's value
94	color.setValue(0xff0000).toHex(); // '#ff0000'
95	```
96
97	### Component access
98
99	```ts
100	import { Color } from "pixi.js";
101
102	const color = new Color("rgba(255, 128, 0, 0.8)");
103
104	color.red; // 1
105	color.green; // ~0.502
106	color.blue; // 0
107	color.alpha; // 0.8
108	```
109
110	All component getters return normalized 0-1 values.
111
112	### Manipulation
113
114	```ts
115	import { Color } from "pixi.js";
116
117	const color = new Color("red");
118
119	// Set alpha (chainable)
120	color.setAlpha(0.5);
121
122	// Multiply with another color (destructive, modifies in place)
123	color.multiply(0x808080);
124
125	// Premultiply alpha (destructive, RGB channels multiplied by alpha)
126	color.premultiply(0.8);
127
128	// Premultiply alpha only (RGB unchanged)
129	color.premultiply(0.8, false);
130
131	// Chain operations
132	new Color("white").setAlpha(0.5).multiply([0.8, 0.2, 0.2]);
133	```
134
135	`multiply()` and `premultiply()` are destructive; they modify the color and set `value` to null (original format is lost).
136
137	### Non-destructive premultiplied output
138
139	```ts
140	import { Color } from "pixi.js";
141
142	const color = new Color("red").setAlpha(0.5);
143
144	const packed = color.toPremultiplied(color.alpha); // 0x7F7F0000
145	const alphaOnly = color.toPremultiplied(color.alpha, false); // 0x7FFF0000
146	```
147
148	`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.
149
150	### Reusing output buffers
151
152	```ts
153	import { Color } from "pixi.js";
154
155	const rgba = new Float32Array(4);
156	const rgb = new Float32Array(3);
157	const rgb8 = new Uint8Array(3);
158
159	app.ticker.add(() => {
160	Color.shared.setValue(sprite.tint).toArray(rgba).toRgbArray(rgb);
161
162	Color.shared.toUint8RgbArray(rgb8);
163	});
164	```
165
166	`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 i

People who liked this also viewed

6 picks

Type

pixijs-color

2.9kinstalls15forks

View on GitHub

How to install pixijs-color?

pixijs/pixijs-skills/pixijs-color

$npx -y skills add pixijs/pixijs-skills --skill pixijs-color

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	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.
2
3	## Quick Start
4
5	```ts
6	const fillColor = new Color("#ff6600");
7	console.log(fillColor.toHex()); // '#ff6600'
8	console.log(fillColor.toNumber()); // 0xff6600
9	console.log(fillColor.toArray()); // [1, 0.4, 0, 1]
10
11	const g = new Graphics().rect(0, 0, 200, 100).fill(fillColor);
12	app.stage.addChild(g);
13
14	const sprite = Sprite.from("hero.png");
15	sprite.tint = "dodgerblue";
16	app.stage.addChild(sprite);
17
18	const t = Color.shared.setValue(0xffffff).multiply([1, 0.5, 0.5]).toNumber();
19	sprite.tint = t;
20	```
21
22	Related skills: `pixijs-scene-graphics` (fill/stroke colors), `pixijs-scene-sprite` (tint), `pixijs-blend-modes` (compositing).
23
24	## Core Patterns
25
26	### Accepted input formats
27
28	```ts
29	import { Color } from "pixi.js";
30
31	// Hex integer
32	new Color(0xff0000);
33
34	// Hex strings
35	new Color("#ff0000");
36	new Color("#f00");
37	new Color("ff0000");
38
39	// CSS color names
40	new Color("red");
41	new Color("dodgerblue");
42
43	// RGB/RGBA objects (components 0-255)
44	new Color({ r: 255, g: 0, b: 0 });
45	new Color({ r: 255, g: 0, b: 0, a: 0.5 });
46
47	// HSL/HSLA objects
48	new Color({ h: 0, s: 100, l: 50 });
49	new Color({ h: 0, s: 100, l: 50, a: 0.5 });
50
51	// HSV/HSVA objects
52	new Color({ h: 0, s: 100, v: 100 });
53
54	// CSS strings
55	new Color("rgb(255, 0, 0)");
56	new Color("rgba(255, 0, 0, 0.5)");
57	new Color("hsl(0, 100%, 50%)");
58
59	// Normalized 0-1 arrays (Float32Array or plain arrays)
60	new Color([1, 0, 0]); // RGB
61	new Color([1, 0, 0, 0.5]); // RGBA
62
63	// Uint8 arrays (components 0-255)
64	new Color(new Uint8Array([255, 0, 0]));
65	new Color(new Uint8ClampedArray([255, 0, 0, 128]));
66
67	// 8-digit hex with alpha
68	new Color("#ff0000ff");
69	new Color("#f00f");
70
71	// Copy from another Color instance
72	const red = new Color("red");
73	const copy = new Color(red);
74	```
75
76	### Conversion methods
77
78	```ts
79	import { Color } from "pixi.js";
80
81	const color = new Color("#ff6600");
82
83	color.toHex(); // '#ff6600'
84	color.toHexa(); // '#ff6600ff' (hex with alpha)
85	color.toNumber(); // 0xff6600
86	color.toArray(); // [1, 0.4, 0, 1] (normalized RGBA)
87	color.toRgbArray(); // [1, 0.4, 0] (normalized RGB, no alpha)
88	color.toRgbaString(); // 'rgba(255,102,0,1)'
89	color.toRgba(); // { r: 1, g: 0.4, b: 0, a: 1 }
90	color.toRgb(); // { r: 1, g: 0.4, b: 0 }
91	color.toUint8RgbArray(); // [255, 102, 0]
92
93	// setValue() is the chainable way to change a color's value
94	color.setValue(0xff0000).toHex(); // '#ff0000'
95	```
96
97	### Component access
98
99	```ts
100	import { Color } from "pixi.js";
101
102	const color = new Color("rgba(255, 128, 0, 0.8)");
103
104	color.red; // 1
105	color.green; // ~0.502
106	color.blue; // 0
107	color.alpha; // 0.8
108	```
109
110	All component getters return normalized 0-1 values.
111
112	### Manipulation
113
114	```ts
115	import { Color } from "pixi.js";
116
117	const color = new Color("red");
118
119	// Set alpha (chainable)
120	color.setAlpha(0.5);
121
122	// Multiply with another color (destructive, modifies in place)
123	color.multiply(0x808080);
124
125	// Premultiply alpha (destructive, RGB channels multiplied by alpha)
126	color.premultiply(0.8);
127
128	// Premultiply alpha only (RGB unchanged)
129	color.premultiply(0.8, false);
130
131	// Chain operations
132	new Color("white").setAlpha(0.5).multiply([0.8, 0.2, 0.2]);
133	```
134
135	`multiply()` and `premultiply()` are destructive; they modify the color and set `value` to null (original format is lost).
136
137	### Non-destructive premultiplied output
138
139	```ts
140	import { Color } from "pixi.js";
141
142	const color = new Color("red").setAlpha(0.5);
143
144	const packed = color.toPremultiplied(color.alpha); // 0x7F7F0000
145	const alphaOnly = color.toPremultiplied(color.alpha, false); // 0x7FFF0000
146	```
147
148	`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.
149
150	### Reusing output buffers
151
152	```ts
153	import { Color } from "pixi.js";
154
155	const rgba = new Float32Array(4);
156	const rgb = new Float32Array(3);
157	const rgb8 = new Uint8Array(3);
158
159	app.ticker.add(() => {
160	Color.shared.setValue(sprite.tint).toArray(rgba).toRgbArray(rgb);
161
162	Color.shared.toUint8RgbArray(rgb8);
163	});
164	```
165
166	`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 i

People who liked this also viewed

6 picks

Type