Skip to main content
Color(props?: ColorProps): Color;
​
props
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. 
.opacity(value: number): Color
​
value
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: 
Color("blue")
    .frame({ width: 100, height: 100 })
    .cornerRadius(8)

​
Named colors

Color("red")
Color("blue")
Color("green")
Color("clear")

​
Semantic colors

Semantic colors adapt to the current light/dark mode: 
Color("primary")
Color("secondary")
Color("accent")
Color("background")

​
System semantic colors

Additional semantic colors for common UI patterns — all adapt to light/dark mode: 
Color("label")
Color("secondaryLabel")
Color("systemGray3")
Color("systemBackground")
Color("secondarySystemBackground")
Color("separator")
Color("systemFill")

​
Hex colors

Color("#FF5733")
Color("#00AAFF")

​
RGB colors

Color({ r: 0.5, g: 0.3, b: 0.9 })
Color({ r: 1, g: 0.34, b: 0.2, a: 0.5 })
Color({ red: 0.5, green: 0.3, blue: 0.9, alpha: 1 })

​
HSL colors

Color({ h: 210, s: 0.8, b: 0.9 })
Color({ hue: 210, saturation: 0.8, brightness: 0.9 })

​
With opacity

Color("blue").opacity(0.5)
Color("#FF5733").opacity(0.3)

​
As a style value

Colors are used with style-accepting modifiers like .foregroundStyle(), .background(), and .fill(): 
Text("Hello World")
    .foregroundStyle(Color("red"))

Rectangle()
    .fill(Color("purple"))
    .frame({ width: 100, height: 100 })

VStack([
    Text("Content")
])
.background(Color("blue").opacity(0.1))