Color and border properties in Power Apps

Overview

Configure the style of a control based on how the user interacts with it.

You can specify colors in many ways:

  • Color enumeration: Specify color names from cascading style sheets, as in these examples:

    • Color.Red
    • Color.Indigo
  • ColorValue function: Specify text strings such as color names from cascading style sheets and hex-code notation (#), as in these examples:

    • ColorValue( "AliceBlue" )
    • ColorValue( "#ff00ff" )
  • ColorFade function: Specify how faded a color is, from fully black (-100%) to fully white (100%), as in this example:

    • ColorFade( Color.Red, 50% )
  • RGBA function: Specify the red, green, and blue components of a color from 0 to 255, and specify an alpha channel from 0% (fully transparent) to 100% (fully opaque), as in this example:

    • RGBA( 255, 0, 255, 25% )

Color properties can also reference other color properties. For example, Label.PressedColor may be set to the formula Label1.Color, automatically cascading a change from one property to another.

Normal

These properties are in effect normally, when the user is not interacting with the control.

BorderColor – The color of a control's border.

BorderStyle – Whether a control's border is Solid, Dashed, Dotted, or None.

BorderThickness – The thickness of a control's border.

Color – The color of text in a control.

Drop Shadow - Adds shadow effects around the control.

Fill – The background color of a control.

Focused

These properties are in effect when the control is focused.

FocusedBorderColor – The color of a control's border when it has focus.

FocusedBorderThickness – The thickness of a control's border when it has focus.

Disabled

These properties are in effect when the control is disabled. A control can be disabled if the DisplayMode property is set to Disabled.

DisabledBorderColor – The color of a control's border if the control's DisplayMode property is set to Disabled.

DisabledColor – The color of text in a control if its DisplayMode property is set to Disabled.

DisabledFill – The background color of a control if its DisplayMode property is set to Disabled.

Hover

These properties are in effect when the user hovers over the control with a mouse.

HoverBorderColor – The color of a control's border when the user keeps the mouse pointer on that control.

HoverColor – The color of the text in a control when the user keeps the mouse pointer on it.

HoverFill – The background color of a control when the user keeps the mouse pointer on it.

Pressed

These properties are in effect when a button or image control is pressed.

PressedBorderColor – The color of a control's border when the user taps or clicks that control.

PressedColor – The color of text in a control when the user taps or clicks that control.

PressedFill – The background color of a control when the user taps or clicks that control.

Selection

These properties are in effect when the user selects an item in a control.

SelectionColor – The text color of a selected item or items in a list or the color of the selection tool in a pen control.

SelectionFill – The background color of a selected item or items in a list or a selected area of a pen control.

Order of color

A control can be in multiple states. For example: focused and hovered. Only one color is used, in this order:

  1. Disabled
  2. Pressed
  3. Hover
  4. Focus
  5. Normal