Loading...

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

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:

Power Apps button showing hex color value of the button itself

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 more
Luise Freese: Consultant & MVP
Luise Freese: Consultant & MVP

Recent content on Luise Freese: Consultant & MVP

Share post:

Related posts

🔓 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...

1 day ago

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 ...

8 days ago

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...

17 days ago

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...

24 days ago

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...

24 days ago
Stay up to date with latest Microsoft Dynamics 365 and Power Platform news!
* Yes, I agree to the privacy policy