{"id":829,"date":"2025-03-08T08:17:00","date_gmt":"2025-03-08T08:17:00","guid":{"rendered":"https:\/\/pensplace.co.uk\/?p=829"},"modified":"2025-05-08T02:41:15","modified_gmt":"2025-05-08T02:41:15","slug":"get-the-hex-color-code-from-an-rgba-value-in-power-apps","status":"publish","type":"post","link":"https:\/\/pensplace.co.uk\/index.php\/2025\/03\/08\/get-the-hex-color-code-from-an-rgba-value-in-power-apps\/","title":{"rendered":"Get the HEX color code from an RGBA() value in Power Apps"},"content":{"rendered":"<div id=\"bsf_rt_marker\"><\/div>\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>In this post I show how to convert a Power Apps Color value to a HEX color value\/<\/p>\n<\/blockquote>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/img.shields.io\/static\/v1?logoColor=white&amp;style=for-the-badge&amp;label=Power%20Apps&amp;message=Level%20100&amp;color=742774&amp;logo=powerapps\" alt=\"\"\/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>In Power Apps the color values are an RGB value and once set you cant get the color value, if you use the Creator Kit the colors require a web HEX code, therefore you cannot use the RGBA color value.<\/p>\n\n\n\n<p>We can convert RGBA colors to HEX by using the <code class=\"\" data-line=\"\">JSON()<\/code> function, however you cannot use it directly on the value, first you must set a context or Global variable to the color and then we can use the <code class=\"\" data-line=\"\">JSON()<\/code> function.<\/p>\n\n\n\n<p>In the following example I have added a button to a page and set the <code class=\"\" data-line=\"\">OnSelect<\/code> to:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-powerquery\" data-line=\"\">Set(color, RGBA(24,114,114,1));\n\nSet(HEXColor, JSON(color));<\/code><\/pre>\n\n\n\n<p>And add a text control with the text value to <code class=\"\" data-line=\"\">HEXColor<\/code>.<\/p>\n\n\n\n<p>Now if we view the variable <code class=\"\" data-line=\"\">HEXColor<\/code> we will get the value <code class=\"\" data-line=\"\">&quot;#187272ff&quot;<\/code><\/p>\n\n\n\n<p>We now use the <code class=\"\" data-line=\"\">MID()<\/code> function to get 6 or 8 character HEX codes.<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-powerquery\" data-line=\"\">Mid(HEXColor,2,7);\n# gives #187272\n\nMid(HEXColor,2,9);\n# gives #187272ff\n<\/code><\/pre>\n\n\n\n<p>Hope you find this useful&#8230;<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>You can also use this method to convert the Modern Theme Colors to HEX.<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-powerquery\" data-line=\"\">With({\n    ctxThemePrimary: JSON(App.Theme.Colors.Primary)\n    },\n    Mid(ctxThemePrimary,2,7)\n)\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>In this post I show how to convert a Power Apps Color value to a HEX color value\/&hellip;<\/p>\n","protected":false},"author":1,"featured_media":830,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_import_markdown_pro_load_document_selector":0,"_import_markdown_pro_submit_text_textarea":"","footnotes":""},"categories":[31],"tags":[],"class_list":["post-829","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-power-apps"],"featured_image_src":"https:\/\/pensplace.co.uk\/wp-content\/uploads\/2025\/05\/hexcolor.png","author_info":{"display_name":"Pen","author_link":"https:\/\/pensplace.co.uk\/index.php\/author\/pen\/"},"_links":{"self":[{"href":"https:\/\/pensplace.co.uk\/index.php\/wp-json\/wp\/v2\/posts\/829","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pensplace.co.uk\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pensplace.co.uk\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pensplace.co.uk\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pensplace.co.uk\/index.php\/wp-json\/wp\/v2\/comments?post=829"}],"version-history":[{"count":5,"href":"https:\/\/pensplace.co.uk\/index.php\/wp-json\/wp\/v2\/posts\/829\/revisions"}],"predecessor-version":[{"id":861,"href":"https:\/\/pensplace.co.uk\/index.php\/wp-json\/wp\/v2\/posts\/829\/revisions\/861"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pensplace.co.uk\/index.php\/wp-json\/wp\/v2\/media\/830"}],"wp:attachment":[{"href":"https:\/\/pensplace.co.uk\/index.php\/wp-json\/wp\/v2\/media?parent=829"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pensplace.co.uk\/index.php\/wp-json\/wp\/v2\/categories?post=829"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pensplace.co.uk\/index.php\/wp-json\/wp\/v2\/tags?post=829"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}