Class “Color”

Object > Color

Represents a color. See also ColorValue

Type: Color extends Object
Constructor: public
Singleton: No
Namespace: tabris
Direct subclasses: None
JSX Support: No

Examples

JavaScript

import {Color} from 'tabris';

const color = Color.from('red');
console.log(color.red); // red channel value

Constructor

new Color(red, green, blue, alpha?)

Parameter Type Description
red number A number between and including 0 and 255
green number A number between and including 0 and 255
blue number A number between and including 0 and 255
alpha number A number between and including 0 and 255. Defaults to 255. Optional.

Methods

equals(value)

Tests if the given value is a Color instance that is deeply equal to this one.

Parameter Type Description
value Color  

Returns: boolean

toArray()

Returns a array representation of the color in the format of [red, green, blue, alpha]. Each value is a number between (and in including) 0 and 255.

Returns: [number, number, number, number]

toString()

Returns a string representation of the color. Is either in rgb(red, green, blue) or rgba(red, green, blue, alpha) format. Note that alpha is a value between 0 and 1 in the string representation, but between 0 and 255 on the Color object.

Returns: string

Static Methods

from(colorValue)

Creates a new instance of Color using any valid color expression. For any other value, including null and 'initial' the method throws.

Parameter Type Description
colorValue ColorValue The value to create a Color instance from

Returns: Color

isColorValue(value)

Returns true if value is a ColorValue. This includes null and 'initial'. Use this to check if a value will be accepted by a color property. This is also a valid TypeScript type guard function.

Parameter Type Description
value any The value to test

Returns: boolean

isValidColorValue(value)

Returns true if value is a valid ColorValue. This excludes null and 'initial'. Use this to check if a value will be accepted by Color.from. This is also a valid TypeScript type guard function.

Parameter Type Description
value any The value to test

Returns: boolean

Properties

alpha

A number between and including 0 and 255

Type: number
Settable: No

This property can only be set via constructor. Once set, it cannot change anymore.

blue

A number between and including 0 and 255

Type: number
Settable: No

This property can only be set via constructor. Once set, it cannot change anymore.

green

A number between and including 0 and 255

Type: number
Settable: No

This property can only be set via constructor. Once set, it cannot change anymore.

red

A number between and including 0 and 255

Type: number
Settable: No

This property can only be set via constructor. Once set, it cannot change anymore.

Static Properties

aqua

Type: Color
Settable: No

black

Type: Color
Settable: No

blue

Type: Color
Settable: No

fuchsia

Type: Color
Settable: No

gray

Type: Color
Settable: No

green

Type: Color
Settable: No

lime

Type: Color
Settable: No

maroon

Type: Color
Settable: No
Type: Color
Settable: No

olive

Type: Color
Settable: No

purple

Type: Color
Settable: No

red

Type: Color
Settable: No

silver

Type: Color
Settable: No

teal

Type: Color
Settable: No

transparent

Type: Color
Settable: No

white

Type: Color
Settable: No

yellow

Type: Color
Settable: No

ColorValue

  • JavaScript Type: tabris.Color, Object, Array, string
  • TypeScript Type: tabris.ColorValue

A ColorValue represents a 24 bit color, plus an alpha channel for opacity. This type allows various expressions that can all be used in place of a Color instance for convenience. All API that accept these expressions will convert them to a Color object. (With the exception of CanvasContext.) Setting a ColorValue property to null resets it to the default.

In TypeScript you can import this type as a union with import {ColorValue} from 'tabris'; or use tabris.ColorValue. Type guards for ColorValue are available as Color.isColorValue and Color.isValidColorValue.

In addition to Color instances ColorValue includes:

ColorLikeObject

  • JavaScript Type: Object
  • TypeScript Type: tabris.ColorLikeObject
interface ColorLikeObject {
  red: number;
  green: number;
  blue: number;
  alpha?: number;
}

A plain object implementing the same properties as Color.

Examples:

{red: 255, green: 255, blue: 255}
{red: 255, green: 255, blue: 255, alpha: 200}

ColorArray

  • JavaScript Type: Array
  • TypeScript Type: tabris.ColorArray

An array in the shape of [red, green, blue, alpha]. All entries should be natural number between (and including) 0 and 255. If omitted, alpha is 255.

Examples:

[255, 0, 0]
[255, 0, 0, 200]

ColorString

  • JavaScript Type: string
  • TypeScript Type: tabris.ColorString

Any string in the following format:

Pattern Description
"#rrggbb" Hexadecimal rgb, with each value being between and including 00 and ff.
"#rgb" Hexadecimal rgb, with each value being between and including 0 and f.
"#rrggbbaa" Hexadecimal rgba, with each value being between and including 00 and ff.
"#rgba" Hexadecimal rgba, with each value being between and including 0 and f.
"rgb(r, g, b)" With r, g and b being numbers in the range 0..255.
"rgba(r, g, b, a)" With a being a number in the range 0..1.
"transparent" Sets a fully transparent color. Same as rgba(0, 0, 0, 0).
"initial" Resets the color to its (platform-dependent) default. Same as null.

Color names from the CSS3 specification are also accepted. They are available as static string properties of Color, e.g. Color.lime. These exist just to help with autocompletion.

Examples:

"#f00"
"#ff0000"
"#ff000080" // 50% opacity red
"#ff06" // 40% opacity yellow
"rgb(255, 0, 0)"
"rgba(255, 0, 0, 0.8)"
"red"
"initial" // same as null