Overview API Reference Compile Docs Effects Examples Math Download

Pixel — RGBA color values

Auto-generated from bridge/src/js/prelude/src/ on 2026-05-21. Run task gen:api-reference to refresh.

Pixel is the engine's color value type (r/g/b/a in [0..1]). Use the static factories — Pixel.fromHex, Pixel.fromHSL, Pixel.fromName — or pass it anywhere a Color is accepted. pixel.closestName() does the reverse — find the CSS named color closest to a pixel in CIE-Lab perceptual space.

← Back to API Reference index

Classes

Pixel

Constructors

Constructor
new Pixel(
   r, 
   g, 
   b, 
   a?): Pixel;
Parameters
Parameter Type Default value
r number undefined
g number undefined
b number undefined
a number 1
Returns

Pixel

Methods

clone()
clone(): Pixel;

Deep copy.

Returns

Pixel

closestName()
closestName(): string;

Find the CSS named color that visually matches this pixel best, using CIE-Lab perceptual distance (CIE76 ΔE). Returns the lowercase CSS name. Body wired in prelude.ts.

Returns

string

Example
const dom = img.clone().resize(1, 1).getPixel(px(0, 0));
console.log("dominant:", dom.closestName()); // e.g. "darksalmon"
toHex()
toHex(): string;
Returns

string

toHSL()
toHSL(): object;

Convert to HSL. Returns {h, s, l} with h ∈ [0,360], s/l ∈ [0,1].

Returns

object

Name Type Default value
h number 0
l number -
s number 0
toString()
toString(): string;
Returns

string

fromHex()
static fromHex(str): Pixel;
Parameters
Parameter Type
str string
Returns

Pixel

fromHSL()
static fromHSL(
   h, 
   s, 
   l, 
   a?): Pixel;

Create a Pixel from HSL values. h ∈ [0,360], s/l ∈ [0,1].

Parameters
Parameter Type Default value
h number undefined
s number undefined
l number undefined
a number 1
Returns

Pixel

fromName()
static fromName(_name): Pixel;

Look up a CSS Color Module Level 4 named color (~148 entries — "tomato", "rebeccapurple", "darkslategray", …). Case-insensitive and whitespace-tolerant. Throws on an unknown name so a typo doesn't silently produce black.

Body wired in prelude.ts to avoid a circular import with named-colors.ts (which itself imports Pixel to build the lookup table).

Parameters
Parameter Type
_name string
Returns

Pixel

Example
img.tint(Pixel.fromName("tomato"), 0.4);
canvas.fill(...Pixel.fromName("rebeccapurple").rgba());

Properties

Property Modifier Type Default value
a public number 1
b public number undefined
g public number undefined
r public number undefined

PixelOLD

Constructors

Constructor
new PixelOLD(
   r, 
   g, 
   b, 
   a?): PixelOLD;
Parameters
Parameter Type Default value
r number undefined
g number undefined
b number undefined
a number 1
Returns

PixelOLD

Methods

clone()
clone(): Pixel;

Deep copy.

Returns

Pixel

toHex()
toHex(): string;

Convert to a CSS hex string (e.g. "#ff8000" or "#ff8000cc").

Returns

string

toHSL()
toHSL(): object;

Convert to HSL. Returns {h, s, l} with h ∈ [0,360], s/l ∈ [0,1].

Returns

object

Name Type Default value
h number 0
l number -
s number 0
toString()
toString(): string;

Returns "rgba(r,g,b,a)" with 8-bit r/g/b and 3-decimal a.

Returns

string

fromHex()
static fromHex(str): Pixel;

Create a Pixel from a CSS hex string ("#rgb", "#rrggbb", "#rrggbbaa").

Parameters
Parameter Type
str string
Returns

Pixel

fromHSL()
static fromHSL(
   h, 
   s, 
   l, 
   a?): Pixel;

Create a Pixel from HSL values. h ∈ [0,360], s/l ∈ [0,1].

Parameters
Parameter Type Default value
h number undefined
s number undefined
l number undefined
a number 1
Returns

Pixel

Properties

Property Modifier Type Default value
a public number 1
b public number undefined
g public number undefined
r public number undefined