Power Apps Tip: Get Color Hex Code from a Color Value in Canvas App

The Problem 

I recently created a blog post where I detailed how to build a Donut Chart component.  In that blog, I noted that I couldn’t use the Color data type because there was no way to get the Color Hex code which I needed for my SVG code. 

The Solution 

After some playing around, I discovered a “hack” today that allows me to convert a color value to color hex code (e.g. #3860b2ff) 

Demo of how to convert color to hex color

The solution relies on three functions:  JSON(), Char() and Substitute(). 

Code example
Three functions needed to convert Color to Color Hex code

First, the JSON() function “converts” the color value (in this example, returned by the button’s Fill property).  JSON() returns the color hex code including the Red, Green, Blue and Alpha values wrapped in quotes (i.e. “#8dc63fff”)

Next, I use the Substitute() function to remove the quotes using Char() to convert the ASCII code for a quote (i.e. 34). 

Here’s the code:

Set(
    glbColorHex,
    Substitute(
        JSON(
            Button1.Fill,
            JSONFormat.IgnoreUnsupportedTypes
        ),
        Char(34),
        ""
    )
)

Note, the JSON function only works in a behavior property (e.g. OnSelect).

5 thoughts on “Power Apps Tip: Get Color Hex Code from a Color Value in Canvas App

Leave a Reply

Your email address will not be published. Required fields are marked *