Class Color

A color manipulation object.

Index

Constructors

Accessors

Methods

add clone copy darken equals lerp lighten parseCSS parseHex parseRGB random setColor setFloat setHSL setHSLDeg setHSV toArray toHex toHex8 toRGB toRGBA toUint32

Constructors

constructor

new Color(
    r?: string | number | Color,
    g?: number,
    b?: number,
    alpha?: number,
): Color
Creates a new Color instance.
Parameters
- r: string | number | Color = 0
  A Color object or the red component [0 .. 255]. Defaults to 0.
- g: number = 0
  The green component [0 .. 255]. Defaults to 0.
- b: number = 0
  The blue component [0 .. 255]. Defaults to 0.
- alpha: number = 1.0
  The alpha value [0.0 .. 1.0]. Defaults to 1.
Returns Color
- Defined in packages/melonjs/src/math/color.ts:217

Accessors

alpha

get alpha(): number
Gets the alpha component of the color.

Returns number
The alpha component [0.0 .. 1.0].
- Defined in packages/melonjs/src/math/color.ts:283
set alpha(value: number): void
Sets the alpha component of the color.
Parameters
- value: number
  The alpha component [0.0 .. 1.0].
Returns void
- Defined in packages/melonjs/src/math/color.ts:291

b

get b(): number
Gets the blue component of the color.

Returns number
The blue component [0 .. 255].
- Defined in packages/melonjs/src/math/color.ts:267
set b(value: number): void
Sets the blue component of the color.
Parameters
- value: number
  The blue component [0 .. 255].
Returns void
- Defined in packages/melonjs/src/math/color.ts:275

g

get g(): number
Gets the green component of the color.

Returns number
The green component [0 .. 255].
- Defined in packages/melonjs/src/math/color.ts:251
set g(value: number): void
Sets the green component of the color.
Parameters
- value: number
  The green component [0 .. 255].
Returns void
- Defined in packages/melonjs/src/math/color.ts:259

r

get r(): number
Gets the red component of the color.

Returns number
The red component [0 .. 255].
- Defined in packages/melonjs/src/math/color.ts:235
set r(value: number): void
Sets the red component of the color.
Parameters
- value: number
  The red component [0 .. 255].
Returns void
- Defined in packages/melonjs/src/math/color.ts:243

Methods

add

add(color: Color): Color
Blends this color with the given one using addition.
Parameters
- color: Color
  The color to blend with.
Returns Color
Reference to this object for method chaining.
- Defined in packages/melonjs/src/math/color.ts:484

clone

clone(): Color
Creates a new copy of this color object.

Returns Color
Reference to the newly cloned object.
- Defined in packages/melonjs/src/math/color.ts:461

copy

copy(color: string | Color): Color
Copies a color object or CSS color into this one.
Parameters
- color: string | Color
  The color to copy.
Returns Color
Reference to this object for method chaining.
- Defined in packages/melonjs/src/math/color.ts:470

darken

darken(scale: number): Color
Darkens this color value by a given scale.
Parameters
- scale: number
  The scale to darken the color by [0 .. 1].
Returns Color
Reference to this object for method chaining.
- Defined in packages/melonjs/src/math/color.ts:511

equals

equals(color: Color): boolean
Checks if this color is equal to another.
Parameters
- color: Color
  The color to compare with.
Returns boolean
True if the colors are equal, otherwise false.
- Defined in packages/melonjs/src/math/color.ts:591

lerp

lerp(color: Color, alpha: number): Color
Linearly interpolates between this color and the given one.
Parameters
- color: Color
  The color to interpolate with.
- alpha: number
  The interpolation factor, with alpha = 0 being this color, and alpha = 1 being the given one.
Returns Color
Reference to this object for method chaining.
- Defined in packages/melonjs/src/math/color.ts:526

lighten

lighten(scale: number): Color
Lightens this color value by a given scale
Parameters
- scale: number
  The scale to lighten the color by [0 .. 1].
Returns Color
Reference to this object for method chaining.
- Defined in packages/melonjs/src/math/color.ts:543

parseCSS

parseCSS(cssColor: string): Color
Parse a CSS color name and set this color to the corresponding r,g,b values
Parameters
- cssColor: string
  The CSS color name
Returns Color
Reference to this object for method chaining
- Defined in packages/melonjs/src/math/color.ts:605

parseHex

parseHex(hexColor: `#${string}`, argb?: boolean): Color
Parse a Hex color ("#RGB", "#RGBA" or "#RRGGBB", "#RRGGBBAA" format) and set this color to the corresponding r,g,b,a values
Parameters
- hexColor: `#${string}`
  The Hex color string to parse
- Optionalargb: boolean = false
  true if format is #ARGB, or #AARRGGBB (as opposed to #RGBA or #RGGBBAA)
Returns Color
Reference to this object for method chaining
- Defined in packages/melonjs/src/math/color.ts:638

parseRGB

parseRGB(rgbColor: string): Color
Parse an RGB or RGBA CSS color string
Parameters
- rgbColor: string
  The RGB or RGBA color string to parse
Returns Color
Reference to this object for method chaining
- Defined in packages/melonjs/src/math/color.ts:618

random

random(min?: number, max?: number): Color
Generate random r,g,b values for this color object
Parameters
- Optionalmin: number = 0
  minimum value for the random range
- Optionalmax: number = 255
  maxmium value for the random range
Returns Color
Reference to this object for method chaining
- Defined in packages/melonjs/src/math/color.ts:570

setColor

setColor(r?: number, g?: number, b?: number, alpha?: number): Color
Sets the color to the specified values.
Parameters
- r: number = 0
  The red component [0 .. 255].
- g: number = 0
  The green component [0 .. 255].
- b: number = 0
  The blue component [0 .. 255].
- Optionalalpha: number = 1.0
  The alpha value [0.0 .. 1.0]. Defaults to 1.
Returns Color
Reference to this object for method chaining.
- Defined in packages/melonjs/src/math/color.ts:303

setFloat

setFloat(r: number, g: number, b: number, alpha?: number): Color
Sets the color to the specified normalized float values.
Parameters
- r: number
  The red component [0.0 .. 1.0].
- g: number
  The green component [0.0 .. 1.0].
- b: number
  The blue component [0.0 .. 1.0].
- Optionalalpha: number = 1.0
  The alpha value [0.0 .. 1.0]. Defaults to 1.
Returns Color
Reference to this object for method chaining.
- Defined in packages/melonjs/src/math/color.ts:320

setHSL

setHSL(h: number, s: number, l: number): Color
Sets the color from HSL values, with hue in [0..1] (the GLSL / WebGL shader convention — 0 = red, 1/3 = green, 2/3 = blue, 1 = back to red). If you're coming from CSS / Photoshop / D3 and have a hue in degrees (0..360), divide by 360 first — or call Color#setHSLDeg which does it for you.

Hue wraps at integer boundaries, so h = 1 and h = 0 produce the same red. Saturation 0 short-circuits to a grey at the requested lightness, ignoring hue. Lightness 0 or 1 produce pure black or pure white regardless of the other two.
Parameters
- h: number
  The hue, normalized to [0..1] (NOT degrees).
- s: number
  The saturation [0..1].
- l: number
  The lightness [0..1].
Returns Color
Reference to this object for method chaining.
See
Color#setHSLDeg for the degrees-based variant.
Example
```
// pure green (hue 1/3, full saturation, mid lightness)
color.setHSL(1 / 3, 1, 0.5);
// CSS hsl(200deg, 80%, 60%) — divide hue by 360 first
color.setHSL(200 / 360, 0.8, 0.6);
```
- Defined in packages/melonjs/src/math/color.ts:404

setHSLDeg

setHSLDeg(hDeg: number, s: number, l: number): Color
Sets the color from HSL values with hue in degrees [0..360] — the CSS / Photoshop / D3 convention. Thin convenience wrapper over Color#setHSL: divides hDeg by 360 and delegates. Saturation and lightness stay in [0..1] (the same units CSS percentages would normalize to).

Use this when you're working from CSS color values, color-picker output, or any standard color reference. Prefer Color#setHSL when your hue is already normalized (e.g. from Math.random(), a noise function, or a shader uniform).
Parameters
- hDeg: number
  The hue in degrees [0..360]. Values outside the range are accepted (the underlying hue calc wraps).
- s: number
  The saturation [0..1].
- l: number
  The lightness [0..1].
Returns Color
Reference to this object for method chaining.
Example
```
// CSS hsl(200deg, 80%, 60%)
color.setHSLDeg(200, 0.8, 0.6);
// 360° wraps back to red — same as setHSLDeg(0, ...)
color.setHSLDeg(360, 1, 0.5);
```
- Defined in packages/melonjs/src/math/color.ts:445

setHSV

setHSV(h: number, s: number, v: number): Color
Sets the color to the specified HSV values.
Parameters
- h: number
  The hue [0 .. 1].
- s: number
  The saturation [0 .. 1].
- v: number
  The value [0 .. 1].
Returns Color
Reference to this object for method chaining.
- Defined in packages/melonjs/src/math/color.ts:336

toArray

toArray(): Float32Array<ArrayBufferLike>
return a Float Array representation of this object

Returns Float32Array<ArrayBufferLike>
A Float Array representation of this color
- Defined in packages/melonjs/src/math/color.ts:708

toHex

toHex(): string
return the color in "#RRGGBB" format

Returns string
The color in "#RRGGBB" format
- Defined in packages/melonjs/src/math/color.ts:716

toHex8

toHex8(alpha?: number): string
Get the color in "#RRGGBBAA" format
Parameters
- alpha: number = ...
  The alpha value [0.0 .. 1.0] to use in the output string.
Returns string
The color in "#RRGGBBAA" format
- Defined in packages/melonjs/src/math/color.ts:726

toRGB

toRGB(): `rgb(${number},${number},${number})`
Get the color in "rgb(R,G,B)" format

Returns `rgb(${number},${number},${number})`
The color in "rgb(R,G,B)" format
- Defined in packages/melonjs/src/math/color.ts:735

toRGBA

toRGBA(alpha?: number): `rgba(${number},${number},${number},${number})`
Get the color in "rgba(R,G,B,A)" format
Parameters
- Optionalalpha: number = ...
  alpha value [0.0 .. 1.0]
Returns `rgba(${number},${number},${number},${number})`
The color in "rgba(R,G,B,A)" format
- Defined in packages/melonjs/src/math/color.ts:744

toUint32

toUint32(alpha?: number): number
Pack this color RGB components into a Uint32 ARGB representation
Parameters
- Optionalalpha: number = 1.0
  alpha value [0.0 .. 1.0]
Returns number
A Uint32 ARGB representation of this color
- Defined in packages/melonjs/src/math/color.ts:694

Class Color

Index

Constructors

Accessors

Methods

Constructors

constructor

Parameters

Returns Color

Accessors

alpha

Returns number

Parameters

Returns void

b

Returns number

Parameters

Returns void

g

Returns number

Parameters

Returns void

r

Returns number

Parameters

Returns void

Methods

add

Parameters

Returns Color

clone

Returns Color

copy

Parameters

Returns Color

darken

Parameters

Returns Color

equals

Parameters

Returns boolean

lerp

Parameters

Returns Color

lighten

Parameters

Returns Color

parseCSS

Parameters

Returns Color

parseHex

Parameters

Returns Color

parseRGB

Parameters

Returns Color

random

Parameters

Returns Color

setColor

Parameters

Returns Color

setFloat

Parameters

Returns Color

setHSL

Parameters

Returns Color

See

Example

setHSLDeg

Parameters

Returns Color

Example

setHSV

Parameters

Returns Color

toArray

Returns Float32Array<ArrayBufferLike>

toHex