Color
Color creation and manipulation
Colours from hex, RGB, RGBA or HSL, plus named and semantic system colours. Instance methods adjust opacity and brightness.
Properties
rNumberRed component (0-1)
gNumberGreen component (0-1)
bNumberBlue component (0-1)
aNumberAlpha component (0-1)
Methods
Color.rgb(r, g, b)Color ›Create a color from RGB values (0-255).
- r Number required
- g Number required
- b Number required
Color.rgba(r, g, b, a)Color ›Create a color from RGBA values (RGB: 0-255, A: 0-1).
- r Number required
- g Number required
- b Number required
- a Number required
Color.hsl(h, s, l)Color ›Create a color from HSL values (H: 0-360, S: 0-100, L: 0-100).
- h Number required
- s Number required
- l Number required
Color.white()Color ›White color.
Color.black()Color ›Black color.
Color.gray()Color ›Gray color.
Color.red()Color ›Red color.
Color.blue()Color ›Blue color.
Color.green()Color ›Green color.
Color.orange()Color ›Orange color.
Color.yellow()Color ›Yellow color.
Color.purple()Color ›Purple color.
Color.pink()Color ›Pink color.
Color.teal()Color ›Teal color.
Color.mint()Color ›Mint color.
Color.cyan()Color ›Cyan color.
Color.brown()Color ›Brown color.
Color.indigo()Color ›Indigo color.
Color.clear()Color ›Transparent color.
Color.label()Color ›System label color (adapts to light/dark mode).
Color.secondaryLabel()Color ›System secondary label color.
Color.tertiaryLabel()Color ›System tertiary label color.
Color.systemBackground()Color ›System background color.
Color.secondaryBackground()Color ›System secondary background color.
Color.separator()Color ›System separator color.
Color.systemFill()Color ›System fill color.
Examples
Named & hex colors
const red = Color.red();
const custom = Color.hex("#1a73e8");
const semi = custom.opacity(0.5);Predefined colors
// Named: white, black, gray, red, blue,
// green, orange, yellow, purple, pink,
// teal, mint, cyan, brown, indigo, clear
//
// Semantic: label, secondaryLabel,
// tertiaryLabel, systemBackground,
// secondaryBackground, separator, systemFillRGB & HSL
const c1 = Color.rgb(26, 115, 232);
const c2 = Color.hsl(217, 80, 50);
const dark = c1.darker(0.2);