Color
A mutable color representation that stores RGBA values (0-255 range) with automatic conversion to WebGL-compatible normalized floats (0-1), HSV color space, CSS rgba strings, and packed 24/32-bit integer formats. Provides methods for color manipulation including saturation, lightness, brightness adjustments, grayscale, and randomization. Supports construction from RGB integers, hex strings, HSV values, or color objects. Used throughout Phaser for tinting, effects, and rendering.
Constructor
new Color([red], [green], [blue], [alpha])
Parameters
| name | type | optional | default | description |
|---|---|---|---|---|
| red | number | Yes | 0 | The red color value. A number between 0 and 255. |
| green | number | Yes | 0 | The green color value. A number between 0 and 255. |
| blue | number | Yes | 0 | The blue color value. A number between 0 and 255. |
| alpha | number | Yes | 255 | The alpha value. A number between 0 and 255. |
Scope: static
Source: src/display/color/Color.js#L17
Since: 3.0.0
Public Members
alpha
alpha: number
Description:
The alpha color value, in the range 0 to 255.
Source: src/display/color/Color.js#L762
Since: 3.0.0
alphaGL
alphaGL: number
Description:
The alpha color value, normalized to the range 0 to 1.
Source: src/display/color/Color.js#L656
Since: 3.0.0
blue
blue: number
Description:
The blue color value, in the range 0 to 255.
Source: src/display/color/Color.js#L735
Since: 3.0.0
blueGL
blueGL: number
Description:
The blue color value, normalized to the range 0 to 1.
Source: src/display/color/Color.js#L631
Since: 3.0.0
color
color: number
Description:
The packed 24-bit RGB integer representation of this color, not including the alpha channel.
Source: src/display/color/Color.js#L530
Since: 3.0.0
color32
color32: number
Description:
The packed 32-bit RGBA integer representation of this color, including the alpha channel.
Source: src/display/color/Color.js#L547
Since: 3.0.0
gl
gl: Array.<number>
Description:
An array containing the RGBA color components in WebGL-compatible normalized float format, stored as [red, green, blue, alpha] with each value in the range 0 to 1.
Source: src/display/color/Color.js#L137
Since: 3.0.0
green
green: number
Description:
The green color value, in the range 0 to 255.
Source: src/display/color/Color.js#L708
Since: 3.0.0
greenGL
greenGL: number
Description:
The green color value, normalized to the range 0 to 1.
Source: src/display/color/Color.js#L606
Since: 3.0.0
h
h: number
Description:
The hue color value. A number between 0 and 1. This is the base color.
Source: src/display/color/Color.js#L789
Since: 3.13.0
red
red: number
Description:
The red color value, in the range 0 to 255.
Source: src/display/color/Color.js#L681
Since: 3.0.0
redGL
redGL: number
Description:
The red color value, normalized to the range 0 to 1.
Source: src/display/color/Color.js#L581
Since: 3.0.0
rgba
rgba: string
Description:
The color of this Color object as a CSS-compatible rgba() string, suitable for use with Canvas 2D or HTML elements.
Source: src/display/color/Color.js#L564
Since: 3.0.0
s
s: number
Description:
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.
Source: src/display/color/Color.js#L813
Since: 3.13.0
v
v: number
Description:
The value (brightness) component of this color in the HSV color space. A number between 0 and 1, where 1 is fully bright and 0 is black.
Source: src/display/color/Color.js#L837
Since: 3.13.0
Public Methods
brighten
<instance> brighten(amount)
Description:
Brighten this Color by the percentage amount given.
Parameters:
| name | type | optional | description |
|---|---|---|---|
| amount | number | No | The percentage amount to change this color by. A value between 0 and 100. |
Returns: Phaser.Display.Color - This Color object.
Source: src/display/color/Color.js#L507
Since: 3.13.0
clone
<instance> clone()
Description:
Returns a new Color component using the values from this one.
Returns: Phaser.Display.Color - A new Color object.
Source: src/display/color/Color.js#L365
Since: 3.0.0
ColorSpectrum
<static> ColorSpectrum([limit])
Description:
Returns an array of Color Objects representing a full color spectrum.
The spectrum colors cycle through the hue wheel in the order: red, yellow, green, cyan, blue, violet, and back to red.
By default this function will return an array with 1024 elements.
However, you can reduce this to a smaller quantity if needed, by specifying the limit parameter. When a limit smaller than 1024 is given, the colors are sampled evenly across the full spectrum so the hue distribution remains uniform regardless of the array size.
Parameters:
| name | type | optional | default | description |
|---|---|---|---|---|
| limit | number | Yes | 1024 | How many colors should be returned? The maximum is 1024 but you can set a smaller quantity if required. |
Returns: Array.<Phaser.Types.Display.ColorObject> - An array containing limit parameter number of elements, where each contains a Color Object.
Source: src/display/color/ColorSpectrum.js#L9
Since: 3.50.0
ColorToRGBA
<static> ColorToRGBA(color)
Description:
Converts the given color value into an object containing r, g, b and a properties.
The color value can be a 24-bit RGB integer (e.g. 0xRRGGBB) or a 32-bit ARGB integer (e.g. 0xAARRGGBB). If the value is 24-bit (i.e. does not exceed 0xFFFFFF), the alpha component of the returned object defaults to 255 (fully opaque). Otherwise, the alpha is extracted from the upper 8 bits of the value.
Parameters:
| name | type | optional | description |
|---|---|---|---|
| color | number | No | A 24-bit RGB or 32-bit ARGB color integer, optionally including an alpha component in the most-significant byte. |
Returns: Phaser.Types.Display.ColorObject - An object containing the parsed color values.
Source: src/display/color/ColorToRGBA.js#L7
Since: 3.0.0
ComponentToHex
<static> ComponentToHex(color)
Description:
Returns a string containing a hex representation of the given color component.
Parameters:
| name | type | optional | description |
|---|---|---|---|
| color | number | No | The color channel to get the hex value for, must be a value between 0 and 255. |
Returns: string - A string of length 2 characters, i.e. 255 = ff, 100 = 64.
Source: src/display/color/ComponentToHex.js#L7
Since: 3.0.0
darken
<instance> darken(amount)
Description:
Decrease the lightness of this Color by the percentage amount given.
Parameters:
| name | type | optional | description |
|---|---|---|---|
| amount | number | No | The percentage amount to change this color by. A value between 0 and 100. |
Returns: Phaser.Display.Color - This Color object.
Source: src/display/color/Color.js#L490
Since: 3.13.0
desaturate
<instance> desaturate(amount)
Description:
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 | optional | description |
|---|---|---|---|
| amount | number | No | The percentage amount to change this color by. A value between 0 and 100. |
Returns: Phaser.Display.Color - This Color object.
Source: src/display/color/Color.js#L455
Since: 3.13.0
GetColor
<static> GetColor(red, green, blue)
Description:
Packs three separate red, green, and blue color component values into a single 24-bit integer in the format 0xRRGGBB.
Parameters:
| name | type | optional | description |
|---|---|---|---|
| red | number | No | The red color value. A number between 0 and 255. |
| green | number | No | The green color value. A number between 0 and 255. |
| blue | number | No | The blue color value. A number between 0 and 255. |
Returns: number - The packed color value as a 24-bit integer in the format 0xRRGGBB.
Source: src/display/color/GetColor.js#L7
Since: 3.0.0
GetColor32
<static> GetColor32(red, green, blue, alpha)
Description:
Packs four ARGB component values (red, green, blue, and alpha) into a single 32-bit integer in ARGB format.
Parameters:
| name | type | optional | description |
|---|---|---|---|
| red | number | No | The red color value. A number between 0 and 255. |
| green | number | No | The green color value. A number between 0 and 255. |
| blue | number | No | The blue color value. A number between 0 and 255. |
| alpha | number | No | The alpha color value. A number between 0 and 255. |
Returns: number - The packed 32-bit ARGB color value.
Source: src/display/color/GetColor32.js#L7
Since: 3.0.0
gray
<instance> gray(shade)
Description:
Sets this Color object to be grayscaled based on the shade value given.
Parameters:
| name | type | optional | description |
|---|---|---|---|
| shade | number | No | A value between 0 and 255. |
Returns: Phaser.Display.Color - This Color object.
Source: src/display/color/Color.js#L378
Since: 3.13.0
HexStringToColor
<static> HexStringToColor(hex, [color])
Description:
Converts a hex string into a Phaser Color object.
The hex string can be 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 | optional | description |
|---|---|---|---|
| hex | string | No | The hex color value to convert, such as #0033ff or the short-hand format: #03f. |
| color | Phaser.Display.Color | Yes | The color where the new color will be stored. If not defined, a new color object is returned. |
Returns: Phaser.Display.Color - A Color object populated by the values of the given string.
Source: src/display/color/HexStringToColor.js#L9
Since: 3.0.0
HSLToColor
<static> HSLToColor(h, s, l, [color])
Description:
Converts HSL (hue, saturation and lightness) values to a Phaser Color object.
All three input values should be in the range 0 to 1. If the saturation is 0 the color is treated as achromatic (greyscale). Otherwise the standard HSL-to-RGB algorithm is applied, using the lightness value to derive the intermediate q and p coefficients before delegating each channel to HueToComponent.
Parameters:
| name | type | optional | description |
|---|---|---|---|
| h | number | No | The hue value in the range 0 to 1. |
| s | number | No | The saturation value in the range 0 to 1. |
| l | number | No | The lightness value in the range 0 to 1. |
| color | Phaser.Display.Color | Yes | An optional Color object to populate with the converted values. If not provided, a new Color object is created and returned. |
Returns: Phaser.Display.Color - The Color object populated with the RGB values derived from the given h, s and l inputs. This is either the color argument (if provided) or a newly created Color object.
Source: src/display/color/HSLToColor.js#L10
Since: 3.0.0
HSVColorWheel
<static> HSVColorWheel([s], [v])
Description:
Generates an HSV color wheel as an array of 360 ColorObject entries, one for each degree of hue from 0 to 359.
Parameters:
| name | type | optional | default | description |
|---|---|---|---|---|
| s | number | Yes | 1 | The saturation, in the range 0 - 1. |
| v | number | Yes | 1 | The value, in the range 0 - 1. |
Returns: Array.<Phaser.Types.Display.ColorObject> - An array of 360 ColorObject elements, each representing the RGB color at that hue step of the HSV color wheel.
Source: src/display/color/HSVColorWheel.js#L9
Since: 3.0.0
HSVToRGB
<static> HSVToRGB(h, s, v, [out])
Description:
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 | optional | description |
|---|---|---|---|
| h | number | No | The hue, in the range 0 - 1. This is the base color. |
| s | number | No | 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 a greyscale color. |
| v | number | No | The value, in the range 0 - 1. This controls how bright the color is, where 1 is as bright as possible and 0 is black. |
| out | Phaser.Types.Display.ColorObject | Phaser.Display.Color | Yes | A Color object to store the results in. If not given a new ColorObject will be created. |
Returns: Phaser.Types.Display.ColorObject, Phaser.Display.Color - An object with the red, green and blue values set in the r, g and b properties.
Source: src/display/color/HSVToRGB.js#L30
Since: 3.0.0
HueToComponent
<static> HueToComponent(p, q, t)
Description:
Calculates a single RGB channel value from a hue offset and the two intermediate lightness values used during HSL to RGB conversion. Call this function once for each channel (red, green, and blue), passing the appropriate hue offset each time. Based on code by Michael Jackson (https://github.com/mjijackson)
Parameters:
| name | type | optional | description |
|---|---|---|---|
| p | number | No | The first intermediate value derived from the lightness during HSL to RGB conversion. |
| q | number | No | The second intermediate value derived from the lightness and saturation during HSL to RGB conversion. |
| t | number | No | The hue offset for the color channel being calculated (red, green, or blue). |
Returns: number - The RGB channel value for the given hue offset, in the range 0 to 1.
Source: src/display/color/HueToComponent.js#L7
Since: 3.0.0
IntegerToColor
<static> IntegerToColor(input, [color])
Description:
Converts the given color value into an instance of a Color object.
Parameters:
| name | type | optional | description |
|---|---|---|---|
| input | number | No | The 32-bit integer color value to convert, such as a hex value like 0xff0000 for red. |
| color | Phaser.Display.Color | Yes | An optional Color object to store the result in. If not provided, a new Color object is created and returned. |
Returns: Phaser.Display.Color - A Color object containing the red, green, blue, and alpha components extracted from the given integer.
Source: src/display/color/IntegerToColor.js#L10
Since: 3.0.0
IntegerToRGB
<static> IntegerToRGB(color)
Description:
Return the component parts of a color as an Object with the properties alpha, red, green, blue.
If the color value includes an alpha component (0xAARRGGBB), it is extracted and set in the a property. Otherwise, alpha defaults to 255 (fully opaque).
Parameters:
| name | type | optional | description |
|---|---|---|---|
| color | number | No | The color value to convert into a Color object. |
Returns: Phaser.Types.Display.ColorObject - An object with the alpha, red, green, and blue values set in the a, r, g, and b properties.
Source: src/display/color/IntegerToRGB.js#L7
Since: 3.0.0
lighten
<instance> lighten(amount)
Description:
Increase the lightness of this Color by the percentage amount given.
Parameters:
| name | type | optional | description |
|---|---|---|---|
| amount | number | No | The percentage amount to change this color by. A value between 0 and 100. |
Returns: Phaser.Display.Color - This Color object.
Source: src/display/color/Color.js#L473
Since: 3.13.0
ObjectToColor
<static> ObjectToColor(input, [color])
Description:
Converts an object containing r, g, b and a properties into a Color class instance.
Parameters:
| name | type | optional | description |
|---|---|---|---|
| input | Phaser.Types.Display.InputColorObject | No | An object containing r, g, b and a properties in the range 0 to 255. |
| color | Phaser.Display.Color | Yes | The color where the new color will be stored. If not defined, a new color object is returned. |
Returns: Phaser.Display.Color - A Color object.
Source: src/display/color/ObjectToColor.js#L9
Since: 3.0.0
random
<instance> random([min], [max])
Description:
Sets this Color object to be a random color between the min and max values given.
Parameters:
| name | type | optional | default | description |
|---|---|---|---|---|
| min | number | Yes | 0 | The minimum random color value. Between 0 and 255. |
| max | number | Yes | 255 | The maximum random color value. Between 0 and 255. |
Returns: Phaser.Display.Color - This Color object.
Source: src/display/color/Color.js#L393
Since: 3.13.0
randomGray
<instance> randomGray([min], [max])
Description:
Sets this Color object to be a random grayscale color between the min and max values given.
Parameters:
| name | type | optional | default | description |
|---|---|---|---|---|
| min | number | Yes | 0 | The minimum random color value. Between 0 and 255. |
| max | number | Yes | 255 | The maximum random color value. Between 0 and 255. |
Returns: Phaser.Display.Color - This Color object.
Source: src/display/color/Color.js#L416
Since: 3.13.0
RandomRGB
<static> RandomRGB([min], [max])
Description:
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 | optional | default | description |
|---|---|---|---|---|
| min | number | Yes | 0 | The minimum value to set the random range from (between 0 and 255) |
| max | number | Yes | 255 | The maximum value to set the random range from (between 0 and 255) |
Returns: Phaser.Display.Color - A Color object.
Source: src/display/color/RandomRGB.js#L10
Since: 3.0.0
RGBStringToColor
<static> RGBStringToColor(rgb, [color])
Description:
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 | optional | description |
|---|---|---|---|
| rgb | string | No | The CSS format color string, using the rgb or rgba format. |
| color | Phaser.Display.Color | Yes | An optional Color object to populate with the parsed values. If not provided, a new Color object is created and returned. |
Returns: Phaser.Display.Color - The Color object populated with the parsed RGB or RGBA values.
Source: src/display/color/RGBStringToColor.js#L9
Since: 3.0.0
RGBToHSV
<static> RGBToHSV(r, g, b, [out])
Description:
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 | optional | description |
|---|---|---|---|
| r | number | No | The red color value. A number between 0 and 255. |
| g | number | No | The green color value. A number between 0 and 255. |
| b | number | No | The blue color value. A number between 0 and 255. |
| out | Phaser.Types.Display.HSVColorObject | Phaser.Display.Color | Yes | An object to store the color values in. If not given an HSV Color Object will be created. |
Returns: Phaser.Types.Display.HSVColorObject, Phaser.Display.Color - An object with the properties h, s and v set.
Source: src/display/color/RGBToHSV.js#L7
Since: 3.0.0
RGBToString
<static> RGBToString(r, g, b, [a], [prefix])
Description:
Converts the given red, green, blue, and alpha color component values into a hex color string.
When using the # prefix the result is a 6-character CSS-compatible hex string in #rrggbb format. The alpha value is not included in this format.
When using the 0x prefix the result is an 8-character ARGB hex string in 0xaarrggbb format, which includes the alpha component as the most significant byte.
Parameters:
| name | type | optional | default | description |
|---|---|---|---|---|
| r | number | No | The red color value. A number between 0 and 255. | |
| g | number | No | The green color value. A number between 0 and 255. | |
| b | number | No | The blue color value. A number between 0 and 255. | |
| a | number | Yes | 255 | The alpha value. A number between 0 and 255. |
| prefix | string | Yes | "#" | The prefix of the string. Either # or 0x. |
Returns: string - A hex color string in either #rrggbb or 0xaarrggbb format, depending on the prefix.
Source: src/display/color/RGBToString.js#L9
Since: 3.0.0
saturate
<instance> saturate(amount)
Description:
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 | optional | description |
|---|---|---|---|
| amount | number | No | The percentage amount to change this color by. A value between 0 and 100. |
Returns: Phaser.Display.Color - This Color object.
Source: src/display/color/Color.js#L437
Since: 3.13.0
setFromHSV
<instance> setFromHSV(h, s, v)
Description:
Sets the color based on the hue, saturation and value (HSV) components given.
Parameters:
| name | type | optional | description |
|---|---|---|---|
| h | number | No | The hue, in the range 0 - 1. This is the base color. |
| s | number | No | 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 | No | 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. |
Returns: Phaser.Display.Color - This Color object.
Source: src/display/color/Color.js#L293
Since: 3.13.0
setFromRGB
<instance> setFromRGB(color)
Description:
Sets the color based on the color object given.
Parameters:
| name | type | optional | description |
|---|---|---|---|
| color | Phaser.Types.Display.InputColorObject | No | An object containing r, g, b and optionally a values in the range 0 to 255. |
Returns: Phaser.Display.Color - This Color object.
Source: src/display/color/Color.js#L265
Since: 3.0.0
setGLTo
<instance> setGLTo(red, green, blue, [alpha])
Description:
Sets the red, green, blue and alpha GL values of this Color component.
Parameters:
| name | type | optional | default | description |
|---|---|---|---|---|
| red | number | No | The red color value. A number between 0 and 1. | |
| green | number | No | The green color value. A number between 0 and 1. | |
| blue | number | No | The blue color value. A number between 0 and 1. | |
| alpha | number | Yes | 1 | The alpha value. A number between 0 and 1. |
Returns: Phaser.Display.Color - This Color object.
Source: src/display/color/Color.js#L236
Since: 3.0.0
setTo
<instance> setTo(red, green, blue, [alpha], [updateHSV])
Description:
Sets the color of this Color component.
Parameters:
| name | type | optional | default | description |
|---|---|---|---|---|
| red | number | No | The red color value. A number between 0 and 255. | |
| green | number | No | The green color value. A number between 0 and 255. | |
| blue | number | No | The blue color value. A number between 0 and 255. | |
| alpha | number | Yes | 255 | The alpha value. A number between 0 and 255. |
| updateHSV | boolean | Yes | true | Update the HSV values after setting the RGB values? |
Returns: Phaser.Display.Color - This Color object.
Source: src/display/color/Color.js#L205
Since: 3.0.0
transparent
<instance> transparent()
Description:
Sets this color to be transparent. Sets all values to zero.
Returns: Phaser.Display.Color - This Color object.
Source: src/display/color/Color.js#L183
Since: 3.0.0
ValueToColor
<static> ValueToColor(input, [color])
Description:
Converts the given source color value into an instance of a Color class. The value can be a string (either prefixed with rgb for an RGB color string, or a hex color string), a number representing a packed RGB integer, or a plain object with r, g, and b properties.
Parameters:
| name | type | optional | description |
|---|---|---|---|
| input | string | number | Phaser.Types.Display.InputColorObject | No |
| color | Phaser.Display.Color | Yes | An existing Color object to store the result in. If not provided, a new Color object is created and returned. |
Returns: Phaser.Display.Color - A Color object containing the converted color value.
Source: src/display/color/ValueToColor.js#L12
Since: 3.0.0