Color

The Color class enables the creation of a color object:

• using color components (alpha, red, green, blue) ranging from 0 to 255,
• using various color representations like ARGB, color names, hex values, and more.

The ios and android properties of the Color class instance return the native platform instance of UIColor on iOS and Color on Android.

How to use the Color class ​

Create a color object from a hex value ​

const color = new Color('#FF00CC')
const colorShortHex = new Color('#F0C')

Create a color object from an alpha value ​

const colorARGB = new Color(100, 255, 100, 100)

Color API ​

The Color class offers the following properties and methods.

constructor ​

Creates a color object. The Color class offers the following constructor overloads:

const color = new Color(knownColor)

Creates a Color instance from a known color name.

• knownColor : A color name string such as 'red', 'purple', 'orange'.

const color = new Color(hex)

Creates a Color instance from a color hexidecimal code.

• hex: A string of a hexidecimal color value such as '#fff' or '#FF00CC'.

const color = new Color(argb)

Creates a Color instance from a number representing a color with an alpha.

• argb: A number such as 4293377432 as, representing color.

const color = new Color(alpha: number, red: number, green:number, blue: number, type?: 'rgb' | 'hsl' | 'hsv')

a ​

colorAlpha: number = color.a

Gets the Alpha component of the color. This is a read-only property.

r ​

colorRed: number = color.r

Gets the Red component of the color. This is a read-only property.

g ​

colorGreen: number = color.g

Gets the Green component of the color. This is a read-only property.

b ​

colorBlue: number = color.b

Gets the Blue component of the color. This is a read-only property.

argb ​

colorARGB: number = color.argb

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

hex ​

colorHex: string = color.hex

Gets the Hexadecimal string representation of the color.

name ​

colorName: string = color.name

Gets the known name of this instance. Defined only if it has been constructed from a known color name - e.g. "red".

android ​

androidColor = color.android

Gets the android-specific integer value representation. Same as the ARGB one.

ios ​

iOSColor: UIColor = color.ios

Gets the iOS-specific UIColor value representation.

Color.equals() ​

areColorsEqual: boolean = Color.equals(value1: Color, value2: Color)

A static Color class method that compares two Color instances and returns true if they are the same or false otherwise.

Color.isValid() ​

isValidColorValue: boolean = Color.isValid(value)

A static Color class method that validates if a value can be converted to a color.

Color.fromIosColor() ​

colorFromIosColor: Color = Color.fromIosColor(value)

Creates a Color instance from iOS-specific UIColor value representation. value is of type UIColor.

Color.mix() ​

colorMix: Color = Color.mix(color1: Color, color2: Color, amount: number)

A static method that creates a Color instance from mixture of two colors.

Color.fromHSL() ​

colorNew: Color = Color.fromHSL(a, h, s, l)

A static method that returns a new Color from HSL.

Color.fromHSV() ​

colorNew: Color = Color.fromHSV(a, h, s, v)

A static method that returns a new Color from HSV.

equals() ​

color.equals(value)

A Color instance method that checks whether the color instance on which the method is called equals the Color instance passed to the method.

isDark() ​

color.isDark()

A Color instance method that returns true if the color is dark or returnsfalse otherwise. A color is dark when brightenss < 128.

isLight() ​

color.isLight()

A Color instance method that returns true if the color is light or returnsfalse otherwise.A color is light when brightenss >= 128

getBrightness() ​

colorBrightness: number = color.getBrightness()

Returns the color's brightness value.

getLuminance ​

colorLuminance: number = color.getLuminance()

Returns the color's luminance value.

setAlpha() ​

colorWithAlpha: Color = color.setAlpha(a)

Adds the specified alpha to the color instance on which the method is called and returns the result as a new Color instance.

a is a value between 0 and 255.

toHsl() ​

colorHsl: { h: number; s: number; l: number; a: number } = color.toHsl()

Returns the hsl({ h: number; s: number; l: number; a: number }) representation of the color.

toHslString() ​

colorHslString: string = color.toHslString()

Returns the CSS hsl representation of the color.

toHsv() ​

colorHsv: { h: number; s: number; v: number; a: number } = color.toHsv()

Returns the hsv({ h: number; s: number; v: number; a: number }) representation of the color

toHsvString() ​

colorHsvString: string = color.toHsvString()

Returns the CSS rgb representation of the color.

desaturate() ​

colorDesaturated: Color = color.desaturate(amount)

Desaturates the color by the specified amount. amount is a number between 0 and 100 inclusive. Providing 100 is the same as calling greyscale.

saturate() ​

colorSaturated: Color = color.saturate(amount)

Saturates the color by the specified amount.amount is a number between 0 and 100 inclusive.

greyscale() ​

colorGrayscaled: Color = color.greyscale()

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

lighten() ​

colorLightened: Color = color.lighten(amount)

Lightens the color by the specified amount.amount is a number between 0 and 100 inclusive. Providing 100 returns white.

brighten() ​

colorBrightened: Color = color.brighten(amount)

Brightens the color by the specified amount.amount is a number between 0 and 100 inclusive.

darken() ​

colorDarkened: Color = color.darken(amount: number)

Darkens the color by the specified amount.amount is a number between 0 and 100 inclusive. 100 returns black.

spin() ​

colorSpinned: Color = color.spin(amount)

Spins the hue by the given amount, from -360 to 360. Calling with 0, 360, or -360 does nothing since it sets the hue back to what it was before.

complement() ​

colorComplement: Color = color.complement()

Returns a Color instance that is the complement of the current color.

Native Component ​

• Android: android.graphics.Color
• iOS: UIColor