3D Image representing a kind of crystal, making think of colors with hex colors.

How create hex colors in Xamarin.Forms in XAML ?

I was shocked, how long it took me to succeed in finding how to use the alpha layer in hexadecimal colors or hex colors 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 color 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" />    <!-- #RRGGBB -->
<Label Text="Alpha plus RGB" BackgroundColor="#00CC00FF" />    <!-- #AARRGGBB -->
<Label Text="Tiny RGB" BackgroundColor="#CF0" /> <!-- #RGB -->
<Label Text="Tiny Alpha plus RGB" BackgroundColor="#0CF0" /> <!-- #ARGB -->

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! It is surprising sometimes how hex colors can have different formats depending of the language.

If you want to support me, you can always buy me a coffee.

Enjoy ✨


Leave a Reply

Your email address will not be published. Required fields are marked *

This form supports markdown. Read guide »

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.