Skip to main content
The Color class is used wherever color needs to be specified in amCharts 5. It provides methods for creating, converting, and manipulating colors.

​
Creating Colors

​
color()

function color(input: number | string): Color
Returns a new Color object based on input. Accepts parameters in CSS hex or rgb/rgba strings, or hex numbers.
​
input
number | string
required
Color value in various formats:
  • "#f00" - Short hex
  • "#ff0000" - Full hex
  • "rgb(255, 0, 0)" - RGB string
  • "rgba(255, 0, 0, 1)" - RGBA string
  • 0xff0000 - Hex number
​
return
Color
A Color object
Example: 
import * as am5 from "@amcharts/amcharts5";

const red = am5.color(0xff0000);
const blue = am5.color("#0000ff");
const green = am5.color("rgb(0, 255, 0)");

​
Color Class

​
Properties

​
hex

get hex(): number
​
hex
number
Color numeric value.

​
r

get r(): number
​
r
number
Value of color’s R (red) channel (0-255).

​
g

get g(): number
​
g
number
Value of color’s G (green) channel (0-255).

​
b

get b(): number
​
b
number
Value of color’s B (blue) channel (0-255).

​
Instance Methods

​
toCSS()

toCSS(alpha: number = 1): string
Returns color CSS representation in form of rgba(r, g, b, a) string.
​
alpha
number
default:"1"
Opacity value (0-1)
​
return
string
CSS color string in rgba format
Example: 
const color = am5.color(0xff0000);
console.log(color.toCSS(0.5)); // "rgba(255, 0, 0, 0.5)"

​
toCSSHex()

toCSSHex(): string
Returns color CSS representation in form of #rgb string.
​
return
string
CSS color string in hex format
Example: 
const color = am5.color(0xff0000);
console.log(color.toCSSHex()); // "#ff0000"

​
toHSL()

toHSL(alpha: number = 1): iHSL
Returns color’s HSL (Hue, Saturation, Lightness) information.
​
alpha
number
default:"1"
Opacity value (0-1)
​
return
iHSL
Object containing HSL values

​
toString()

toString(): string
Returns string representation of the color.
​
return
string
Hex color string

​
Static Methods

​
Color.fromHex()

static fromHex(hex: number): Color
Converts hex number into a new Color object.
​
hex
number
required
Hex color number (e.g., 0xff0000)
​
return
Color
New Color object
Example: 
const red = am5.Color.fromHex(0xff0000);

​
Color.fromRGB()

static fromRGB(r: number, g: number, b: number): Color
Converts RGB values to a new Color object.
​
r
number
required
Red value (0-255)
​
g
number
required
Green value (0-255)
​
b
number
required
Blue value (0-255)
​
return
Color
New Color object
Example: 
const purple = am5.Color.fromRGB(128, 0, 128);

​
Color.fromString()

static fromString(s: string): Color
Converts RGB hex string to a new Color object.
​
s
string
required
Hex color string (e.g., “#ff0000”)
​
return
Color
New Color object
Example: 
const red = am5.Color.fromString("#ff0000");

​
Color.fromCSS()

static fromCSS(s: string): Color
Converts CSS rgba() syntax to a new Color object.
​
s
string
required
CSS color string (e.g., “rgba(255, 0, 0, 1)”)
​
return
Color
New Color object
Example: 
const red = am5.Color.fromCSS("rgba(255, 0, 0, 1)");

​
Color.fromHSL()

static fromHSL(h: number, s: number, l: number): Color
Converts HSL values into a new Color object.
​
h
number
required
Hue value (0-360)
​
s
number
required
Saturation value (0-1)
​
l
number
required
Lightness value (0-1)
​
return
Color
New Color object

​
Color.fromAny()

static fromAny(s: string | number | Color): Color
Converts to color from virtually anything. Will throw an exception if unable to resolve the color.
​
s
string | number | Color
required
Source value in any supported format
​
return
Color
New Color object

​
Color.alternative()

static alternative(
  color: Color,
  lightAlternative?: Color,
  darkAlternative?: Color
): Color
Returns a new Color object based on either lightAlternative or darkAlternative depending on which one is more contrasting with the color.
​
color
Color
required
Reference color to compare against
​
lightAlternative
Color
Light color option
​
darkAlternative
Color
Dark color option
​
return
Color
The more contrasting alternative color

​
Color.interpolate()

static interpolate(
  diff: Time,
  from: Color,
  to: Color,
  mode: "rgb" | "hsl" = "rgb"
): Color
Returns an intermediate Color between two reference colors depending on the progress (diff) between the two.
​
diff
Time
required
Progress value (0-1) between the two colors
​
from
Color
required
Source color
​
to
Color
required
Target color
​
mode
'rgb' | 'hsl'
default:"'rgb'"
Interpolation mode
​
return
Color
Interpolated color
Example: 
const red = am5.color(0xff0000);
const blue = am5.color(0x0000ff);
const purple = am5.Color.interpolate(0.5, red, blue); // 50% between red and blue

​
Color.lighten()

static lighten(color: Color, percent: number): Color
Returns a new Color lightened by percent value. Use negative value to darken the color.
​
color
Color
required
Source color
​
percent
number
required
Percent to lighten (positive) or darken (negative)
​
return
Color
New lightened/darkened color
Example: 
const blue = am5.color(0x0000ff);
const lightBlue = am5.Color.lighten(blue, 0.3);
const darkBlue = am5.Color.lighten(blue, -0.3);

​
Color.brighten()

static brighten(color: Color, percent: number): Color
Returns a new Color brightened by percent value. Use negative value to dim the color.
​
color
Color
required
Source color
​
percent
number
required
Percent to brighten (positive) or dim (negative)
​
return
Color
New brightened/dimmed color

​
Color.saturate()

static saturate(color: Color, percent: number): Color
Returns a new Color saturated by percent value. Value range is between 0 (fully desaturated) to 1 (full color).
​
color
Color
required
Source color
​
percent
number
required
Saturation level (0-1)
​
return
Color
New saturated color

​
See Also

Build docs developers (and LLMs) love

Get started for freeTalk to us