How to create a color with an alpha value using SwiftUI?

Question

In UIKit to create a color with an alpha value there are different ways, for example:

UIColor(red: 0, green: 0, blue: 0, alpha: 0.8)

but this method is not available on the corresponding class Color of SwiftUI.

What can I use?

score 78 · Answer 1 · answered Jun 30 '19 at 05:15

78

In SwiftUI there is one specific modifier called opacity that can be use to change the alpha level of any colors

Text("Hello world").background(Color.black.opacity(0.8)) // Set the background color as partially transparent.

Additionally the same modifier can be applied to any view, to change its alpha.

Image("myImage").opacity(0.8) //The image will be partially transparent

answered Jun 30 '19 at 05:15

IgnazioC

4,554
4
33
46

2

A small contribution to your answer: ```.opacity()```changes the opacity of any view. It just so happens that Color ***is*** a view. However, it is not needed to create a color with opacity, since it has its own parameter in the initialiser (check my answer for that). – kontiki Jun 30 '19 at 10:35
1

Also: To be precise: Text("").background(Color.black.opacity(0.8)) does not "set the color to the background". What it is actually doing, is putting a view behind the text, that it just so happens to be one that paints a specific color. However, you could specify any view. For Example, try: Text("2222").background(Text("1111")) – kontiki Jun 30 '19 at 10:42

score 24 · Answer 2 · answered Jun 30 '19 at 10:29

24

The color initializer has an opacity parameter:

Color(red: 1.0, green: 0, blue: 1.0, opacity: 0.2)

answered Jun 30 '19 at 10:29

kontiki

37,663
13
111
125

4

This is the only answer that will change the opacity of a color and still have it remain a `Color` type. By adding `.opacity` modifier to a Color, it will return a `View` and not a `Color`. For example, you can't use, `.foregroundColor(Color.black.opacity(0.8))` because you just changed the Color to a View. – Mark Moeykens Mar 10 '20 at 22:11
Actually there is a ```.opacity``` modifier that returns a ```Color``` instead of a ```View```, I assume it has been added recently. See [my answer](https://stackoverflow.com/a/69451355/9439097) or [Apple](https://developer.apple.com/documentation/swiftui/color/opacity(_:)) – charelf Oct 05 '21 at 14:24

score 12 · Answer 3 · answered Nov 12 '19 at 12:22

12

Apply the opacity modifier to any SwiftUI View like:

RoundedRectangle(cornerRadius: 5)
    .fill(Color.yellow)
    .frame(width: 50, height: 50)
    .opacity(0.5)

answered Nov 12 '19 at 12:22

Marcos Reboucas

3,409
1
29
35

3

This works, but doesn't answer OP's question on how to create a color. The opacity modifier is for a View – Juan Carlos Méndez Nov 05 '20 at 18:49

score 9 · Answer 4 · answered Nov 05 '20 at 19:03

Several answers here point to .opacity() method of View. That covers the most common use cases, but perhaps what the OP wants to know is how to create a Color with transparency.

One is to use Color constructor that has the color space, components and opacity, as in the first example below.

If you already have a Color and want a translucent version of it, use the bridges to UIColor like the second example below

let transparentTeal = Color(.sRGB, red: 0.4, green: 1, blue: 0.1, opacity: 0.2)

let red = Color.red

let transparentRed = Color(UIColor(red).withAlphaComponent(0.3))

score 8 · Answer 5 · answered Oct 05 '21 at 13:26

8

It seems that now it is possible to use the .opacity method and still return a Color instead of a View:

Documentation:

func opacity(_ opacity: Double) -> Color

Example:

color.opacity(0.5)

answered Oct 05 '21 at 13:26

charelf

3,103
4
29
51

How to create a color with an alpha value using SwiftUI?

5 Answers5

Documentation:

Example:

Linked