We will learn & understand the ColorValue, RGBA & ColorFade functions in Power Apps. Before we start, make sure to subscribe to CRM Crate so that you can stay up to date in the field of Power Platform.
What is Power FX?
Microsoft’s Power Fx is the low-code language that will be used across Power Platform. It’s a strong-typed, general-purpose, declarative, and functional programming language. Power Fx is expressed in user-friendly text. It’s a low-code language that citizen developers & makers can work with directly in an Excel-like formula bar or Visual Studio Code text window.
It enables a complete range of development from no-code for those who have never programmed before to “pro-code” for the seasoned professional, with no learning or rewriting cliffs in between, enabling diverse teams to collaborate and save time and expense.
Understanding ColorValue function
ColorValue( CSSColor )
The ColorValue Power FX function returns a color based on a color string in a CSS. The string can take any of these forms:
– CSS color name: “RoxyBrown” and “OliveDrab” are examples. These names don’t include spaces. The list of supported colors appears later in this topic.
– 6-digit hex value: As an example “#ffd700” is the same as “Gold”. The string is in the format “#rrggbb” where rr is the red portion in two hexadecimal digits, gg is the green, and bb is the blue.
– 8-digit hex value: As an example, “#ff7f5080” is the same as “Coral” with a 50% alpha channel. The string is in the format “#rrggbbaa” where rr, gg, and bb are identical to the 6-digit form. The alpha channel is represented by aa: 00 represents fully transparent, and ff represents fully opaque.
ColorValue( “aliceblue” )
This function produces the color output equivalent to RGBA( 240, 248, 255, 1 ) or Hex ‘#f0f8ff’ as shown below.
Understanding RGBA function
RGBA( Red, Green, Blue, Alpha )
The RGBA Power FX function returns a color based on red, green, and blue components. The function also includes an alpha channel for mixing colors of controls that are layered in front of one another. An alpha channel varies from 0 or 0% (which is fully transparent and invisible) to 1 or 100% (which is fully opaque and completely blocks out any layers behind a control).
– Red, Green, Blue – Required. Color-component values, which range from 0 (no saturation) to 255 (full saturation).
– Alpha – Required. Alpha component, which ranges from 0 (fully transparent) to 1 (fully opaque). You can also use a percentage, 0% to 100%.
RGBA( 250, 235, 215, 1 )
This function produces the color output equivalent to Hex ‘#faebd7‘.
Understanding ColorFade function
ColorFade( Color, FadeAmount )
The ColorFade function returns a brighter or darker version of a color. The amount of fade varies from -1 (which fully darkens a color to black) to 0 (which doesn’t affect the color) to 1 (which fully brightens a color to white).
– Color – Required. A color value such as Color.Red or the output from ColorValue or RGBA.
– FadeAmount – Required. A number between -1 and 1. -1 fully darkens a color to black, 0 doesn’t affect the color, and 1 fully brightens a color to white. You can also use a percentage from -100% to 100%.
Validating our implementation in Canvas Apps
The below animations display an output of ColorValue, RGBA and ColorFade Power FX functions in Canvas App.
