Color

8-bit RGBA color with hex, packed, HSV and HSL forms.

An 8-bit RGBA color, channels 0–255. Global class, no import.

const orange = new Color(255, 128, 0);            // alpha defaults to 255
const faded = orange.lerp("#ffffff", 0.5);        // any ColorLike works where a color is expected
const glass = Color.from([255, 255, 255, 64]);

A plain number is always packed 0xAABBGGRR, red in the low byte. Fields r, g, b, a take integers 0–255, anything else throws.

ColorLike is a Color, a packed number, "#rgb", "#rgba", "#rrggbb", "#rrggbbaa", [r, g, b, a?] or { r, g, b, a? }.

Overview

Common

from, set, add, lerp…

Creating

fromHex, fromRGB, fromHSV, red()…

Adjusting

scale, withAlpha, withAlphaF, lerp.

Converting

toHex, toABGR, toHSV…

---

Common

Every argument takes any ColorLike, not just a Color.

Member	Does
new Color(value), Color.from(value)	Copy from any ColorLike.
set(...)	Replaces every component in place, returns this. Same arguments as the constructor.
clone()	A copy.
equals(other, epsilon?)	Every component within epsilon. Default 0, exact.
toArray(), toJSON()	Plain array, plain object.
toString()	”Color(…)”
add(other), sub(other)	Component-wise.
scale(factor)	Every component times factor.
mul(x), div(x)	By a number, or component-wise by another value. Dividing by zero throws RangeError.
lerp(other, t)	Linear blend, t not clamped.
normalize(), normalized()	The first changes the value and returns this, the second returns a copy.

Only set() and normalize() change the value. Nothing changes its arguments.

Color has no mul, div or normalize. Channel math clamps instead of wrapping, and lerp clamps t to 0–1.

---

Creating

The constructor with no arguments is opaque white.

new Color(255) is not grey or white. One number is the packed form, so it’s red with alpha 0.

Static	From
Color.fromABGR(value)	0xAABBGGRR, same as passing the number
Color.fromRGBA(value)	0xRRGGBBAA
Color.fromARGB(value)	0xAARRGGBB
Color.fromRGB(value)	0xRRGGBB, alpha 255, top byte ignored
Color.fromFloat(r, g, b, a?)	Channels 0–1, clamped, alpha defaults to 1
Color.white(), black(), red(), green(), blue()	Opaque
Color.transparent()	(0, 0, 0, 0)

Color.fromRGBA(0xff8800ff);   // opaque orange
Color.fromRGB(0x008080);      // teal

fromHex

Color.fromHex(hex: string): Color

Parses rgb, rgba, rrggbb or rrggbbaa, with or without #. Anything else throws TypeError.

Color.fromHex("#00ff0080");   // half-transparent green
Color.fromHex(userInput);     // plain strings too, unlike ColorLike

fromHSV

Color.fromHSV(h: number, s: number, v: number, a?: number): Color
Color.fromHSL(h: number, s: number, l: number, a?: number): Color

Hue in degrees, any value (wrapped). Saturation, value, lightness and alpha are 0–1, alpha defaults to 1.

const rainbow = Color.fromHSV((Date.now() / 10) % 360, 1, 1);
const pastel = Color.fromHSL(200, 0.6, 0.8);

---

Adjusting

Method	Returns
add(other), sub(other)	Channel-wise including alpha, saturating at 255 / 0
scale(factor)	Brightness: r, g, b times factor, alpha unchanged
lerp(other, t)	All four channels towards other, t clamped to 0–1

withAlpha

withAlpha(alpha: number): Color
withAlphaF(alpha: number): Color

The same color with a new alpha. withAlpha takes 0–255, withAlphaF takes 0–1. Both clamp.

Color.red().withAlpha(128);    // half transparent
Color.red().withAlphaF(0.5);   // same

---

Converting

Method	Returns
toABGR()	0xAABBGGRR, the ColorLike number form
toRGBA()	0xRRGGBBAA
toARGB()	0xAARRGGBB
toHex()	"#rrggbbaa", lowercase
toHSV()	{ h, s, v, a }, hue in degrees 0–360 (0 for greys), the rest 0–1
toHSL()	{ h, s, l, a }, same ranges

Color.red().toHex();   // "#ff0000ff"

localStorage.setItem("accent", accent.toHex());
const saved = Color.fromHex(localStorage.getItem<string>("accent") ?? "#fff");

---

Example

Health bar color from green to red, faded by distance.

import entities from "@native/entities";
import render from "@native/render";

const full = Color.fromHex("#40ff40");
const empty = Color.fromHex("#ff4040");

on("render", () => {
    const myPos = entities.getLocalPlayer()?.getOrigin();
    if (!myPos) return;

    for (const player of entities.getPlayers({ skipLocal: true })) {
        const pos = player.getOrigin();
        const screen = pos && render.worldToScreen(pos);
        if (!pos || !screen) continue;

        const color = empty
            .lerp(full, player.m_iHealth / 100)
            .withAlphaF(Math.remap(myPos.distTo(pos), 500, 4000, 1, 0.3));

        render.rectFilled(screen.sub([20, 2]), screen.add([20, 2]), color);
    }
});