Skip to main content
Color(props?: ColorProps): Color;

​
Parameters

​
props
ColorProps
Color specification. Can be created in multiple ways:
  • RGB objects: { r: number; g?: number; b?: number; a?: number } or { red?: number; green?: number; blue?: number; alpha?: number }
  • HSB objects: { h: number; s?: number; b?: number; a?: number } or { hue?: number; saturation?: number; brightness?: number; alpha?: number }
  • Named colors: String literals like “red”, “blue”, “green”, etc.
  • Semantic colors: String literals like “primary”, “secondary”, “accent”, etc.
  • Hex strings: Format like “#FF5500”
  • Numeric ARGB: Number values interpreted as ARGB integers

​
Support

​
Methods

​
opacity()

Returns a new color with the specified opacity level. 
opacity(value: number): Color
​
value
number
Opacity value between 0 (fully transparent) and 1 (fully opaque).

​
Usage

​
Named colors

ComposeJS supports a full range of standard color names: 
Color("red")
Color("blue")
Color("green")
Color("orange")
Color("yellow")
Color("mint")
Color("teal")
Color("cyan")
Color("indigo")
Color("purple")
Color("pink")
Color("brown")
Color("black")
Color("white")
Color("gray")
Color("clear")
Available named colors: clear, red, orange, yellow, green, mint, teal, cyan, blue, indigo, purple, pink, brown, black, white, gray

​
Semantic colors

Use semantic colors to automatically adapt to the current theme: 
Color("primary")
Color("secondary")
Color("tertiary")
Color("quaternary")
Color("accent")
Color("background")
Available semantic colors: primary, secondary, tertiary, quaternary, accent, background

​
Hex colors

Create colors using hexadecimal color codes: 
Color("#FF5733")
Color("#00AAFF")
Color("#8B4513")

​
RGB colors

Create colors using RGB values (0-255 for each channel): 
// Short form
Color({ r: 255, g: 87, b: 51 })
Color({ r: 255, g: 87, b: 51, a: 0.5 })

// Verbose form
Color({ red: 255, green: 87, blue: 51 })
Color({ red: 255, green: 87, blue: 51, alpha: 0.5 })

​
HSB colors

Create colors using Hue, Saturation, and Brightness values: 
// Short form
// h: 0-360 degrees, s: 0-1, b: 0-1
Color({ h: 210, s: 0.8, b: 0.9 })
Color({ h: 210, s: 0.8, b: 0.9, a: 0.5 })

// Verbose form
Color({ hue: 210, saturation: 0.8, brightness: 0.9 })
Color({ hue: 210, saturation: 0.8, brightness: 0.9, alpha: 0.5 })

​
Numeric ARGB colors

Create colors using 32-bit ARGB integer values: 
Color(0xFFFF5733)  // Red-orange color
Color(0x8000AAFF)  // Semi-transparent blue

​
Color with opacity

Adjust the opacity of any color using the .opacity() method: 
Color("blue").opacity(0.5)
Color("#FF5733").opacity(0.3)
Color({ r: 255, g: 87, b: 51 }).opacity(0.7)

​
Using as fill

Apply colors to shapes and views: 
Rectangle()
    .fill(Color("purple"))
    .frame({ width: 100, height: 100 })

Circle()
    .fill(Color("#00AAFF").opacity(0.6))
    .frame({ width: 50, height: 50 })

​
Using with foregroundStyle

Style text and other content: 
Text("Hello World")
    .foregroundStyle(Color("red"))

Text("Styled text")
    .foregroundStyle(Color({ h: 210, s: 0.8, b: 0.9 }))