phaser

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Phaser Class: Color</title>  <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.AudioSprite.html">AudioSprite</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.FlexGrid.html">FlexGrid</a> </li> <li class="class-depth-1"> <a href="Phaser.FlexLayer.html">FlexLayer</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-2"> <a href="Phaser.Particles.Arcade.html">Arcade</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.RotationalSpring.html">RotationalSpring</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.Rope.html">Rope</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="componentToHex"><span class="type-signature"><static> </span>componentToHex<span class="signature">(color)</span><span class="type-signature"> → {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-618">line 618</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"><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"> → {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"> <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"> <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"> <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"> <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"> <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"> <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"> <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"> <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"><static> </span>fromRGBA<span class="signature">(rgba, <span class="optional">out</span>)</span><span class="type-signature"> → {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"> <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"><static> </span>getAlpha<span class="signature">(color)</span><span class="type-signature"> → {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-853">line 853</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"><static> </span>getAlphaFloat<span class="signature">(color)</span><span class="type-signature"> → {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-865">line 865</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"><static> </span>getBlue<span class="signature">(color)</span><span class="type-signature"> → {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-901">line 901</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"><static> </span>getColor<span class="signature">(r, g, b)</span><span class="type-signature"> → {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-484">line 484</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"><static> </span>getColor32<span class="signature">(a, r, g, b)</span><span class="type-signature"> → {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-467">line 467</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="getGreen"><span class="type-signature"><static> </span>getGreen<span class="signature">(color)</span><span class="type-signature"> → {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-889">line 889</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"><static> </span>getRandomColor<span class="signature">(min, max, alpha)</span><span class="type-signature"> → {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-757">line 757</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"><static> </span>getRed<span class="signature">(color)</span><span class="type-signature"> → {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-877">line 877</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"><static> </span>getRGB<span class="signature">(color)</span><span class="type-signature"> → {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-789">line 789</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 > 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"><static> </span>getWebRGB<span class="signature">(color)</span><span class="type-signature"> → {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> | <span class="param-type">Object</span> </td> <td class="description last"><p>Color in RGB (0xRRGGBB), ARGB format (0xAARRGGBB) or an Object with r, g, b, a properties.</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-831">line 831</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"><static> </span>hexToColor<span class="signature">(hex, <span class="optional">out</span>)</span><span class="type-signature"> → {object}</span></h4> </dt> <dd> <div class="description"> <p>Converts a hex string into a