I was shocked, how long it took me to succeed in finding how to use the alpha layer in hexadecimal colours in XAML. Well, turns out it is really simple.
Here is the official doc of Xamarin.Forms explaining how to use the hex colours in XAML.
<Label Text="Sea color" BackgroundColor="Aqua" />
<Label Text="RGB" BackgroundColor="#00FF00" />
<Label Text="Alpha plus RGB" BackgroundColor="#CC00FF00" />
<Label Text="Tiny RGB" BackgroundColor="#0F0" />
<Label Text="Tiny Alpha plus RGB" BackgroundColor="#C0F0" />
Pretty clear right? In fact, not at all. I come from the web world, so for me, when I use an alpha layer in a hex colour it looks like this :
#RRGGBBAA // Where RR = red, GG = green, BB = blue and AA = alpha
The alpha layer is at the end of the hex. Note : the value of alpha is between 00 and 99. Turns out, the alpha layer in XAML is at the beginning. Here is the official doc, but with comments.
<Label Text="Sea color" BackgroundColor="Aqua" />
<Label Text="RGB" BackgroundColor="#CC00FF" />
<Label Text="Alpha plus RGB" BackgroundColor="#00CC00FF" />
<Label Text="Tiny RGB" BackgroundColor="#CF0" />
<Label Text="Tiny Alpha plus RGB" BackgroundColor="#0CF0" />
There is also another form of hex colours; scRGB formatted number. The format is sc#scA,scR,scG,scB where each value is between 0.0 to 1.0. I personally never tested it, but I wanted to share it with you all!
Thank you for reading! I hope you like it. If you have questions or if I said something wrong, don't hesitate to tell me in the comments!
Enjoy ✨
Sources
- #210 – Specifying Colors in XAML As RGB Values - By Sean Sexton
- Colors in Xamarin.Forms