Color

AMD: require(["esri/Color"], (Color) => { /* code goes here */ });
ESM: import Color from "@arcgis/core/Color";
Class: esri/Color
Since: ArcGIS API for JavaScript 4.0

Creates a new color object by passing either a hex, rgb(a), hsl(a) or named color value. Hex, hsl(a) and named color values can be passed as a string:

// Examples for green
let color = new Color("green");  // named value
let color = new Color("#00FF00");  // hex value
let color = new Color("hsl(120, 100%, 50%)");  // hsl
let color = new Color("hsla(120, 100%, 50%, 0.5)"); // hsla

RGB values can be passed in as either an array, a string or an object:

// Examples for green
let color = new Color([0, 255, 0]);
let color = new Color([0, 255, 0, 0.5]);
let color = new Color("rgb(0, 255, 0)");
let color = new Color("rgba(0, 255, 0, 0.5)");
let color = new Color({r: 0, g: 255, b: 0});
let color = new Color({r: 0, g: 255, b: 0, a: 0.5});

The alpha-channel (opacity) in rgba and hsla can have a value between 0.0 (fully transparent) and 1.0 (fully opaque).

See also:

Constructors

new Color(color)
Parameter:

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
let color = new Color("green");

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

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

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

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

Property Overview

Name Type Summary Class
Numbermore details

The alpha value.

more detailsColor
Numbermore details

The blue value.

more detailsColor
Numbermore details

The green value.

more detailsColor
Numbermore details

The red value.

more detailsColor

Property Details

a Number

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.

b Number

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

g Number

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

r Number

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

Method Overview

Name Return Type Summary Class
Colormore details

Creates a Color instance by blending two colors using a weight factor.

more detailsColor
Colormore details

Creates a deep clone of the Color instance.

more detailsColor
Colormore details

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 detailsColor
Colormore details

Creates a Color instance from a hex string with a '#' prefix.

more detailsColor
Colormore details

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

more detailsColor
Colormore details

Creates a Color instance from a string of the form "rgb()" or "rgba()".

more detailsColor
Colormore details

Creates a Color instance by parsing a generic string.

more detailsColor
Colormore details

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

more detailsColor
Stringmore details

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

more detailsColor
Stringmore details

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

more detailsColor
Objectmore details

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

more detailsColor
Number[]more details

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

more detailsColor
Number[]more details

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

more detailsColor

Method Details

blendColors(start, end, weight, out){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.

out Color
optional

A previously allocated Color object to reuse for the result.

Returns:
Type Description
Color Returns a new Color object.
Example:
let startColor = new Color("#0000FF");
let endColor = new Color("#CA0013");
let 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
let 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:

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:
let 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:
let 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, out){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()".

out Color
optional

A previously allocated Color object to reuse for the result.

Returns:
Type Description
Color Returns a new Color object.
Example:
let 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:
let redColor = Color.fromString("blue");
setColor(color){Color}

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

Parameter:

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.

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.