Namespace: Color

Namespaces

Interpolate

Members

---

alpha :number

The alpha color value, normalized to the range 0 to 255.

Type:

• number

Since: 3.0.0

Source: src/display/color/Color.js (Line 756)

---

alphaGL :number

The alpha color value, normalized to the range 0 to 1.

Type:

• number

Since: 3.0.0

Source: src/display/color/Color.js (Line 650)

---

blue :number

The blue color value, normalized to the range 0 to 255.

Type:

• number

Since: 3.0.0

Source: src/display/color/Color.js (Line 729)

---

blueGL :number

The blue color value, normalized to the range 0 to 1.

Type:

• number

Since: 3.0.0

Source: src/display/color/Color.js (Line 625)

---

<readonly> color :number

The color of this Color component, not including the alpha channel.

Type:

• number

Since: 3.0.0

Source: src/display/color/Color.js (Line 524)

---

<readonly> color32 :number

The color of this Color component, including the alpha channel.

Type:

• number

Since: 3.0.0

Source: src/display/color/Color.js (Line 541)

---

gl :Array.<number>

An array containing the calculated color values for WebGL use.

Type:

• Array.<number>

Since: 3.0.0

Source: src/display/color/Color.js (Line 132)

---

green :number

The green color value, normalized to the range 0 to 255.

Type:

• number

Since: 3.0.0

Source: src/display/color/Color.js (Line 702)

---

greenGL :number

The green color value, normalized to the range 0 to 1.

Type:

• number

Since: 3.0.0

Source: src/display/color/Color.js (Line 600)

---

h :number

The hue color value. A number between 0 and 1. This is the base color.

Type:

• number

Since: 3.13.0

Source: src/display/color/Color.js (Line 783)

---

red :number

The red color value, normalized to the range 0 to 255.

Type:

• number

Since: 3.0.0

Source: src/display/color/Color.js (Line 675)

---

redGL :number

The red color value, normalized to the range 0 to 1.

Type:

• number

Since: 3.0.0

Source: src/display/color/Color.js (Line 575)

---

<readonly> rgba :string

The color of this Color component as a string which can be used in CSS color values.

Type:

• string

Since: 3.0.0

Source: src/display/color/Color.js (Line 558)

---

s :number

The saturation color value. A number between 0 and 1. This controls how much of the hue will be in the final color, where 1 is fully saturated and 0 will give you white.

Type:

• number

Since: 3.13.0

Source: src/display/color/Color.js (Line 807)

---

v :number

The lightness color value. A number between 0 and 1. This controls how dark the color is. Where 1 is as bright as possible and 0 is black.

Type:

• number

Since: 3.13.0

Source: src/display/color/Color.js (Line 831)

Methods

---

<static> ColorSpectrum( [limit])

Return an array of Colors in a Color Spectrum.

The spectrum colors flow in the order: red, yellow, green, blue.

By default this function will return an array with 1024 elements in.

However, you can reduce this to a smaller quantity if needed, by specitying the limit parameter.

Parameters:

Name	Type	Argument	Default	Description
limit	number	<optional>	1024	How many colors should be returned? The maximum is 1024 but you can set a smaller quantity if required.

Since: 3.50.0

Source: src/display/color/ColorSpectrum.js (Line 9)

Returns:

An array containing limit parameter number of elements, where each contains a Color Object.

Type

Array.<Phaser.Types.Display.ColorObject>

---

<static> ColorToRGBA(color)

Converts the given color value into an Object containing r,g,b and a properties.

Parameters:

Name	Type	Description
color	number	A color value, optionally including the alpha value.

Since: 3.0.0

Source: src/display/color/ColorToRGBA.js (Line 7)

Returns:

An object containing the parsed color values.

Type

Phaser.Types.Display.ColorObject

---

<static> ComponentToHex(color)

Returns a string containing a hex representation of the given color component.

Parameters:

Name	Type	Description
color	number	The color channel to get the hex value for, must be a value between 0 and 255.

Since: 3.0.0

Source: src/display/color/ComponentToHex.js (Line 7)

Returns:

A string of length 2 characters, i.e. 255 = ff, 100 = 64.

Type

string

---

<static> GetColor(red, green, blue)

Given 3 separate color values this will return an integer representation of it.

Parameters:

Name	Type	Description
red	number	The red color value. A number between 0 and 255.
green	number	The green color value. A number between 0 and 255.
blue	number	The blue color value. A number between 0 and 255.

Since: 3.0.0

Source: src/display/color/GetColor.js (Line 7)

Returns:

The combined color value.

Type

number

---

<static> GetColor32(red, green, blue, alpha)

Given an alpha and 3 color values this will return an integer representation of it.

Parameters:

Name	Type	Description
red	number	The red color value. A number between 0 and 255.
green	number	The green color value. A number between 0 and 255.
blue	number	The blue color value. A number between 0 and 255.
alpha	number	The alpha color value. A number between 0 and 255.

Since: 3.0.0

Source: src/display/color/GetColor32.js (Line 7)

Returns:

The combined color value.

Type

number

---

<static> HexStringToColor(hex)

Converts a hex string into a Phaser Color object.

The hex string can supplied as '#0033ff' or the short-hand format of '#03f'; it can begin with an optional "#" or "0x", or be unprefixed.

An alpha channel is not supported.

Parameters:

Name	Type	Description
hex	string	The hex color value to convert, such as #0033ff or the short-hand format: #03f.

Since: 3.0.0

Source: src/display/color/HexStringToColor.js (Line 9)

Returns:

A Color object populated by the values of the given string.

Type

Phaser.Display.Color

---

<static> HSLToColor(h, s, l)

Converts HSL (hue, saturation and lightness) values to a Phaser Color object.

Parameters:

Name	Type	Description
h	number	The hue value in the range 0 to 1.
s	number	The saturation value in the range 0 to 1.
l	number	The lightness value in the range 0 to 1.

Since: 3.0.0

Source: src/display/color/HSLToColor.js (Line 10)

Returns:

A Color object created from the results of the h, s and l values.

Type

Phaser.Display.Color

---

<static> HSVColorWheel( [s] [, v])

Get HSV color wheel values in an array which will be 360 elements in size.

Parameters:

Name	Type	Argument	Default	Description
s	number	<optional>	1	The saturation, in the range 0 - 1.
v	number	<optional>	1	The value, in the range 0 - 1.

Since: 3.0.0

Source: src/display/color/HSVColorWheel.js (Line 9)

Returns:

An array containing 360 elements, where each contains a single numeric value corresponding to the color at that point in the HSV color wheel.

Type

Array.<Phaser.Types.Display.ColorObject>

---

<static> HSVToRGB(h, s, v [, out])

Converts a HSV (hue, saturation and value) color set to RGB.

Conversion formula from https://en.wikipedia.org/wiki/HSL_and_HSV

Assumes HSV values are contained in the set [0, 1].

Parameters:

Name	Type	Argument	Description
h	number		The hue, in the range 0 - 1. This is the base color.
s	number		The saturation, in the range 0 - 1. This controls how much of the hue will be in the final color, where 1 is fully saturated and 0 will give you white.
v	number		The value, in the range 0 - 1. This controls how dark the color is. Where 1 is as bright as possible and 0 is black.
out	Phaser.Types.Display.ColorObject | Phaser.Display.Color	<optional>	A Color object to store the results in. If not given a new ColorObject will be created.

Since: 3.0.0

Source: src/display/color/HSVToRGB.js (Line 30)

Returns:

An object with the red, green and blue values set in the r, g and b properties.

Type

Phaser.Types.Display.ColorObject | Phaser.Display.Color

---

<static> HueToComponent(p, q, t)

Converts a hue to an RGB color. Based on code by Michael Jackson (https://github.com/mjijackson)

Parameters:

Name	Type	Description
p	number
q	number
t	number

Since: 3.0.0

Source: src/display/color/HueToComponent.js (Line 7)

Returns:

The combined color value.

Type

number

---

<static> IntegerToColor(input)

Converts the given color value into an instance of a Color object.

Parameters:

Name	Type	Description
input	number	The color value to convert into a Color object.

Since: 3.0.0

Source: src/display/color/IntegerToColor.js (Line 10)

Returns:

A Color object.

Type

Phaser.Display.Color

---

<static> IntegerToRGB(input)

Return the component parts of a color as an Object with the properties alpha, red, green, blue.

Alpha will only be set if it exists in the given color (0xAARRGGBB)

Parameters:

Name	Type	Description
input	number	The color value to convert into a Color object.

Since: 3.0.0

Source: src/display/color/IntegerToRGB.js (Line 7)

Returns:

An object with the red, green and blue values set in the r, g and b properties.

Type

Phaser.Types.Display.ColorObject

---

<static> ObjectToColor(input)

Converts an object containing r, g, b and a properties into a Color class instance.

Parameters:

Name	Type	Description
input	Phaser.Types.Display.InputColorObject	An object containing r, g, b and a properties in the range 0 to 255.

Since: 3.0.0

Source: src/display/color/ObjectToColor.js (Line 9)

Returns:

A Color object.

Type

Phaser.Display.Color

---

<static> RandomRGB( [min] [, max])

Creates a new Color object where the r, g, and b values have been set to random values based on the given min max values.

Parameters:

Name	Type	Argument	Default	Description
min	number	<optional>	0	The minimum value to set the random range from (between 0 and 255)
max	number	<optional>	255	The maximum value to set the random range from (between 0 and 255)

Since: 3.0.0

Source: src/display/color/RandomRGB.js (Line 10)

Returns:

A Color object.

Type

Phaser.Display.Color

---

<static> RGBStringToColor(rgb)

Converts a CSS 'web' string into a Phaser Color object.

The web string can be in the format 'rgb(r,g,b)' or 'rgba(r,g,b,a)' where r/g/b are in the range [0..255] and a is in the range [0..1].

Parameters:

Name	Type	Description
rgb	string	The CSS format color string, using the rgb or rgba format.

Since: 3.0.0

Source: src/display/color/RGBStringToColor.js (Line 9)

Returns:

A Color object.

Type

Phaser.Display.Color

---

<static> RGBToHSV(r, g, b [, out])

Converts an RGB color value to HSV (hue, saturation and value). Conversion formula from http://en.wikipedia.org/wiki/HSL_color_space. Assumes RGB values are contained in the set [0, 255] and returns h, s and v in the set [0, 1]. Based on code by Michael Jackson (https://github.com/mjijackson)

Parameters:

Name	Type	Argument	Description
r	number		The red color value. A number between 0 and 255.
g	number		The green color value. A number between 0 and 255.
b	number		The blue color value. A number between 0 and 255.
out	Phaser.Types.Display.HSVColorObject | Phaser.Display.Color	<optional>	An object to store the color values in. If not given an HSV Color Object will be created.

Since: 3.0.0

Source: src/display/color/RGBToHSV.js (Line 7)

Returns:

An object with the properties h, s and v set.

Type

Phaser.Types.Display.HSVColorObject | Phaser.Display.Color

---

<static> RGBToString(r, g, b [, a] [, prefix])

Converts the color values into an HTML compatible color string, prefixed with either # or 0x.

Parameters:

Name	Type	Argument	Default	Description
r	number			The red color value. A number between 0 and 255.
g	number			The green color value. A number between 0 and 255.
b	number			The blue color value. A number between 0 and 255.
a	number	<optional>	255	The alpha value. A number between 0 and 255.
prefix	string	<optional>	#	The prefix of the string. Either # or 0x.

Since: 3.0.0

Source: src/display/color/RGBToString.js (Line 9)

Returns:

A string-based representation of the color values.

Type

string

---

<static> ValueToColor(input)

Converts the given source color value into an instance of a Color class. The value can be either a string, prefixed with rgb or a hex string, a number or an Object.

Parameters:

Name	Type	Description
input	string | number | Phaser.Types.Display.InputColorObject	The source color value to convert.

Since: 3.0.0

Source: src/display/color/ValueToColor.js (Line 12)

Returns:

A Color object.

Type

Phaser.Display.Color

---

brighten(amount)

Brighten this Color by the percentage amount given.

Parameters:

Name	Type	Description
amount	number	The percentage amount to change this color by. A value between 0 and 100.

Since: 3.13.0

Source: src/display/color/Color.js (Line 501)

Returns:

This Color object.

Type

Phaser.Display.Color

---

clone()

Returns a new Color component using the values from this one.

Since: 3.0.0

Source: src/display/color/Color.js (Line 359)

Returns:

A new Color object.

Type

Phaser.Display.Color

---

darken(amount)

Decrease the lightness of this Color by the percentage amount given.

Parameters:

Name	Type	Description
amount	number	The percentage amount to change this color by. A value between 0 and 100.

Since: 3.13.0

Source: src/display/color/Color.js (Line 484)

Returns:

This Color object.

Type

Phaser.Display.Color

---

desaturate(amount)

Decrease the saturation of this Color by the percentage amount given. The saturation is the amount of the base color in the hue.

Parameters:

Name	Type	Description
amount	number	The percentage amount to change this color by. A value between 0 and 100.

Since: 3.13.0

Source: src/display/color/Color.js (Line 449)

Returns:

This Color object.

Type

Phaser.Display.Color

---

gray(shade)

Sets this Color object to be grayscaled based on the shade value given.

Parameters:

Name	Type	Description
shade	number	A value between 0 and 255.

Since: 3.13.0

Source: src/display/color/Color.js (Line 372)

Returns:

This Color object.

Type

Phaser.Display.Color

---

lighten(amount)

Increase the lightness of this Color by the percentage amount given.

Parameters:

Name	Type	Description
amount	number	The percentage amount to change this color by. A value between 0 and 100.

Since: 3.13.0

Source: src/display/color/Color.js (Line 467)

Returns:

This Color object.

Type

Phaser.Display.Color

---

random( [min] [, max])

Sets this Color object to be a random color between the min and max values given.

Parameters:

Name	Type	Argument	Default	Description
min	number	<optional>	0	The minimum random color value. Between 0 and 255.
max	number	<optional>	255	The maximum random color value. Between 0 and 255.

Since: 3.13.0

Source: src/display/color/Color.js (Line 387)

Returns:

This Color object.

Type

Phaser.Display.Color

---

randomGray( [min] [, max])

Sets this Color object to be a random grayscale color between the min and max values given.

Parameters:

Name	Type	Argument	Default	Description
min	number	<optional>	0	The minimum random color value. Between 0 and 255.
max	number	<optional>	255	The maximum random color value. Between 0 and 255.

Since: 3.13.0

Source: src/display/color/Color.js (Line 410)

Returns:

This Color object.

Type

Phaser.Display.Color

---

saturate(amount)

Increase the saturation of this Color by the percentage amount given. The saturation is the amount of the base color in the hue.

Parameters:

Name	Type	Description
amount	number	The percentage amount to change this color by. A value between 0 and 100.

Since: 3.13.0

Source: src/display/color/Color.js (Line 431)

Returns:

This Color object.

Type

Phaser.Display.Color

---

setFromHSV(h, s, v)

Sets the color based on the hue, saturation and lightness values given.

Parameters:

Name	Type	Description
h	number	The hue, in the range 0 - 1. This is the base color.
s	number	The saturation, in the range 0 - 1. This controls how much of the hue will be in the final color, where 1 is fully saturated and 0 will give you white.
v	number	The value, in the range 0 - 1. This controls how dark the color is. Where 1 is as bright as possible and 0 is black.

Since: 3.13.0

Source: src/display/color/Color.js (Line 287)

Returns:

This Color object.

Type

Phaser.Display.Color

---

setFromRGB(color)

Sets the color based on the color object given.

Parameters:

Name	Type	Description
color	Phaser.Types.Display.InputColorObject	An object containing r, g, b and optionally a values in the range 0 to 255.

Since: 3.0.0

Source: src/display/color/Color.js (Line 259)

Returns:

This Color object.

Type

Phaser.Display.Color

---

setGLTo(red, green, blue [, alpha])

Sets the red, green, blue and alpha GL values of this Color component.

Parameters:

Name	Type	Argument	Default	Description
red	number			The red color value. A number between 0 and 1.
green	number			The green color value. A number between 0 and 1.
blue	number			The blue color value. A number between 0 and 1.
alpha	number	<optional>	1	The alpha value. A number between 0 and 1.

Since: 3.0.0

Source: src/display/color/Color.js (Line 230)

Returns:

This Color object.

Type

Phaser.Display.Color

---

setTo(red, green, blue [, alpha] [, updateHSV])

Sets the color of this Color component.

Parameters:

Name	Type	Argument	Default	Description
red	number			The red color value. A number between 0 and 255.
green	number			The green color value. A number between 0 and 255.
blue	number			The blue color value. A number between 0 and 255.
alpha	number	<optional>	255	The alpha value. A number between 0 and 255.
updateHSV	boolean	<optional>	true	Update the HSV values after setting the RGB values?

Since: 3.0.0

Source: src/display/color/Color.js (Line 199)

Returns:

This Color object.

Type

Phaser.Display.Color

---

transparent()

Sets this color to be transparent. Sets all values to zero.

Since: 3.0.0

Source: src/display/color/Color.js (Line 177)

Returns:

This Color object.

Type

Phaser.Display.Color