Color

Type class

Represents a color.

Color accepts value only in iRGB object format. To create Color object by parsing it from any supported string-based formats, use helper color function:

am4core.color("#ff0000");
am4core.color("#f00");
am4core.color("rgb(255, 0, 0)");
am4core.color("rgba(255, 0, 0, 0.5)");
am4core.color({ r: 255, g: 0, b: 0 });
am4core.color("red");

am4core.color("#ff0000");
am4core.color("#f00");
am4core.color("rgb(255, 0, 0)");
am4core.color("rgba(255, 0, 0, 0.5)");
am4core.color({ r: 255, g: 0, b: 0 });
am4core.color("red");

More info: Colors, Gradients, Patterns for color-related info

Sources

Color can be used (imported) via one of the following packages.

TypeScript

/**
 * Import from: "core.ts"
 * Use like: am4core.Color
 */
import * as am4core from "@amcharts/amcharts4/core";

JavaScript

/**
 * Include via: <script src="core.js"></script>
 * Access items like: am4core.Color
 */

Inheritance

Color does not extend any other symbol.

Color is not extended by any other symbol.

Properties

#alpha

Type number

Set alpha (transparency) of the color.

Returns current transparency.

#alternative

Type Color

Returns a either light or dark color that contrasts specifically with this color.

Uses properties darkColor (default black) and lightColor (default white).

Useful when determining which color label should be on a colored background, so that it stands out.

#darkColor

Type Color

Sets "dark" color. Used when determining contrasting color.

Returns current dark color setting.

#hex

Type string

Returns color hex value string, e.g. "#FF0000".

#lightColor

Type Color

Sets "light" color. Used when determining contrasting color.

Returns current light color setting.

#rgb

Type $type.Optional <iRGB>

Returns iRGB representation of the color.

#rgba

Type string

Returns an rgba() representation of the color, e.g.:

rgba(255, 0, 0, 0.5).

Methods

#brighten(percent: number)

Returns Color

Returns a new Color which is percent brighter (positive value), or darker (negative value).

Parameter is in the scale of -1 to 1.

#constructor(color: $type.Optional <iRGB>)

Returns Color

Constructor

#lighten(percent: number)

Returns Color

Returns a new Color which is percent lighter (positive value), or darker (negative value).

Parameter is in the scale of -1 to 1.

#saturate(saturation: number)

Returns Color

Returns a new Color based on current color with specific saturation applied.

saturation can be in the range of 0 (fully desaturated) to 1 (fully saturated).

Events

Color does not have any events.