8.8 released—CSS Media Query support, SF Symbols and much more...
Learn more
Color
Represents a color object. Stores all color components (alpha (opacity), red, green, blue) in a [0..255] range.

Summary

Constructors

constructor

new Color(knownColor: string): Color
Parameter Default Description
knownColor
string

Returns Color
new Color(hex: string): Color
Parameter Default Description
hex
string

Returns Color
new Color(argb: number): Color
Parameter Default Description
argb
number

Returns Color
new Color(alpha: number, red: number, green: number, blue: number, type?: "rgb" | "hsl" | "hsv"): Color
Parameter Default Description
alpha
number

red
number

green
number

blue
number

type
"rgb" | "hsl" | "hsv"

Returns Color

Properties

a

a: number
Gets the Alpha component (in the [0, 255] range) of this color. This is a read-only property.

android

android: number
Gets the android-specific integer value representation. Same as the Argb one. This is a read-only property.

argb

argb: number
Gets the Argb Number representation of this color where each 8 bits represent a single color component. This is a read-only property.

b

b: number
Gets the Blue component (in the [0, 255] range) of this color. This is a read-only property.

g

g: number
Gets the Green component (in the [0, 255] range) of this color. This is a read-only property.

hex

hex: string
Gets the Hexadecimal string representation of this color. This is a read-only property.

ios

ios: any
Gets the iOS-specific UIColor value representation. This is a read-only property.

name

name: string
Gets the known name of this instance. Defined only if it has been constructed from a known color name - e.g. "red". This is a read-only property.

r

r: number
Gets the Red component (in the [0, 255] range) of this color. This is a read-only property.

Methods

brighten

brighten(amount: number): Color
Brighten the color a given amount, from 0 to 100.
Parameter Default Description
amount
number

(between 0 and 100)

Returns Color

complement

complement(): Color
returns the color complement
Returns Color

darken

darken(amount: number): Color
Darken the color a given amount, from 0 to 100. Providing 100 will always return black.
Parameter Default Description
amount
number

(between 0 and 100)

Returns Color

desaturate

desaturate(amount: number): Color
Desaturate the color a given amount, from 0 to 100. Providing 100 will is the same as calling greyscale.
Parameter Default Description
amount
number

(between 0 and 100)

Returns Color

equals

equals(value: Color): boolean
Specifies whether this Color is equal to the Color parameter.
Parameter Default Description
value

The Color to test.

Returns boolean

getBrightness

getBrightness(): number
return the [brightness](http://www.w3.org/TR/AERT#color-contrast)
Returns number

getLuminance

getLuminance(): number
return the [luminance](http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef)
Returns number

greyscale

greyscale(): Color
Completely desaturates a color into greyscale. Same as calling desaturate(100).
Returns Color

isDark

isDark(): boolean
return true if brightenss < 128
Returns boolean

isLight

isLight(): boolean
return true if brightenss >= 128
Returns boolean

lighten

lighten(amount: number): Color
Lighten the color a given amount, from 0 to 100. Providing 100 will always return white.
Parameter Default Description
amount
number

(between 0 and 100)

Returns Color

saturate

saturate(amount: number): Color
Saturate the color a given amount, from 0 to 100.
Parameter Default Description
amount
number

(between 0 and 100)

Returns Color

setAlpha

setAlpha(a: number): Color
Return this color (as a new Color instance) with the provided alpha
Parameter Default Description
a
number

Returns Color

spin

spin(amount: number): Color
Spin the hue a given amount, from -360 to 360. Calling with 0, 360, or -360 will do nothing (since it sets the hue back to what it was before).
Parameter Default Description
amount
number

(between 0 and 100)

Returns Color

toHsl

toHsl(): {
  a: number
  h: number
  l: number
}
return the hsl representation of the color
Returns { a: number h: number l: number }

toHslString

toHslString(): string
return the [CSS hsv](https://www.w3schools.com/Css/css_colors_hsl.asp) representation of the color
Returns string

toHsv

toHsv(): {
  a: number
  h: number
  s: number
}
return the hsv representation of the color
Returns { a: number h: number s: number }

toHsvString

toHsvString(): string
return the [CSS hsv](https://www.w3schools.com/Css/css_colors_rgb.asp) representation of the color
Returns string

toRgbString

toRgbString(): string
return the [CSS rgb](https://www.w3schools.com/Css/css_colors_rgb.asp) representation of the color
Returns string

equals

Static
equals(value1: Color, value2: Color): boolean
Compares two Color instances.
Parameter Default Description
value1

A Color to compare.

value2

A Color to compare.

Returns boolean

fromHSL

Static
fromHSL(a: any, h: any, s: any, l: any): Color
returns a new Color from HSL
Parameter Default Description
a
any

h
any

s
any

l
any

Returns Color

fromHSV

Static
fromHSV(a: any, h: any, s: any, l: any): Color
Parameter Default Description
a
any

h
any

s
any

l
any

Returns Color

fromIosColor

Static
fromIosColor(value: any): Color
Creates color from iOS-specific UIColor value representation.
Parameter Default Description
value
any

Returns Color

isValid

Static
isValid(value: any): boolean
Validates if a value can be converted to color.
Parameter Default Description
value
any

Input string.

Returns boolean

mix

Static
mix(color1: Color, color2: Color, amount: number): Color
returns the color complement
Parameter Default Description
color1

color2

amount
number

Returns Color