docs/Phaser.Color.html

<!DOCTYPE html>

<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Phaser Class: Color</title>

	<!--[if lt IE 9]>
	<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
	<link type="text/css" rel="stylesheet" href="styles/sunlight.default.css">

	
	<link type="text/css" rel="stylesheet" href="styles/site.cerulean.css">
	
</head>

<body>
<div class="container-fluid">
	<div class="navbar navbar-fixed-top navbar-inverse">
		<div class="navbar-inner">
			<a class="brand" href="index.html">Phaser</a>
			<ul class="nav">
				
				<li class="dropdown">
					<a href="namespaces.list.html" class="dropdown-toggle" data-toggle="dropdown">Namespaces<b
						class="caret"></b></a>

					<ul class="dropdown-menu ">
						
						<li class="class-depth-0">
							<a href="Phaser.html">Phaser</a>
						</li>
						

					</ul>
				</li>
				
				<li class="dropdown">
					<a href="classes.list.html" class="dropdown-toggle" data-toggle="dropdown">Classes<b
						class="caret"></b></a>

					<ul class="dropdown-menu ">
						
						<li class="class-depth-1">
							<a href="Phaser.Animation.html">Animation</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.AnimationManager.html">AnimationManager</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.AnimationParser.html">AnimationParser</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.ArrayList.html">ArrayList</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.BitmapData.html">BitmapData</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.BitmapText.html">BitmapText</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.Button.html">Button</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.Cache.html">Cache</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.Camera.html">Camera</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.Canvas.html">Canvas</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.Circle.html">Circle</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.Color.html">Color</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.Device.html">Device</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.Easing.html">Easing</a>
						</li>
						
						<li class="class-depth-2">
							<a href="Phaser.Easing.Back.html">Back</a>
						</li>
						
						<li class="class-depth-2">
							<a href="Phaser.Easing.Bounce.html">Bounce</a>
						</li>
						
						<li class="class-depth-2">
							<a href="Phaser.Easing.Circular.html">Circular</a>
						</li>
						
						<li class="class-depth-2">
							<a href="Phaser.Easing.Cubic.html">Cubic</a>
						</li>
						
						<li class="class-depth-2">
							<a href="Phaser.Easing.Elastic.html">Elastic</a>
						</li>
						
						<li class="class-depth-2">
							<a href="Phaser.Easing.Exponential.html">Exponential</a>
						</li>
						
						<li class="class-depth-2">
							<a href="Phaser.Easing.Linear.html">Linear</a>
						</li>
						
						<li class="class-depth-2">
							<a href="Phaser.Easing.Quadratic.html">Quadratic</a>
						</li>
						
						<li class="class-depth-2">
							<a href="Phaser.Easing.Quartic.html">Quartic</a>
						</li>
						
						<li class="class-depth-2">
							<a href="Phaser.Easing.Quintic.html">Quintic</a>
						</li>
						
						<li class="class-depth-2">
							<a href="Phaser.Easing.Sinusoidal.html">Sinusoidal</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.Ellipse.html">Ellipse</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.Events.html">Events</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.Filter.html">Filter</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.Frame.html">Frame</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.FrameData.html">FrameData</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.Game.html">Game</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.GameObjectCreator.html">GameObjectCreator</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.GameObjectFactory.html">GameObjectFactory</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.Gamepad.html">Gamepad</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.GamepadButton.html">GamepadButton</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.Graphics.html">Graphics</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.Group.html">Group</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.Image.html">Image</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.Input.html">Input</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.InputHandler.html">InputHandler</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.Key.html">Key</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.Keyboard.html">Keyboard</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.Line.html">Line</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.LinkedList.html">LinkedList</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.Loader.html">Loader</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.LoaderParser.html">LoaderParser</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.Math.html">Math</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.Mouse.html">Mouse</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.MSPointer.html">MSPointer</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.Net.html">Net</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.Particle.html">Particle</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.Particles.html">Particles</a>
						</li>
						
						<li class="class-depth-3">
							<a href="Phaser.Particles.Arcade.Emitter.html">Emitter</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.Physics.html">Physics</a>
						</li>
						
						<li class="class-depth-2">
							<a href="Phaser.Physics.Arcade.html">Arcade</a>
						</li>
						
						<li class="class-depth-3">
							<a href="Phaser.Physics.Arcade.Body.html">Body</a>
						</li>
						
						<li class="class-depth-2">
							<a href="Phaser.Physics.Ninja.html">Ninja</a>
						</li>
						
						<li class="class-depth-3">
							<a href="Phaser.Physics.Ninja.AABB.html">AABB</a>
						</li>
						
						<li class="class-depth-3">
							<a href="Phaser.Physics.Ninja.Body.html">Body</a>
						</li>
						
						<li class="class-depth-3">
							<a href="Phaser.Physics.Ninja.Circle.html">Circle</a>
						</li>
						
						<li class="class-depth-3">
							<a href="Phaser.Physics.Ninja.Tile.html">Tile</a>
						</li>
						
						<li class="class-depth-2">
							<a href="Phaser.Physics.P2.html">P2</a>
						</li>
						
						<li class="class-depth-3">
							<a href="Phaser.Physics.P2.Body.html">Body</a>
						</li>
						
						<li class="class-depth-3">
							<a href="Phaser.Physics.P2.BodyDebug.html">BodyDebug</a>
						</li>
						
						<li class="class-depth-3">
							<a href="Phaser.Physics.P2.CollisionGroup.html">CollisionGroup</a>
						</li>
						
						<li class="class-depth-3">
							<a href="Phaser.Physics.P2.ContactMaterial.html">ContactMaterial</a>
						</li>
						
						<li class="class-depth-3">
							<a href="Phaser.Physics.P2.DistanceConstraint.html">DistanceConstraint</a>
						</li>
						
						<li class="class-depth-3">
							<a href="Phaser.Physics.P2.FixtureList.html">FixtureList</a>
						</li>
						
						<li class="class-depth-3">
							<a href="Phaser.Physics.P2.GearConstraint.html">GearConstraint</a>
						</li>
						
						<li class="class-depth-3">
							<a href="Phaser.Physics.P2.InversePointProxy.html">InversePointProxy</a>
						</li>
						
						<li class="class-depth-3">
							<a href="Phaser.Physics.P2.LockConstraint.html">LockConstraint</a>
						</li>
						
						<li class="class-depth-3">
							<a href="Phaser.Physics.P2.Material.html">Material</a>
						</li>
						
						<li class="class-depth-3">
							<a href="Phaser.Physics.P2.PointProxy.html">PointProxy</a>
						</li>
						
						<li class="class-depth-3">
							<a href="Phaser.Physics.P2.PrismaticConstraint.html">PrismaticConstraint</a>
						</li>
						
						<li class="class-depth-3">
							<a href="Phaser.Physics.P2.RevoluteConstraint.html">RevoluteConstraint</a>
						</li>
						
						<li class="class-depth-3">
							<a href="Phaser.Physics.P2.Spring.html">Spring</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.Plugin.html">Plugin</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.PluginManager.html">PluginManager</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.Point.html">Point</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.Pointer.html">Pointer</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.Polygon.html">Polygon</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.QuadTree.html">QuadTree</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.RandomDataGenerator.html">RandomDataGenerator</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.Rectangle.html">Rectangle</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.RenderTexture.html">RenderTexture</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.RequestAnimationFrame.html">RequestAnimationFrame</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.RetroFont.html">RetroFont</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.ScaleManager.html">ScaleManager</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.Signal.html">Signal</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.SignalBinding.html">SignalBinding</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.SinglePad.html">SinglePad</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.Sound.html">Sound</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.SoundManager.html">SoundManager</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.Sprite.html">Sprite</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.SpriteBatch.html">SpriteBatch</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.Stage.html">Stage</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.State.html">State</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.StateManager.html">StateManager</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.Text.html">Text</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.Tile.html">Tile</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.Tilemap.html">Tilemap</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.TilemapLayer.html">TilemapLayer</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.TilemapParser.html">TilemapParser</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.Tileset.html">Tileset</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.TileSprite.html">TileSprite</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.Time.html">Time</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.Timer.html">Timer</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.TimerEvent.html">TimerEvent</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.Touch.html">Touch</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.Tween.html">Tween</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.TweenManager.html">TweenManager</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.Utils.html">Utils</a>
						</li>
						
						<li class="class-depth-2">
							<a href="Phaser.Utils.Debug.html">Debug</a>
						</li>
						
						<li class="class-depth-1">
							<a href="Phaser.World.html">World</a>
						</li>
						

					</ul>
				</li>
				
				
			</ul>
		</div>
	</div>

	<div class="row-fluid">

		
		<div class="span8">
			
				<div id="main">
					

	<h1 class="page-title">Class: Color</h1>
<section>

<header>
    <h2>
        <span class="ancestors"><a href="Phaser.html">Phaser</a>.</span>
    
    Color
    </h2>
    
</header>

<article>
    <div class="container-overview">
    

<dt>
    <h4 class="name" id="Color"><span class="type-signature"></span>new Color<span class="signature">()</span><span class="type-signature"></span></h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p>The Phaser.Color class is a set of static methods that assist in color manipulation and conversion.</p>
    </div>
    

<dl class="details">
    

    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Color.js.html">utils/Color.js</a>, <a href="Color.js.html#sunlight-1-line-3">line 3</a>
    </li></ul></dd>
    

</dl>

    
</dd>

    
    </div>

    
        <h3 class="subsection-title">Methods</h3>

        <dl>
            
<dt>
    <h4 class="name" id="colorToHexstring"><span class="type-signature">&lt;static> </span>colorToHexstring<span class="signature">(color)</span><span class="type-signature"> &rarr; {string}</span></h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p>DEPRECATED: This method will be removed in Phaser 2.1. Please use Phaser.Color.componentToHex instead.
Return a string containing a hex representation of the given color.</p>
    </div>
    

        <h5>Parameters:</h5>
        

<table class="params table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		
		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>color</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            </td>

            
            <td class="description last"><p>The color channel to get the hex value for, must be a value between 0 and 255).</p></td>
        </tr>

	
	</tbody>
</table>

    
<dl class="details">
    

    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Color.js.html">utils/Color.js</a>, <a href="Color.js.html#sunlight-1-line-931">line 931</a>
    </li></ul></dd>
    

</dl>

    
    <h5>Returns:</h5>
    
            
<div class="param-desc">
    <p>A string of length 2 characters, i.e. 255 = FF, 0 = 00.</p>
</div>


<dl>
	<dt>
		Type
	</dt>
	<dd>
		
<span class="param-type">string</span>


	</dd>
</dl>


</dd>

        
<dt>
    <h4 class="name" id="componentToHex"><span class="type-signature">&lt;static> </span>componentToHex<span class="signature">(color)</span><span class="type-signature"> &rarr; {string}</span></h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p>Return a string containing a hex representation of the given color component.</p>
    </div>
    

        <h5>Parameters:</h5>
        

<table class="params table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		
		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>color</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            </td>

            
            <td class="description last"><p>The color channel to get the hex value for, must be a value between 0 and 255.</p></td>
        </tr>

	
	</tbody>
</table>

    
<dl class="details">
    

    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Color.js.html">utils/Color.js</a>, <a href="Color.js.html#sunlight-1-line-583">line 583</a>
    </li></ul></dd>
    

</dl>

    
    <h5>Returns:</h5>
    
            
<div class="param-desc">
    <p>A string of length 2 characters, i.e. 255 = ff, 100 = 64.</p>
</div>


<dl>
	<dt>
		Type
	</dt>
	<dd>
		
<span class="param-type">string</span>


	</dd>
</dl>


</dd>

        
<dt>
    <h4 class="name" id="createColor"><span class="type-signature">&lt;static> </span>createColor<span class="signature">(<span class="optional">r</span>, <span class="optional">g</span>, <span class="optional">b</span>, <span class="optional">a</span>, <span class="optional">h</span>, <span class="optional">s</span>, <span class="optional">l</span>, <span class="optional">v</span>)</span><span class="type-signature"> &rarr; {object}</span></h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p>A utility function to create a lightweight 'color' object with the default components.
Any components that are not specified will default to zero.</p>
<p>This is useful when you want to use a shared color object for the getPixel and getPixelAt methods.</p>
    </div>
    

        <h5>Parameters:</h5>
        

<table class="params table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		
		<th>Argument</th>
		

		<th>Default</th>
		

		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>r</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

                <td class="default">
                
                    0
                
                </td>
            

            <td class="description last"><p>The red color component, in the range 0 - 255.</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>g</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

                <td class="default">
                
                    0
                
                </td>
            

            <td class="description last"><p>The green color component, in the range 0 - 255.</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>b</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

                <td class="default">
                
                    0
                
                </td>
            

            <td class="description last"><p>The blue color component, in the range 0 - 255.</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>a</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

                <td class="default">
                
                    1
                
                </td>
            

            <td class="description last"><p>The alpha color component, in the range 0 - 1.</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>h</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

                <td class="default">
                
                    0
                
                </td>
            

            <td class="description last"><p>The hue, in the range 0 - 1.</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>s</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

                <td class="default">
                
                    0
                
                </td>
            

            <td class="description last"><p>The saturation, in the range 0 - 1.</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>l</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

                <td class="default">
                
                    0
                
                </td>
            

            <td class="description last"><p>The lightness, in the range 0 - 1.</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>v</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

                <td class="default">
                
                    0
                
                </td>
            

            <td class="description last"><p>The value, in the range 0 - 1.</p></td>
        </tr>

	
	</tbody>
</table>

    
<dl class="details">
    

    <dt class="tag-author">Author:</dt>
    <dd class="tag-author">
        <ul>
            <li>Matt DesLauriers (@mattdesl)</li>
        </ul>
    </dd>
    

    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Color.js.html">utils/Color.js</a>, <a href="Color.js.html#sunlight-1-line-421">line 421</a>
    </li></ul></dd>
    

</dl>

    
    <h5>Returns:</h5>
    
            
<div class="param-desc">
    <p>The resulting object with r, g, b, a properties and h, s, l and v.</p>
</div>


<dl>
	<dt>
		Type
	</dt>
	<dd>
		
<span class="param-type">object</span>


	</dd>
</dl>


</dd>

        
<dt>
    <h4 class="name" id="fromRGBA"><span class="type-signature">&lt;static> </span>fromRGBA<span class="signature">(rgba, <span class="optional">out</span>)</span><span class="type-signature"> &rarr; {object}</span></h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p>A utility to convert an integer in 0xRRGGBBAA format to a color object.
This does not rely on endianness.</p>
    </div>
    

        <h5>Parameters:</h5>
        

<table class="params table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		
		<th>Argument</th>
		

		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>rgba</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last"><p>An RGBA hex</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>out</code></td>
            

            <td class="type">
            
                
<span class="param-type">object</span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last"><p>The object to use, optional.</p></td>
        </tr>

	
	</tbody>
</table>

    
<dl class="details">
    

    <dt class="tag-author">Author:</dt>
    <dd class="tag-author">
        <ul>
            <li>Matt DesLauriers (@mattdesl)</li>
        </ul>
    </dd>
    

    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Color.js.html">utils/Color.js</a>, <a href="Color.js.html#sunlight-1-line-97">line 97</a>
    </li></ul></dd>
    

</dl>

    
    <h5>Returns:</h5>
    
            
<div class="param-desc">
    <p>A color object.</p>
</div>


<dl>
	<dt>
		Type
	</dt>
	<dd>
		
<span class="param-type">object</span>


	</dd>
</dl>


</dd>

        
<dt>
    <h4 class="name" id="getAlpha"><span class="type-signature">&lt;static> </span>getAlpha<span class="signature">(color)</span><span class="type-signature"> &rarr; {number}</span></h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p>Given a native color value (in the format 0xAARRGGBB) this will return the Alpha component, as a value between 0 and 255.</p>
    </div>
    

        <h5>Parameters:</h5>
        

<table class="params table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		
		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>color</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            </td>

            
            <td class="description last"><p>In the format 0xAARRGGBB.</p></td>
        </tr>

	
	</tbody>
</table>

    
<dl class="details">
    

    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Color.js.html">utils/Color.js</a>, <a href="Color.js.html#sunlight-1-line-811">line 811</a>
    </li></ul></dd>
    

</dl>

    
    <h5>Returns:</h5>
    
            
<div class="param-desc">
    <p>The Alpha component of the color, will be between 0 and 1 (0 being no Alpha (opaque), 1 full Alpha (transparent)).</p>
</div>


<dl>
	<dt>
		Type
	</dt>
	<dd>
		
<span class="param-type">number</span>


	</dd>
</dl>


</dd>

        
<dt>
    <h4 class="name" id="getAlphaFloat"><span class="type-signature">&lt;static> </span>getAlphaFloat<span class="signature">(color)</span><span class="type-signature"> &rarr; {number}</span></h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p>Given a native color value (in the format 0xAARRGGBB) this will return the Alpha component as a value between 0 and 1.</p>
    </div>
    

        <h5>Parameters:</h5>
        

<table class="params table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		
		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>color</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            </td>

            
            <td class="description last"><p>In the format 0xAARRGGBB.</p></td>
        </tr>

	
	</tbody>
</table>

    
<dl class="details">
    

    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Color.js.html">utils/Color.js</a>, <a href="Color.js.html#sunlight-1-line-823">line 823</a>
    </li></ul></dd>
    

</dl>

    
    <h5>Returns:</h5>
    
            
<div class="param-desc">
    <p>The Alpha component of the color, will be between 0 and 1 (0 being no Alpha (opaque), 1 full Alpha (transparent)).</p>
</div>


<dl>
	<dt>
		Type
	</dt>
	<dd>
		
<span class="param-type">number</span>


	</dd>
</dl>


</dd>

        
<dt>
    <h4 class="name" id="getBlue"><span class="type-signature">&lt;static> </span>getBlue<span class="signature">(color)</span><span class="type-signature"> &rarr; {number}</span></h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p>Given a native color value (in the format 0xAARRGGBB) this will return the Blue component, as a value between 0 and 255.</p>
    </div>
    

        <h5>Parameters:</h5>
        

<table class="params table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		
		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>color</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            </td>

            
            <td class="description last"><p>In the format 0xAARRGGBB.</p></td>
        </tr>

	
	</tbody>
</table>

    
<dl class="details">
    

    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Color.js.html">utils/Color.js</a>, <a href="Color.js.html#sunlight-1-line-859">line 859</a>
    </li></ul></dd>
    

</dl>

    
    <h5>Returns:</h5>
    
            
<div class="param-desc">
    <p>The Blue component of the color, will be between 0 and 255 (0 being no color, 255 full Blue).</p>
</div>


<dl>
	<dt>
		Type
	</dt>
	<dd>
		
<span class="param-type">number</span>


	</dd>
</dl>


</dd>

        
<dt>
    <h4 class="name" id="getColor"><span class="type-signature">&lt;static> </span>getColor<span class="signature">(r, g, b)</span><span class="type-signature"> &rarr; {number}</span></h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p>Given 3 color values this will return an integer representation of it.</p>
    </div>
    

        <h5>Parameters:</h5>
        

<table class="params table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		
		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>r</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            </td>

            
            <td class="description last"><p>The red color component, in the range 0 - 255.</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>g</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            </td>

            
            <td class="description last"><p>The green color component, in the range 0 - 255.</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>b</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            </td>

            
            <td class="description last"><p>The blue color component, in the range 0 - 255.</p></td>
        </tr>

	
	</tbody>
</table>

    
<dl class="details">
    

    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Color.js.html">utils/Color.js</a>, <a href="Color.js.html#sunlight-1-line-483">line 483</a>
    </li></ul></dd>
    

</dl>

    
    <h5>Returns:</h5>
    
            
<div class="param-desc">
    <p>A native color value integer (format: 0xRRGGBB).</p>
</div>


<dl>
	<dt>
		Type
	</dt>
	<dd>
		
<span class="param-type">number</span>


	</dd>
</dl>


</dd>

        
<dt>
    <h4 class="name" id="getColor32"><span class="type-signature">&lt;static> </span>getColor32<span class="signature">(a, r, g, b)</span><span class="type-signature"> &rarr; {number}</span></h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p>Given an alpha and 3 color values this will return an integer representation of it.</p>
    </div>
    

        <h5>Parameters:</h5>
        

<table class="params table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		
		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>a</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            </td>

            
            <td class="description last"><p>The alpha color component, in the range 0 - 255.</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>r</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            </td>

            
            <td class="description last"><p>The red color component, in the range 0 - 255.</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>g</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            </td>

            
            <td class="description last"><p>The green color component, in the range 0 - 255.</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>b</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            </td>

            
            <td class="description last"><p>The blue color component, in the range 0 - 255.</p></td>
        </tr>

	
	</tbody>
</table>

    
<dl class="details">
    

    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Color.js.html">utils/Color.js</a>, <a href="Color.js.html#sunlight-1-line-466">line 466</a>
    </li></ul></dd>
    

</dl>

    
    <h5>Returns:</h5>
    
            
<div class="param-desc">
    <p>A native color value integer (format: 0xAARRGGBB).</p>
</div>


<dl>
	<dt>
		Type
	</dt>
	<dd>
		
<span class="param-type">number</span>


	</dd>
</dl>


</dd>

        
<dt>
    <h4 class="name" id="getColorInfo"><span class="type-signature">&lt;static> </span>getColorInfo<span class="signature">(color)</span><span class="type-signature"> &rarr; {string}</span></h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p>DEPRECATED: This method will be removed in Phaser 2.1.
Returns a string containing handy information about the given color including string hex value,
RGB format information. Each section starts on a newline, 3 lines in total.</p>
    </div>
    

        <h5>Parameters:</h5>
        

<table class="params table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		
		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>color</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            </td>

            
            <td class="description last"><p>A color value in the format 0xAARRGGBB.</p></td>
        </tr>

	
	</tbody>
</table>

    
<dl class="details">
    

    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Color.js.html">utils/Color.js</a>, <a href="Color.js.html#sunlight-1-line-873">line 873</a>
    </li></ul></dd>
    

</dl>

    
    <h5>Returns:</h5>
    
            
<div class="param-desc">
    <p>String containing the 3 lines of information.</p>
</div>


<dl>
	<dt>
		Type
	</dt>
	<dd>
		
<span class="param-type">string</span>


	</dd>
</dl>


</dd>

        
<dt>
    <h4 class="name" id="getGreen"><span class="type-signature">&lt;static> </span>getGreen<span class="signature">(color)</span><span class="type-signature"> &rarr; {number}</span></h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p>Given a native color value (in the format 0xAARRGGBB) this will return the Green component, as a value between 0 and 255.</p>
    </div>
    

        <h5>Parameters:</h5>
        

<table class="params table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		
		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>color</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            </td>

            
            <td class="description last"><p>In the format 0xAARRGGBB.</p></td>
        </tr>

	
	</tbody>
</table>

    
<dl class="details">
    

    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Color.js.html">utils/Color.js</a>, <a href="Color.js.html#sunlight-1-line-847">line 847</a>
    </li></ul></dd>
    

</dl>

    
    <h5>Returns:</h5>
    
            
<div class="param-desc">
    <p>The Green component of the color, will be between 0 and 255 (0 being no color, 255 full Green).</p>
</div>


<dl>
	<dt>
		Type
	</dt>
	<dd>
		
<span class="param-type">number</span>


	</dd>
</dl>


</dd>

        
<dt>
    <h4 class="name" id="getRandomColor"><span class="type-signature">&lt;static> </span>getRandomColor<span class="signature">(min, max, alpha)</span><span class="type-signature"> &rarr; {number}</span></h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p>Returns a random color value between black and white
Set the min value to start each channel from the given offset.
Set the max value to restrict the maximum color used per channel.</p>
    </div>
    

        <h5>Parameters:</h5>
        

<table class="params table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		
		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>min</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            </td>

            
            <td class="description last"><p>The lowest value to use for the color.</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>max</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            </td>

            
            <td class="description last"><p>The highest value to use for the color.</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>alpha</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            </td>

            
            <td class="description last"><p>The alpha value of the returning color (default 255 = fully opaque).</p></td>
        </tr>

	
	</tbody>
</table>

    
<dl class="details">
    

    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Color.js.html">utils/Color.js</a>, <a href="Color.js.html#sunlight-1-line-721">line 721</a>
    </li></ul></dd>
    

</dl>

    
    <h5>Returns:</h5>
    
            
<div class="param-desc">
    <p>32-bit color value with alpha.</p>
</div>


<dl>
	<dt>
		Type
	</dt>
	<dd>
		
<span class="param-type">number</span>


	</dd>
</dl>


</dd>

        
<dt>
    <h4 class="name" id="getRed"><span class="type-signature">&lt;static> </span>getRed<span class="signature">(color)</span><span class="type-signature"> &rarr; {number}</span></h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p>Given a native color value (in the format 0xAARRGGBB) this will return the Red component, as a value between 0 and 255.</p>
    </div>
    

        <h5>Parameters:</h5>
        

<table class="params table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		
		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>color</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            </td>

            
            <td class="description last"><p>In the format 0xAARRGGBB.</p></td>
        </tr>

	
	</tbody>
</table>

    
<dl class="details">
    

    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Color.js.html">utils/Color.js</a>, <a href="Color.js.html#sunlight-1-line-835">line 835</a>
    </li></ul></dd>
    

</dl>

    
    <h5>Returns:</h5>
    
            
<div class="param-desc">
    <p>The Red component of the color, will be between 0 and 255 (0 being no color, 255 full Red).</p>
</div>


<dl>
	<dt>
		Type
	</dt>
	<dd>
		
<span class="param-type">number</span>


	</dd>
</dl>


</dd>

        
<dt>
    <h4 class="name" id="getRGB"><span class="type-signature">&lt;static> </span>getRGB<span class="signature">(color)</span><span class="type-signature"> &rarr; {object}</span></h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p>Return the component parts of a color as an Object with the properties alpha, red, green, blue.</p>
<p>Alpha will only be set if it exist in the given color (0xAARRGGBB)</p>
    </div>
    

        <h5>Parameters:</h5>
        

<table class="params table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		
		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>color</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            </td>

            
            <td class="description last"><p>Color in RGB (0xRRGGBB) or ARGB format (0xAARRGGBB).</p></td>
        </tr>

	
	</tbody>
</table>

    
<dl class="details">
    

    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Color.js.html">utils/Color.js</a>, <a href="Color.js.html#sunlight-1-line-753">line 753</a>
    </li></ul></dd>
    

</dl>

    
    <h5>Returns:</h5>
    
            
<div class="param-desc">
    <p>An Object with properties: alpha, red, green, blue (also r, g, b and a). Alpha will only be present if a color value &gt; 16777215 was given.</p>
</div>


<dl>
	<dt>
		Type
	</dt>
	<dd>
		
<span class="param-type">object</span>


	</dd>
</dl>


</dd>

        
<dt>
    <h4 class="name" id="getWebRGB"><span class="type-signature">&lt;static> </span>getWebRGB<span class="signature">(color)</span><span class="type-signature"> &rarr; {string}</span></h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p>Returns a CSS friendly string value from the given color.</p>
    </div>
    

        <h5>Parameters:</h5>
        

<table class="params table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		
		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>color</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            </td>

            
            <td class="description last"><p>Color in RGB (0xRRGGBB) or ARGB format (0xAARRGGBB).</p></td>
        </tr>

	
	</tbody>
</table>

    
<dl class="details">
    

    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Color.js.html">utils/Color.js</a>, <a href="Color.js.html#sunlight-1-line-795">line 795</a>
    </li></ul></dd>
    

</dl>

    
    <h5>Returns:</h5>
    
            
<div class="param-desc">
    <p>A string in the format: 'rgba(r,g,b,a)'</p>
</div>


<dl>
	<dt>
		Type
	</dt>
	<dd>
		
<span class="param-type">string</span>


	</dd>
</dl>


</dd>

        
<dt>
    <h4 class="name" id="hexToColor"><span class="type-signature">&lt;static> </span>hexToColor<span class="signature">(hex, <span class="optional">out</span>)</span><span class="type-signature"> &rarr; {object}</span></h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p>Converts a hex string into a Phaser Color object.</p>
    </div>
    

        <h5>Parameters:</h5>
        

<table class="params table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		
		<th>Argument</th>
		

		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>hex</code></td>
            

            <td class="type">
            
                
<span class="param-type">string</span>


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last"><p>The hex string to convert. Can be in the short-hand format <code>#03f</code> or <code>#0033ff</code>.</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>out</code></td>
            

            <td class="type">
            
                
<span class="param-type">object</span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last"><p>An object into which 3 properties will be created: r, g and b. If not provided a new object will be created.</p></td>
        </tr>

	
	</tbody>
</table>

    
<dl class="details">
    

    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Color.js.html">utils/Color.js</a>, <a href="Color.js.html#sunlight-1-line-547">line 547</a>
    </li></ul></dd>
    

</dl>

    
    <h5>Returns:</h5>
    
            
<div class="param-desc">
    <p>An object with the red, green and blue values set in the r, g and b properties.</p>
</div>


<dl>
	<dt>
		Type
	</dt>
	<dd>
		
<span class="param-type">object</span>


	</dd>
</dl>


</dd>

        
<dt>
    <h4 class="name" id="hexToRGB"><span class="type-signature">&lt;static> </span>hexToRGB<span class="signature">(hex)</span><span class="type-signature"> &rarr; {number}</span></h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p>Converts a hex string into an integer color value.</p>
    </div>
    

        <h5>Parameters:</h5>
        

<table class="params table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		
		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>hex</code></td>
            

            <td class="type">
            
                
<span class="param-type">string</span>


            </td>

            
            <td class="description last"><p>The hex string to convert. Can be in the short-hand format <code>#03f</code> or <code>#0033ff</code>.</p></td>
        </tr>

	
	</tbody>
</table>

    
<dl class="details">
    

    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Color.js.html">utils/Color.js</a>, <a href="Color.js.html#sunlight-1-line-528">line 528</a>
    </li></ul></dd>
    

</dl>

    
    <h5>Returns:</h5>
    
            
<div class="param-desc">
    <p>The rgb color value in the format 0xAARRGGBB.</p>
</div>


<dl>
	<dt>
		Type
	</dt>
	<dd>
		
<span class="param-type">number</span>


	</dd>
</dl>


</dd>

        
<dt>
    <h4 class="name" id="HSLColorWheel"><span class="type-signature">&lt;static> </span>HSLColorWheel<span class="signature">(<span class="optional">s</span>, <span class="optional">l</span>)</span><span class="type-signature"> &rarr; {array}</span></h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p>Get HSL color wheel values in an array which will be 360 elements in size.</p>
    </div>
    

        <h5>Parameters:</h5>
        

<table class="params table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		
		<th>Argument</th>
		

		<th>Default</th>
		

		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>s</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

                <td class="default">
                
                    0.5
                
                </td>
            

            <td class="description last"><p>The saturation, in the range 0 - 1.</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>l</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

                <td class="default">
                
                    0.5
                
                </td>
            

            <td class="description last"><p>The lightness, in the range 0 - 1.</p></td>
        </tr>

	
	</tbody>
</table>

    
<dl class="details">
    

    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Color.js.html">utils/Color.js</a>, <a href="Color.js.html#sunlight-1-line-623">line 623</a>
    </li></ul></dd>
    

</dl>

    
    <h5>Returns:</h5>
    
            
<div class="param-desc">
    <p>An array containing 360 elements corresponding to the HSL color wheel.</p>
</div>


<dl>
	<dt>
		Type
	</dt>
	<dd>
		
<span class="param-type">array</span>


	</dd>
</dl>


</dd>

        
<dt>
    <h4 class="name" id="HSLtoRGB"><span class="type-signature">&lt;static> </span>HSLtoRGB<span class="signature">(h, s, l, <span class="optional">out</span>)</span><span class="type-signature"> &rarr; {object}</span></h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p>Converts an HSL (hue, saturation and lightness) color value to RGB.
Conversion forumla from <a href="http://en.wikipedia.org/wiki/HSL_color_space">http://en.wikipedia.org/wiki/HSL_color_space</a>.
Assumes HSL values are contained in the set [0, 1] and returns r, g and b values in the set [0, 255].
Based on code by Michael Jackson (<a href="https://github.com/mjijackson">https://github.com/mjijackson</a>)</p>
    </div>
    

        <h5>Parameters:</h5>
        

<table class="params table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		
		<th>Argument</th>
		

		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>h</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last"><p>The hue, in the range 0 - 1.</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>s</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last"><p>The saturation, in the range 0 - 1.</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>l</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last"><p>The lightness, in the range 0 - 1.</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>out</code></td>
            

            <td class="type">
            
                
<span class="param-type">object</span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last"><p>An object into which 3 properties will be created: r, g and b. If not provided a new object will be created.</p></td>
        </tr>

	
	</tbody>
</table>

    
<dl class="details">
    

    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Color.js.html">utils/Color.js</a>, <a href="Color.js.html#sunlight-1-line-203">line 203</a>
    </li></ul></dd>
    

</dl>

    
    <h5>Returns:</h5>
    
            
<div class="param-desc">
    <p>An object with the red, green and blue values set in the r, g and b properties.</p>
</div>


<dl>
	<dt>
		Type
	</dt>
	<dd>
		
<span class="param-type">object</span>


	</dd>
</dl>


</dd>

        
<dt>
    <h4 class="name" id="HSVColorWheel"><span class="type-signature">&lt;static> </span>HSVColorWheel<span class="signature">(<span class="optional">s</span>, <span class="optional">v</span>)</span><span class="type-signature"> &rarr; {array}</span></h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p>Get HSV color wheel values in an array which will be 360 elements in size.</p>
    </div>
    

        <h5>Parameters:</h5>
        

<table class="params table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		
		<th>Argument</th>
		

		<th>Default</th>
		

		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>s</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

                <td class="default">
                
                    1
                
                </td>
            

            <td class="description last"><p>The saturation, in the range 0 - 1.</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>v</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

                <td class="default">
                
                    1
                
                </td>
            

            <td class="description last"><p>The value, in the range 0 - 1.</p></td>
        </tr>

	
	</tbody>
</table>

    
<dl class="details">
    

    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Color.js.html">utils/Color.js</a>, <a href="Color.js.html#sunlight-1-line-598">line 598</a>
    </li></ul></dd>
    

</dl>

    
    <h5>Returns:</h5>
    
            
<div class="param-desc">
    <p>An array containing 360 elements corresponding to the HSV color wheel.</p>
</div>


<dl>
	<dt>
		Type
	</dt>
	<dd>
		
<span class="param-type">array</span>


	</dd>
</dl>


</dd>

        
<dt>
    <h4 class="name" id="HSVtoRGB"><span class="type-signature">&lt;static> </span>HSVtoRGB<span class="signature">(h, s, v, <span class="optional">out</span>)</span><span class="type-signature"> &rarr; {object}</span></h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p>Converts an HSV (hue, saturation and value) color value to RGB.
Conversion forumla from <a href="http://en.wikipedia.org/wiki/HSL_color_space">http://en.wikipedia.org/wiki/HSL_color_space</a>.
Assumes HSV values are contained in the set [0, 1] and returns r, g and b values in the set [0, 255].
Based on code by Michael Jackson (<a href="https://github.com/mjijackson">https://github.com/mjijackson</a>)</p>
    </div>
    

        <h5>Parameters:</h5>
        

<table class="params table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		
		<th>Argument</th>
		

		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>h</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last"><p>The hue, in the range 0 - 1.</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>s</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last"><p>The saturation, in the range 0 - 1.</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>v</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last"><p>The value, in the range 0 - 1.</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>out</code></td>
            

            <td class="type">
            
                
<span class="param-type">object</span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last"><p>An object into which 3 properties will be created: r, g and b. If not provided a new object will be created.</p></td>
        </tr>

	
	</tbody>
</table>

    
<dl class="details">
    

    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Color.js.html">utils/Color.js</a>, <a href="Color.js.html#sunlight-1-line-310">line 310</a>
    </li></ul></dd>
    

</dl>

    
    <h5>Returns:</h5>
    
            
<div class="param-desc">
    <p>An object with the red, green and blue values set in the r, g and b properties.</p>
</div>


<dl>
	<dt>
		Type
	</dt>
	<dd>
		
<span class="param-type">object</span>


	</dd>
</dl>


</dd>

        
<dt>
    <h4 class="name" id="hueToColor"><span class="type-signature">&lt;static> </span>hueToColor<span class="signature">(p, q, t)</span><span class="type-signature"> &rarr; {number}</span></h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p>Converts a hue to an RGB color.
Based on code by Michael Jackson (<a href="https://github.com/mjijackson">https://github.com/mjijackson</a>)</p>
    </div>
    

        <h5>Parameters:</h5>
        

<table class="params table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		
		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>p</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            </td>

            
            <td class="description last"></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>q</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            </td>

            
            <td class="description last"></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>t</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            </td>

            
            <td class="description last"></td>
        </tr>

	
	</tbody>
</table>

    
<dl class="details">
    

    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Color.js.html">utils/Color.js</a>, <a href="Color.js.html#sunlight-1-line-379">line 379</a>
    </li></ul></dd>
    

</dl>

    
    <h5>Returns:</h5>
    
            
<div class="param-desc">
    <p>The color component value.</p>
</div>


<dl>
	<dt>
		Type
	</dt>
	<dd>
		
<span class="param-type">number</span>


	</dd>
</dl>


</dd>

        
<dt>
    <h4 class="name" id="interpolateColor"><span class="type-signature">&lt;static> </span>interpolateColor<span class="signature">(color1, color2, steps, currentStep, alpha)</span><span class="type-signature"> &rarr; {number}</span></h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p>Interpolates the two given colours based on the supplied step and currentStep properties.</p>
    </div>
    

        <h5>Parameters:</h5>
        

<table class="params table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		
		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>color1</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            </td>

            
            <td class="description last"><p>The first color value.</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>color2</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            </td>

            
            <td class="description last"><p>The second color value.</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>steps</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            </td>

            
            <td class="description last"><p>The number of steps to run the interpolation over.</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>currentStep</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            </td>

            
            <td class="description last"><p>The currentStep value. If the interpolation will take 100 steps, a currentStep value of 50 would be half-way between the two.</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>alpha</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            </td>

            
            <td class="description last"><p>The alpha of the returned color.</p></td>
        </tr>

	
	</tbody>
</table>

    
<dl class="details">
    

    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Color.js.html">utils/Color.js</a>, <a href="Color.js.html#sunlight-1-line-648">line 648</a>
    </li></ul></dd>
    

</dl>

    
    <h5>Returns:</h5>
    
            
<div class="param-desc">
    <p>The interpolated color value.</p>
</div>


<dl>
	<dt>
		Type
	</dt>
	<dd>
		
<span class="param-type">number</span>


	</dd>
</dl>


</dd>

        
<dt>
    <h4 class="name" id="interpolateColorWithRGB"><span class="type-signature">&lt;static> </span>interpolateColorWithRGB<span class="signature">(color, r, g, b, steps, currentStep)</span><span class="type-signature"> &rarr; {number}</span></h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p>Interpolates the two given colours based on the supplied step and currentStep properties.</p>
    </div>
    

        <h5>Parameters:</h5>
        

<table class="params table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		
		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>color</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            </td>

            
            <td class="description last"><p>The first color value.</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>r</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            </td>

            
            <td class="description last"><p>The red color value, between 0 and 0xFF (255).</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>g</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            </td>

            
            <td class="description last"><p>The green color value, between 0 and 0xFF (255).</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>b</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            </td>

            
            <td class="description last"><p>The blue color value, between 0 and 0xFF (255).</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>steps</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            </td>

            
            <td class="description last"><p>The number of steps to run the interpolation over.</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>currentStep</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            </td>

            
            <td class="description last"><p>The currentStep value. If the interpolation will take 100 steps, a currentStep value of 50 would be half-way between the two.</p></td>
        </tr>

	
	</tbody>
</table>

    
<dl class="details">
    

    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Color.js.html">utils/Color.js</a>, <a href="Color.js.html#sunlight-1-line-674">line 674</a>
    </li></ul></dd>
    

</dl>

    
    <h5>Returns:</h5>
    
            
<div class="param-desc">
    <p>The interpolated color value.</p>
</div>


<dl>
	<dt>
		Type
	</dt>
	<dd>
		
<span class="param-type">number</span>


	</dd>
</dl>


</dd>

        
<dt>
    <h4 class="name" id="interpolateRGB"><span class="type-signature">&lt;static> </span>interpolateRGB<span class="signature">(r1, g1, b1, r2, g2, b2, steps, currentStep)</span><span class="type-signature"> &rarr; {number}</span></h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p>Interpolates the two given colours based on the supplied step and currentStep properties.</p>
    </div>
    

        <h5>Parameters:</h5>
        

<table class="params table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		
		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>r1</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            </td>

            
            <td class="description last"><p>The red color value, between 0 and 0xFF (255).</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>g1</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            </td>

            
            <td class="description last"><p>The green color value, between 0 and 0xFF (255).</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>b1</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            </td>

            
            <td class="description last"><p>The blue color value, between 0 and 0xFF (255).</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>r2</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            </td>

            
            <td class="description last"><p>The red color value, between 0 and 0xFF (255).</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>g2</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            </td>

            
            <td class="description last"><p>The green color value, between 0 and 0xFF (255).</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>b2</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            </td>

            
            <td class="description last"><p>The blue color value, between 0 and 0xFF (255).</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>steps</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            </td>

            
            <td class="description last"><p>The number of steps to run the interpolation over.</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>currentStep</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            </td>

            
            <td class="description last"><p>The currentStep value. If the interpolation will take 100 steps, a currentStep value of 50 would be half-way between the two.</p></td>
        </tr>

	
	</tbody>
</table>

    
<dl class="details">
    

    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Color.js.html">utils/Color.js</a>, <a href="Color.js.html#sunlight-1-line-697">line 697</a>
    </li></ul></dd>
    

</dl>

    
    <h5>Returns:</h5>
    
            
<div class="param-desc">
    <p>The interpolated color value.</p>
</div>


<dl>
	<dt>
		Type
	</dt>
	<dd>
		
<span class="param-type">number</span>


	</dd>
</dl>


</dd>

        
<dt>
    <h4 class="name" id="packPixel"><span class="type-signature">&lt;static> </span>packPixel<span class="signature">(r, g, b, a)</span><span class="type-signature"> &rarr; {number}</span></h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p>Packs the r, g, b, a components into a single integer, for use with Int32Array.
If device is little endian then ABGR order is used. Otherwise RGBA order is used.</p>
    </div>
    

        <h5>Parameters:</h5>
        

<table class="params table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		
		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>r</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            </td>

            
            <td class="description last"><p>The red color component, in the range 0 - 255.</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>g</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            </td>

            
            <td class="description last"><p>The green color component, in the range 0 - 255.</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>b</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            </td>

            
            <td class="description last"><p>The blue color component, in the range 0 - 255.</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>a</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            </td>

            
            <td class="description last"><p>The alpha color component, in the range 0 - 255.</p></td>
        </tr>

	
	</tbody>
</table>

    
<dl class="details">
    

    <dt class="tag-author">Author:</dt>
    <dd class="tag-author">
        <ul>
            <li>Matt DesLauriers (@mattdesl)</li>
        </ul>
    </dd>
    

    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Color.js.html">utils/Color.js</a>, <a href="Color.js.html#sunlight-1-line-14">line 14</a>
    </li></ul></dd>
    

</dl>

    
    <h5>Returns:</h5>
    
            
<div class="param-desc">
    <p>The packed color</p>
</div>


<dl>
	<dt>
		Type
	</dt>
	<dd>
		
<span class="param-type">number</span>


	</dd>
</dl>


</dd>

        
<dt>
    <h4 class="name" id="RGBtoHexstring"><span class="type-signature">&lt;static> </span>RGBtoHexstring<span class="signature">(color)</span><span class="type-signature"> &rarr; {string}</span></h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p>DEPRECATED: This method will be removed in Phaser 2.1. Please use Phaser.Color.RGBtoString instead.
Return a string representation of the color in the format 0xAARRGGBB.</p>
    </div>
    

        <h5>Parameters:</h5>
        

<table class="params table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		
		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>color</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            </td>

            
            <td class="description last"><p>The color to get the string representation for</p></td>
        </tr>

	
	</tbody>
</table>

    
<dl class="details">
    

    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Color.js.html">utils/Color.js</a>, <a href="Color.js.html#sunlight-1-line-897">line 897</a>
    </li></ul></dd>
    

</dl>

    
    <h5>Returns:</h5>
    
            
<div class="param-desc">
    <p>A string of length 10 characters in the format 0xAARRGGBB</p>
</div>


<dl>
	<dt>
		Type
	</dt>
	<dd>
		
<span class="param-type">string</span>


	</dd>
</dl>


</dd>

        
<dt>
    <h4 class="name" id="RGBtoHSL"><span class="type-signature">&lt;static> </span>RGBtoHSL<span class="signature">(r, g, b, <span class="optional">out</span>)</span><span class="type-signature"> &rarr; {object}</span></h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p>Converts an RGB color value to HSL (hue, saturation and lightness).
Conversion forumla from <a href="http://en.wikipedia.org/wiki/HSL_color_space">http://en.wikipedia.org/wiki/HSL_color_space</a>.
Assumes RGB values are contained in the set [0, 255] and returns h, s and l in the set [0, 1].
Based on code by Michael Jackson (<a href="https://github.com/mjijackson">https://github.com/mjijackson</a>)</p>
    </div>
    

        <h5>Parameters:</h5>
        

<table class="params table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		
		<th>Argument</th>
		

		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>r</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last"><p>The red color component, in the range 0 - 255.</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>g</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last"><p>The green color component, in the range 0 - 255.</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>b</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last"><p>The blue color component, in the range 0 - 255.</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>out</code></td>
            

            <td class="type">
            
                
<span class="param-type">object</span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last"><p>An object into which 3 properties will be created, h, s and l. If not provided a new object will be created.</p></td>
        </tr>

	
	</tbody>
</table>

    
<dl class="details">
    

    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Color.js.html">utils/Color.js</a>, <a href="Color.js.html#sunlight-1-line-144">line 144</a>
    </li></ul></dd>
    

</dl>

    
    <h5>Returns:</h5>
    
            
<div class="param-desc">
    <p>An object with the hue, saturation and lightness values set in the h, s and l properties.</p>
</div>


<dl>
	<dt>
		Type
	</dt>
	<dd>
		
<span class="param-type">object</span>


	</dd>
</dl>


</dd>

        
<dt>
    <h4 class="name" id="RGBtoHSV"><span class="type-signature">&lt;static> </span>RGBtoHSV<span class="signature">(r, g, b, <span class="optional">out</span>)</span><span class="type-signature"> &rarr; {object}</span></h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p>Converts an RGB color value to HSV (hue, saturation and value).
Conversion forumla from <a href="http://en.wikipedia.org/wiki/HSL_color_space">http://en.wikipedia.org/wiki/HSL_color_space</a>.
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 (<a href="https://github.com/mjijackson">https://github.com/mjijackson</a>)</p>
    </div>
    

        <h5>Parameters:</h5>
        

<table class="params table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		
		<th>Argument</th>
		

		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>r</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last"><p>The red color component, in the range 0 - 255.</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>g</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last"><p>The green color component, in the range 0 - 255.</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>b</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last"><p>The blue color component, in the range 0 - 255.</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>out</code></td>
            

            <td class="type">
            
                
<span class="param-type">object</span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last"><p>An object into which 3 properties will be created, h, s and v. If not provided a new object will be created.</p></td>
        </tr>

	
	</tbody>
</table>

    
<dl class="details">
    

    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Color.js.html">utils/Color.js</a>, <a href="Color.js.html#sunlight-1-line-254">line 254</a>
    </li></ul></dd>
    

</dl>

    
    <h5>Returns:</h5>
    
            
<div class="param-desc">
    <p>An object with the hue, saturation and value set in the h, s and v properties.</p>
</div>


<dl>
	<dt>
		Type
	</dt>
	<dd>
		
<span class="param-type">object</span>


	</dd>
</dl>


</dd>

        
<dt>
    <h4 class="name" id="RGBtoString"><span class="type-signature">&lt;static> </span>RGBtoString<span class="signature">(r, g, b, <span class="optional">a</span>, <span class="optional">prefix</span>)</span><span class="type-signature"> &rarr; {string}</span></h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p>Converts the given color values into a string.
If prefix was '#' it will be in the format <code>#RRGGBB</code> otherwise <code>0xAARRGGBB</code>.</p>
    </div>
    

        <h5>Parameters:</h5>
        

<table class="params table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		
		<th>Argument</th>
		

		<th>Default</th>
		

		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>r</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            </td>

            
                <td class="attributes">
                

                </td>
            

                <td class="default">
                
                </td>
            

            <td class="description last"><p>The red color component, in the range 0 - 255.</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>g</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            </td>

            
                <td class="attributes">
                

                </td>
            

                <td class="default">
                
                </td>
            

            <td class="description last"><p>The green color component, in the range 0 - 255.</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>b</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            </td>

            
                <td class="attributes">
                

                </td>
            

                <td class="default">
                
                </td>
            

            <td class="description last"><p>The blue color component, in the range 0 - 255.</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>a</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

                <td class="default">
                
                    255
                
                </td>
            

            <td class="description last"><p>The alpha color component, in the range 0 - 255.</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>prefix</code></td>
            

            <td class="type">
            
                
<span class="param-type">string</span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

                <td class="default">
                
                    '#'
                
                </td>
            

            <td class="description last"><p>The prefix used in the return string. If '#' it will return <code>#RRGGBB</code>, else <code>0xAARRGGBB</code>.</p></td>
        </tr>

	
	</tbody>
</table>

    
<dl class="details">
    

    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Color.js.html">utils/Color.js</a>, <a href="Color.js.html#sunlight-1-line-499">line 499</a>
    </li></ul></dd>
    

</dl>

    
    <h5>Returns:</h5>
    
            
<div class="param-desc">
    <p>A string containing the color values. If prefix was '#' it will be in the format <code>#RRGGBB</code> otherwise <code>0xAARRGGBB</code>.</p>
</div>


<dl>
	<dt>
		Type
	</dt>
	<dd>
		
<span class="param-type">string</span>


	</dd>
</dl>


</dd>

        
<dt>
    <h4 class="name" id="RGBtoWebstring"><span class="type-signature">&lt;static> </span>RGBtoWebstring<span class="signature">(color)</span><span class="type-signature"> &rarr; {string}</span></h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p>DEPRECATED: This method will be removed in Phaser 2.1. Please use Phaser.Color.RGBtoString instead.
Return a string representation of the color in the format #RRGGBB.</p>
    </div>
    

        <h5>Parameters:</h5>
        

<table class="params table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		
		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>color</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            </td>

            
            <td class="description last"><p>The color to get the string representation for.</p></td>
        </tr>

	
	</tbody>
</table>

    
<dl class="details">
    

    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Color.js.html">utils/Color.js</a>, <a href="Color.js.html#sunlight-1-line-914">line 914</a>
    </li></ul></dd>
    

</dl>

    
    <h5>Returns:</h5>
    
            
<div class="param-desc">
    <p>A string of length 10 characters in the format 0xAARRGGBB.</p>
</div>


<dl>
	<dt>
		Type
	</dt>
	<dd>
		
<span class="param-type">string</span>


	</dd>
</dl>


</dd>

        
<dt>
    <h4 class="name" id="toRGBA"><span class="type-signature">&lt;static> </span>toRGBA<span class="signature">(r, g, b, a)</span><span class="type-signature"> &rarr; {number}</span></h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p>A utility to convert RGBA components to a 32 bit integer in RRGGBBAA format.</p>
    </div>
    

        <h5>Parameters:</h5>
        

<table class="params table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		
		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>r</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            </td>

            
            <td class="description last"><p>The red color component, in the range 0 - 255.</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>g</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            </td>

            
            <td class="description last"><p>The green color component, in the range 0 - 255.</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>b</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            </td>

            
            <td class="description last"><p>The blue color component, in the range 0 - 255.</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>a</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            </td>

            
            <td class="description last"><p>The alpha color component, in the range 0 - 255.</p></td>
        </tr>

	
	</tbody>
</table>

    
<dl class="details">
    

    <dt class="tag-author">Author:</dt>
    <dd class="tag-author">
        <ul>
            <li>Matt DesLauriers (@mattdesl)</li>
        </ul>
    </dd>
    

    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Color.js.html">utils/Color.js</a>, <a href="Color.js.html#sunlight-1-line-126">line 126</a>
    </li></ul></dd>
    

</dl>

    
    <h5>Returns:</h5>
    
            
<div class="param-desc">
    <p>A RGBA-packed 32 bit integer</p>
</div>


<dl>
	<dt>
		Type
	</dt>
	<dd>
		
<span class="param-type">number</span>


	</dd>
</dl>


</dd>

        
<dt>
    <h4 class="name" id="unpackPixel"><span class="type-signature">&lt;static> </span>unpackPixel<span class="signature">(rgba, <span class="optional">out</span>, <span class="optional">hsl</span>, <span class="optional">hsv</span>)</span><span class="type-signature"> &rarr; {object}</span></h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p>Unpacks the r, g, b, a components into the specified color object, or a new
object, for use with Int32Array. If little endian, then ABGR order is used when 
unpacking, otherwise, RGBA order is used. The resulting color object has the
<code>r, g, b, a</code> properties which are unrelated to endianness.</p>
<p>Note that the integer is assumed to be packed in the correct endianness. On little-endian
the format is 0xAABBGGRR and on big-endian the format is 0xRRGGBBAA. If you want a
endian-independent method, use fromRGBA(rgba) and toRGBA(r, g, b, a).</p>
    </div>
    

        <h5>Parameters:</h5>
        

<table class="params table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		
		<th>Argument</th>
		

		<th>Default</th>
		

		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>rgba</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            </td>

            
                <td class="attributes">
                

                </td>
            

                <td class="default">
                
                </td>
            

            <td class="description last"><p>The integer, packed in endian order by packPixel.</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>out</code></td>
            

            <td class="type">
            
                
<span class="param-type">object</span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

                <td class="default">
                
                </td>
            

            <td class="description last"><p>An object into which 3 properties will be created: r, g and b. If not provided a new object will be created.</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>hsl</code></td>
            

            <td class="type">
            
                
<span class="param-type">boolean</span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

                <td class="default">
                
                    false
                
                </td>
            

            <td class="description last"><p>Also convert the rgb values into hsl?</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>hsv</code></td>
            

            <td class="type">
            
                
<span class="param-type">boolean</span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

                <td class="default">
                
                    false
                
                </td>
            

            <td class="description last"><p>Also convert the rgb values into hsv?</p></td>
        </tr>

	
	</tbody>
</table>

    
<dl class="details">
    

    <dt class="tag-author">Author:</dt>
    <dd class="tag-author">
        <ul>
            <li>Matt DesLauriers (@mattdesl)</li>
        </ul>
    </dd>
    

    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Color.js.html">utils/Color.js</a>, <a href="Color.js.html#sunlight-1-line-40">line 40</a>
    </li></ul></dd>
    

</dl>

    
    <h5>Returns:</h5>
    
            
<div class="param-desc">
    <p>An object with the red, green and blue values set in the r, g and b properties.</p>
</div>


<dl>
	<dt>
		Type
	</dt>
	<dd>
		
<span class="param-type">object</span>


	</dd>
</dl>


</dd>

        
<dt>
    <h4 class="name" id="updateColor"><span class="type-signature">&lt;static> </span>updateColor<span class="signature">(out)</span><span class="type-signature"> &rarr; {number}</span></h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p>Takes a color object and updates the rgba property.</p>
    </div>
    

        <h5>Parameters:</h5>
        

<table class="params table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		
		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>out</code></td>
            

            <td class="type">
            
                
<span class="param-type">object</span>


            </td>

            
            <td class="description last"><p>The color object to update.</p></td>
        </tr>

	
	</tbody>
</table>

    
<dl class="details">
    

    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Color.js.html">utils/Color.js</a>, <a href="Color.js.html#sunlight-1-line-450">line 450</a>
    </li></ul></dd>
    

</dl>

    
    <h5>Returns:</h5>
    
            
<div class="param-desc">
    <p>A native color value integer (format: 0xAARRGGBB).</p>
</div>


<dl>
	<dt>
		Type
	</dt>
	<dd>
		
<span class="param-type">number</span>


	</dd>
</dl>


</dd>

        </dl>
    

</article>

</section>


				</div>

				<div class="clearfix"></div>
				<footer>
					
					
		<span class="copyright">
		Phaser Copyright © 2012-2014 Photon Storm Ltd.
		</span>
					<br />
					
		<span class="jsdoc-message">
		Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.3.0-dev</a>
		on Tue May 20 2014 10:05:53 GMT+0100 (BST) using the <a href="https://github.com/terryweiss/docstrap">DocStrap template</a>.
		</span>
				</footer>
			</div>

			
			<div class="span3">
				<div id="toc"></div>
			</div>
			
			<br clear="both">
		</div>

	</div>
	<script src="scripts/sunlight.js"></script>
	<script src="scripts/sunlight.javascript.js"></script>
	<script src="scripts/sunlight-plugin.doclinks.js"></script>
	<script src="scripts/sunlight-plugin.linenumbers.js"></script>
	<script src="scripts/sunlight-plugin.menu.js"></script>
	<script src="scripts/jquery.min.js"></script>
	<script src="scripts/jquery.scrollTo.js"></script>
	<script src="scripts/jquery.localScroll.js"></script>
	<script src="scripts/bootstrap-dropdown.js"></script>
	<script src="scripts/toc.js"></script>


	<script>  Sunlight.highlightAll({lineNumbers:true,  showMenu: true, enableDoclinks :true}); </script>

	<script>
		$( function () {
			$( "#toc" ).toc( {
				anchorName  : function(i, heading, prefix) {
					return $(heading).attr("id") || ( prefix + i );
				},
				selectors   : "h1,h2,h3,h4",
				showAndHide : false,
				scrollTo    : 60
			} );
			$( "#toc>ul" ).addClass( "nav nav-pills nav-stacked" );
			$( "#main span[id^='toc']" ).addClass( "toc-shim" );

		} );
	</script>

	
</body>
</html>