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

### Series: Build Power Apps that don't look like Power Apps - Material Design part 2

For real, your low code apps don’t need to look like as if …

### Series: Build Power Apps that don't look like Power Apps - Material Design part 1

One of my most important goals when developing Power Apps is good …

### Get started with planning your Power Apps components properly

Power Apps components are awesome, still I do not see too many …