Color

Type class

A color. Every color setting takes a Color object, usually created with am5.color(), e.g. am5.color(0xff0000).

More info: Colors, gradients, and patterns

Sources

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

TypeScript

// Import Color
import * as am5 from "@amcharts/amcharts5";

// Create Color
am5.Color.new(root, {
  // ... config if applicable
});

JavaScript

<!-- Load Color -->
<script src="index.js"></script>

<script>
// Create Color
am5.Color.new(root, {
  // ... config if applicable
});
</script>

Inheritance

Color does not extend any other symbol.

Color is not extended by any other symbol.

Properties

#b

Type number

The blue channel, from 0 to 255.

#g

Type number

The green channel, from 0 to 255.

#hex

Type number

The color as a number, such as 0xff0000.

#r

Type number

The red channel, from 0 to 255.

Methods

#alternative(color: Color,
lightAlternative?: Color,
darkAlternative?: Color)

StaticReturns Color

Returns lightAlternative or darkAlternative, whichever contrasts more with color: the dark one for a light color, the light one for a dark.

#brighten(color: Color,
percent: number)

StaticReturns Color

Returns a new Color brightened by percent, from -1 to 1. Unlike lighten(), it adds the same amount to every channel. A negative value dims the color.

#fromAny(s: string | number | Color)

StaticReturns Color

Returns a new Color from a hex number, a hex, rgb() or rgba() string, or another Color. Throws an error for anything else.

#fromCSS(s: string)

StaticReturns Color

Returns a new Color from a CSS rgb() or rgba() string. The alpha part is ignored, and a string it can't read gives black.

Color.fromCSS("rgba(255, 0, 0, 1)") // red

Color.fromCSS("rgba(255, 0, 0, 1)") // red

#fromHex(hex: number)

StaticReturns Color

Returns a new Color from a hex number.

Color.fromHex(0xff0000) // red

Color.fromHex(0xff0000) // red

#fromHSL(h: number,
s: number,
l: number)

StaticReturns Color

Returns a new Color from hue, saturation and lightness.

#fromRGB(r: number,
g: number,
b: number)

StaticReturns Color

Returns a new Color from red, green and blue channels.

#fromString(s: string)

StaticReturns Color

Returns a new Color from a hex string, such as "#ff0000" or "#f00".

Color.fromString("#ff0000") // red

Color.fromString("#ff0000") // red

#interpolate(diff: Time,
from: Color,
to: Color,
mode: "rgb" | "hsl")

StaticReturns Color

Returns a color between from and to.

#interpolateColors(position: number,
colors: Array,
mode: "rgb" | "hsl")

StaticReturns Color

Returns a color on a scale through colors, spread evenly: with three colors, 0.5 is the middle one. For example, from bad to good:

[negative, warning, positive] from the interface colors.

#lighten(color: Color,
percent: number)

StaticReturns Color

Returns a new Color lightened by percent, from -1 to 1: 0.2 moves each channel 20% of the way to white. A negative value darkens it toward black.

#saturate(color: Color,
percent: number)

StaticReturns Color

Returns a new Color with its saturation set to percent, from 0 (grey) to 1. The value replaces the color's saturation rather than adjusting it; 1 returns the color unchanged.

#toCSS(alpha: number)

Returns string

Returns the color as a CSS rgba(r, g, b, a) string.

#toCSSHex()

Returns string

Returns the color as a CSS hex string, such as "#ff0000".

#toHSL(alpha: number)

Returns iHSL

Returns the color's hue, saturation and lightness, each from 0 to 1.

#toString()

Returns string

Events

Color does not have any events.