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
Power Apps Pulse June 2025
🔓 Understanding the “Access app scope” Feature in Canvas App Components (Power Apps)
💡 Introduction In Power Apps Canvas Apps, components play a crucial role in building reusable UI and logic blocks. However, traditionally, co...
Using Form fill Assist Toolbar to streamline data entry in Power Apps
We tried the AI Form Filling Assistance feature in model-driven Power Apps and found it very helpful. One part that we liked the most was the ...
Improving the UI of Canvas Power Apps with AI
Copilot is not (yet) capable of making Canvas Power Apps for us (Yes, I have tested the new Plan designer as well as the current Power Apps co...
What’s new in Power Apps: May 2025 Feature Update
Build 2025 Sessions We had a great set of sessions at Microsoft Build, you can watch the recordings on demand to catch up! AI-powered Developm...
What’s new in Power Apps: May 2025 Feature Update
Build 2025 Sessions We had a great set of sessions at Microsoft Build, you can watch the recordings on demand to catch up! AI-powered Developm...