Color literal not displaying as Color Swatch?

Hi, should color literals work inside Views, I am sure this used to work?

Xcode Version 13.0 (13A233)

Note, myColor works, but the same literal in the fill does not.

let myColor = Color(#colorLiteral(red: 0.292, green: 0.081, blue: 0.6, alpha: 255))

struct TestView: View {
  var body: some View {
    RoundedRectangle(cornerRadius: 25)
      .fill(Color(#colorLiteral(red: 0.292, green: 0.081, blue: 0.6, alpha: 255)))
      .frame(width: 100, height: 100)
       
  }
}
Post not yet marked as solved Up vote post of OnionSource Down vote post of OnionSource
14k views

Replies

Your code (with the colorLiteral inside the View) works for me.
Xcode 13.0 (13A233)

Hiya, when you say "works for me" you mean that it's displaying the literals correctly in the IDE (i.e. showing two color literals as in the example "B" below). Just checking ...

You asked:

should color literals work inside Views?

So I:

• Copied your code (above... the text, not the screenshot)
• Pasted it into an app
• Ran the app
• The color literal worked, inside a View

I now think you are asking something else. I think you are asking:

In Xcode, is the code...
Color(#colorLiteral(red: 0.292, green: 0.081, blue: 0.6, alpha: 255)
...replaced with a block of color

If I have understood that correctly, my answer to that is "no".

My question is should the Xcode IDE be displaying a color swatch 🟥 in the View shown, instead of just converting it to text "Color(#colorLiteral(red: 0.292, green: 0.081, blue: 0.6, alpha: 255))"

Hello, I have the same problem. Is this resolved?

I have the same problem. Is this resolved?

Not as of Xcode 13.2 Beta2, color literals display as a swatch in some places, but not others.

What I am seeing is this:

What I would like to see is this:

  • I have the same problem. I searched a lot and couldn't find a solution. Version 13.1 (13A1030d)

  • I have the same issue on Xcode 14.1(14B47b) This workaround helped. Thanks

Add a Comment

i saw this on the stackoverflow comments of a related issue, i tried it and it worked for me... you have to actually type out #colorLiteral() and it will turn it into the color picker that you're expecting...

var color = #colorLiteral() //at this point it will turn this #colorLiteral into a broken image icon, but that's your color picker... and it'll look right after you select a color.
Rectangle().fill(Color(color)) // then just pass in the color you instantiated above
code-block

At the end it should look something like this:

  • I have the same issue on Xcode 14.1(14B47b) This workaround helped. Thanks 

Add a Comment

I want to confirm for anyone else having this "issue" that:

-> as stated and screenshoted above, if you first declare your color as a constant, #colorLiteral() will work with the color picker (works like this in Xcode 13.3)

I can confirm that this issue still not resolved even in the latest Xcode version(13.3.1)

It worked for me, using #colorLiteral() as poste above.

Swift version 5.6.1

Till XCode 12, XCode auto-suggests a property by the name of ColorLiteral. When we tap on it, it uses to turn into a swatch.

But after that, it is removed from the XCode. Now, we need to write "#colorLiteral()" and that will turn into a color swatch. But this #colorLiteral does not work for every property. As it is clear from pictures shared by other people it just turns into a this state: #colorLiteral(red: 0.4842972159, green: 0, blue: 0, alpha: 1)

I've had some success doing this as a workaround:

var myColor = colorLiteral(red: 0.3, blue: 0.2, green: 0.1, alpha: 1.0)

Then, after typing the entire line, I add the # to the beginning to look like this:

var myColor = #colorLiteral(red: 0.3, blue: 0.2, green: 0.1, alpha: 1.0)

which immediately changes to be the color swatch.

  • At last!, sha921, it works I wonder if someone at Apple would care to enlighten us as to why removing the Color Swatch, enhances the iOS developer experience.

Add a Comment

The workaround of writing the entire literal seems to work when assigning the color to a variable or constant, at least in Xcode 15.2 (15C500b). However, be aware that if the # isn't initially omitted from #colorLiteral, you'll be typing blind for a while.

But it doesn't work in all contexts, for example it does not work when trying to use a color literal to set the background color of a view.

struct myView: View {
    var body: some View {
        Text("Hello world!")
                 .background(Color(#colorLiteral(red: 0.3, green: 0.1, blue: 0.2, alpha: 1.0)))  // shows as text
    }
}

An additional workaround is to first assign the color to a constant, then use that constant.

struct anotherView: View {
    let bgColor = Color(#colorLiteral(red: 0.3, green: 0.1, blue: 0.2, alpha: 1.0))  // shows as a color swatch

    var body: some View {
        Text("Hello world!")
                 .background(bgColor)
    }
}