ColorProps
Color specification. Accepts multiple formats:
- Named colors:
"red","blue","green","orange","yellow","mint","teal","cyan","indigo","purple","pink","brown","black","white","gray","clear" - Semantic colors:
"primary","secondary","tertiary","quaternary","accent","background"— adapt to light/dark mode - Label colors:
"label","secondaryLabel","tertiaryLabel","quaternaryLabel","placeholderText","link" - System grays:
"systemGray","systemGray2","systemGray3","systemGray4","systemGray5","systemGray6" - Backgrounds:
"systemBackground","secondarySystemBackground","tertiarySystemBackground","systemGroupedBackground","secondarySystemGroupedBackground","tertiarySystemGroupedBackground" - Fills:
"systemFill","secondarySystemFill","tertiarySystemFill","quaternarySystemFill" - Separators:
"separator","opaqueSeparator" - Hex strings:
"#FF5500" - RGB object (0-1 range):
{ r: 0.5, g: 0.3, b: 0.9 }or{ red: 0.5, green: 0.3, blue: 0.9, alpha: 1 } - HSL object:
{ h: 240, s: 0.8, b: 0.5 }or{ hue: 240, saturation: 0.8, brightness: 0.5 } - ARGB integer:
0xFFFF5500
Methods
opacity
Returns a new color with the specified opacity.number
Opacity between 0 (fully transparent) and 1 (fully opaque).
Support
Usage
As a standalone view
Color can be used directly as a view that fills its frame:
Named colors
Semantic colors
Semantic colors adapt to the current light/dark mode:System semantic colors
Additional semantic colors for common UI patterns — all adapt to light/dark mode:Hex colors
RGB colors
HSL colors
With opacity
As a style value
Colors are used with style-accepting modifiers like.foregroundStyle(), .background(), and .fill():