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!
Published on:
Learn moreRelated posts
Forms or Controls? That is the question in Power Apps
I get often asked, should I use Forms or Controls in Power Apps for data entry. This question can be answered either way. But do you know why ...
Power Apps – Create offline profiles in the maker studio for Canvas apps
We are announcing the ability to create offline profiles in the maker studio for Canvas apps in Power Apps. This feature will reach general av...
Power Apps – Manage your source code for canvas apps
We are announcing the ability to manage your source code for canvas apps in Power Apps. This feature will reach general availability on Septem...
August 2025 Power Apps Pulse
Power Apps – Header and navigation refresh
We are announcing a refresh to the header and navigation of model-driven apps in Power Apps. This feature will reach general availability on O...
Power Apps – Fill forms faster with smart paste
We are announcing the ability to fill forms faster with smart paste in Power Apps. This feature will reach general availability on October 1, ...
Power Apps – Visualize the data in your view easily with Copilot
We are announcing the ability to visualize data as a chart generated by Copilot in Power Apps. This feature will reach general availability on...
Power Apps’ User defined functions GA
User defined functions in Power Apps' Canvas apps have reached general availability (GA)! Use them to modularize your logic making apps easier...