pixijs-color

Convert PixiJS v8 Color inputs into hex, number, array, and RGBA outputs.

Updated Mar 13, 2022

Search Tags:#rendering #pixijs #color conversion #tint #alpha premultiply #typed arrays #gpu-ready

Ready to run

npx skills add https://github.com/alexkafer/alexkafer-web --skill pixijs-color-alexkafer

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: pixijs-color
Source: https://github.com/alexkafer/alexkafer-web/tree/main/.agents/skills/pixijs-color
Command: npx skills add https://github.com/alexkafer/alexkafer-web --skill pixijs-color-alexkafer

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

PixiJS color APIs often accept many input formats, but converting between hex, CSS names, numeric representations, and component arrays can be tedious and error-prone.

Core Features & Use Cases

Color format normalization: Create and interpret PixiJS Color values from hex, CSS color names, RGB/HSL/HSV objects, arrays, and typed arrays (including alpha variants).
Reliable conversion outputs: Convert a Color into numbers, hex strings, normalized component arrays, 0–255 integer arrays, and RGBA string/object forms for different rendering and integration needs.
In-place and cached operations: Modify tint/alpha via chainable and destructive methods (setAlpha, multiply, premultiply) and use Color.shared for allocation-free hot-path conversions.

Quick Start

Use the pixijs-color skill to convert "#ff6600" into a PixiJS-friendly number, then apply it as a Graphics fill color.

Frequently Asked Questions about pixijs-color

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I convert a hex string to a number for PixiJS Graphics fill?▼

PixiJS color conversion transforms hex strings like "#ff6600" into GPU-ready numbers using the Color class. You can then apply the resulting numeric value directly as a Graphics fill or stroke color in your rendering pipeline.

Can I use CSS color names and RGB objects as input for PixiJS tinting?▼

PixiJS color format normalization accepts CSS color names, RGB/HSL/HSV objects, arrays, and typed arrays as valid inputs. The Color class interprets these varied formats and normalizes them for consistent tinting and rendering operations.

What's the best way to handle frequent color conversions without memory allocation?▼

Using Color.shared provides allocation-free hot-path conversions for PixiJS rendering workflows. This reusable instance avoids creating new objects during rapid color transformations, optimizing performance in render loops.

How does alpha premultiply work when preparing PixiJS colors for rendering?▼

Alpha premultiply in PixiJS multiplies RGB components by the alpha value to produce GPU-ready color formats. The premultiply method modifies the Color object destructively, preparing normalized component arrays for rendering pipelines.

Does PixiJS v8 support converting colors to normalized arrays and 0-255 integers?▼

PixiJS v8 Color supports converting values to normalized component arrays, 0-255 integer arrays, RGBA strings, and hex outputs. These conversion methods provide flexible output representations for different rendering and integration requirements.

Why do my typed array inputs fail during PixiJS color conversion?▼

PixiJS color conversion requires typed arrays to match expected component lengths for proper interpretation. Ensure your typed arrays contain valid RGBA or RGB values within acceptable ranges before passing them to the Color class.