Class “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 |
navy
| 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 |
Related Types
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
