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!
You May Also Like
How to upload files to SharePoint for Dataverse integration in a Power Apps canvas appp
Use Case Recently, someone asked me if it was possible to utilize the …
How to build a deskbooking tool with Microsoft Planner and Power Automate
Use Case Recently, a customer asked if it was possible to low code …
How to organize your homeoffice with NFC tags and Apple
tl;dr With NFC tags and an iPhone you can quickly build a nice system …