Color

require(["esri/Color"], function(Color) { /* code goes here */ });

Class: esri/Color

Since: ArcGIS API for JavaScript 4.0

Creates a new color object by passing either a hex, rgba, or named color value. This class inherits all attributes from dojo/_base/Color to provide functions for setting colors.

It is important to note that this class is not required for defining colors in other classes of the API that require a color value. For example, when creating a SimpleFillSymbol, you can define the color of the fill symbol with a Color object created from this class, or you can define it directly on the property with an hex or rgba value. See sample snippet below.

// Define symbol color using Color object
var sfs = {
  type: "simple-fill",  // autocasts as new SimpleFillSymbol()
  color: new Color("#FF0000")
};

// Define symbol color directly using rgba value
var sfs = {
  type: "simple-fill",  // autocasts as new SimpleFillSymbol()
  color: [0, 255, 123, 0.7]
};

See also:

dojo/_base/Color

Constructors

new Color(color)

Parameter:

color String|Number[]|Object

The color to create. This parameter can be a string representing a named color or a hex value; an array of three or four numbers representing r, g, b, a values; or an object with r, g, b, a properties.

Example:

// Creates a green Color object using a named value
var color = new Color("green");

// Creates a green Color object using a hex value
var color = new Color("00FF00");

// Creates a new Color object using an array of r, g, b values
var color = new Color([125, 255, 13]);

// Add a fourth value to the array to add opacity (range between 0 and 1)
var color = new Color([125, 255, 13, 0.5]);

// Creates a new Color object using an object
var color = new Color({
  r: 125,
  g: 255,
  b: 13,
  a: 0.3  // Optional
});

Property Overview

Any properties can be set, retrieved or listened to. See the Working with Properties topic.

Type	Summary	Class
Number	The alpha value. more details	more details	Color
Number	The blue value. more details	more details	Color
Number	The green value. more details	more details	Color
Number	The red value. more details	more details	Color

Property Details

aNumber

The alpha value. This value can be any number between 0 and 1 and represents the opacity of the Color. 0 indicates the color is fully transparent and 1 indicates it is fully opaque.

bNumber

The blue value. This value can range between 0 and 255.

gNumber

The green value. This value can range between 0 and 255.

rNumber

The red value. This value can range between 0 and 255.

Method Overview

Return Type	Summary	Class
Color	Creates a Color instance by blending two colors using a weight factor. more details	more details	Color
Color	Creates a deep clone of the Color instance. more details	more details	Color
Color	Creates a Color instance using a 3 or 4 element array, mapping each element in sequence to the rgb(a) values of the color. more details	more details	Color
Color	Creates a Color instance from a hex string with a '#' prefix. more details	more details	Color
Color	Creates a new Color instance, and initializes it with values from a JSON object. more details	more details	Color
Color	Creates a Color instance from a string of the form "rgb()" or "rgba()". more details	more details	Color
Color	Creates a Color instance by parsing a generic string. more details	more details	Color
Color	Takes a named string, hex string, array of rgb or rgba values, an object with r, g, b, and a properties, or another Color object and sets this color instance to the input value. more details	more details	Color
String	Returns a CSS color string in rgba form representing the Color instance. more details	more details	Color
String	Returns a CSS color string in hexadecimal form that represents the Color instance. more details	more details	Color
Object	Returns a JSON object with all the values from a Color instance. more details	more details	Color
Number[]	Returns a 3-component array of rgb values that represent the Color instance. more details	more details	Color
Number[]	Returns a 4-component array of rgba values that represent the Color instance. more details	more details	Color

Method Details

blendColors(start, end, weight, obj){Color}static

Creates a Color instance by blending two colors using a weight factor. Optionally accepts a Color object to update and return instead of creating a new object.

Parameters:

start Color

The start color.

end Color

The end color.

weight Number

The weight value is a number from 0 to 1, with 0.5 being a 50/50 blend.

obj Color

optional

A previously allocated Color object to reuse for the result.

Returns:

Type	Description
Color	Returns a new Color object.

Example:

var startColor = new Color("#0000FF");
var endColor = new Color("#CA0013");
var blendedColor = Color.blendColors(startColor, endColor, 0.5);

clone(){Color}

Creates a deep clone of the Color instance.

Returns:

Type	Description
Color	A deep clone of the Color instance.

Example:

// Creates a deep clone of the graphic's color
var colorClone = graphic.symbol.color.clone();

fromArray(a, obj){Color}static

Creates a Color instance using a 3 or 4 element array, mapping each element in sequence to the rgb(a) values of the color. Optionally accepts a Color object to update with the color value and return instead of creating a new object.

Parameters:

a Number[]

The input array.

obj Color

optional

A previously allocated Color object to reuse for the result.

Returns:

Type	Description
Color	Returns a new Color object.

Example:

var redColor = Color.fromArray([201, 0, 19]);

fromHex(color, obj){Color}static

Creates a Color instance from a hex string with a '#' prefix. Supports 12-bit #rgb shorthand. Optionally accepts a Color object to update with the parsed value and return instead of creating a new object.

Parameters:

color String

The input color in a hex string.

obj Color

optional

A previously allocated Color object to reuse for the result.

Returns:

Type	Description
Color	Returns a new Color object.

Example:

var redColor = Color.fromHex("#CA0013");

fromJSON(json){Color}static

Creates a new Color instance, and initializes it with values from a JSON object.

Parameter:

json Object

A JSON representation of the instance.

Returns:

Type	Description
Color	A new Color instance.

fromRgb(color, obj){Color}static

Creates a Color instance from a string of the form "rgb()" or "rgba()". Optionally accepts a Color object to update with the parsed value and return instead of creating a new object.

Parameters:

color String

The input color in a string of the form "rgb()" or "rgba()".

obj Color

optional

A previously allocated Color object to reuse for the result.

Returns:

Type	Description
Color	Returns a new Color object.

Example:

var redColor = Color.fromRgb("rgb(202,0,19)");

fromString(str, obj){Color}static

Creates a Color instance by parsing a generic string. Accepts hex, rgb, and rgba style color values. Optionally accepts a Color object to update with the parsed value and return instead of creating a new object.

Parameters:

str String

The input value.

obj Color

optional

A previously allocated Color object to reuse for the result.

Returns:

Type	Description
Color	Returns a new Color object.

Example:

var redColor = Color.fromString("blue");

setColor(color){Color}

Takes a named string, hex string, array of rgb or rgba values, an object with r, g, b, and a properties, or another Color object and sets this color instance to the input value.

Parameter:

color String|Number[]|Object

The new color value. This parameter can be a string representing a named color or a hex value; an array of three or four numbers representing r, g, b, a values; or an object with r, g, b, a properties.

Returns:

Type	Description
Color	Sets the Color instance used to call this method to the new color.

toCss(includeAlpha){String}

Returns a CSS color string in rgba form representing the Color instance.

Parameter:

includeAlpha Boolean

optional

If true, the alpha value will be included in the result.

Returns:

Type	Description
String	A CSS color string in rgba form that represents the Color instance used to call this method.

toHex(){String}

Returns a CSS color string in hexadecimal form that represents the Color instance.

Returns:

Type	Description
String	A CSS color string in hexadecimal form that represents the Color instance used to call this method.

toJSON(){Object}

Returns a JSON object with all the values from a Color instance.

Returns:

Type	Description
Object	A JSON representation of the Color instance.

toRgb(){Number[]}

Returns a 3-component array of rgb values that represent the Color instance.

Returns:

Type	Description
Number[]	A 3-component array of rgb values.

toRgba(){Number[]}

Returns a 4-component array of rgba values that represent the Color instance.

Returns:

Type	Description
Number[]	A 4-component array of rgba values.

	Site wide shortcuts
`?`	Bring up this help dialog
`esc`	Dismiss this help dialog
`gh`	Go to Home
`gg`	Go to Guide
`ga`	Go to API Reference
`gs`	Go to Sample Code
`gt`	Scroll to top of page
`spacebar`	Scroll page down
`shift spacebar`	Scroll page up
`gb`	Scroll to bottom of page

	API Reference
`/`	Focus search
`esc`	Remove search focus
`enter`	Focus first search result
`c`	Go to Constructors
`p`	Go to Properties
`m`	Go to Methods
`t`	Go to Type definitions
`e`	Go to Events

Constructors

Property Overview

Property Details

Method Overview

Method Details

API Reference search results