Pixel — RGBA color values
Diese Seite ist derzeit nur englisch — die JSDoc-Kommentare in der Engine sind englisch verfasst. Eine deutsche Auto-Generierung folgt, sobald die Methoden mit
@apidoc-de-Tags ausgestattet sind. — Zur Übersicht
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.
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
Methods
clone()
clone(): Pixel;
Deep copy.
Returns
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
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
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
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
Methods
clone()
clone(): Pixel;
Deep copy.
Returns
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
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
Properties
| Property | Modifier | Type | Default value |
|---|---|---|---|
a |
public |
number |
1 |
b |
public |
number |
undefined |
g |
public |
number |
undefined |
r |
public |
number |
undefined |