How to get the hex color value from a control in Power Apps

Sometimes, we want to output a color of a control as a hex value in a Power Apps canvas app. Unfortunately, there is no easy built-in function to convert an RGBA value into a hex color value in Power Apps. Still it is doable!

How do hexadecimal colors work?

To understand better what we want to convert our button1.Fill into, let’s first cover how hex colors work. Hex is the abbreviation of hexadecimal, which means Base 16. We humans normally count Base 10, as we have 10 digits - 0-9. To count Base 16, we need to have 6 digits more than 0-9, as as we ran out of digits (10, 11, 12 etc can’t do that job as they are not single digits but already 2-digit numbers), we use a trick and use A, B, C, D, E, F in addition to 0-9.

Hex colors can either br written in 6 digit or 8 digit notation.

• 6 digit notation: a pound symbol/hash # and then 6 digits (2 for the Red (R) value, 2 for the Green (G) value, 2 for the Blue (B) value)
• 8 digit notation: a pound symbol/hash # and then 8 digits (2 for the Red (R) value, 2 for the Green (G) value, 2 for the Blue (B) value, 2 digits for the alpha value that determines the transparency of the color)

If we now set the Fill property of a button1 to RGBA(100,100,100,1, we can use the JSON function to get the 8 digit hex notation:

Set(
gbl_colorAsHex,
JSON(
button1.Fill,
JSONFormat.IgnoreUnsupportedTypes
)
);

This will return "#646464ff". Please note that this value

• is encapsulated by double quotes
• is written in 8 digit notation

As we want 6-digit hex notation, we will use some Regex magic and match this value with #[a-fA-F0-9]{6} which will return #646464.

To unpack what #[a-fA-F0-9]{6} means:

• # means that our string needs to start with a pound symbol #
• [a-fA-F0-9]{6} represents the letters from a-f, A-F, or digit from 0-9 with a length of 6

Code looks like this then:

Set(
gbl_colorAsHex,
Match(
JSON(
button1.Fill,
JSONFormat.IgnoreUnsupportedTypes
),
"#[a-fA-F0-9]{6}"
).FullMatch
);

Now we can use the gbl_colorAsHex variable to color other controls or to output the hex value on a text label

I used this in the Power Apps Color Contrast Checker, the result looks like this:

Feedback and What’s next?

I am curious which use cases you see? Let me know on twitter! If you found this blog post useful, please also subscribe to my newsletter - news coming about every 2 months, I promise to not spam you!

Continue to website...