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.

• Applies to Add picture, Audio, Button, Camera, Card, Check box, Column chart, Date Picker, Display form, Drop down, Edit form, Export, Gallery, HTML text, Image, Import, Label, Line chart, List Box, Microphone, PDF viewer, Pen input, Pie chart, Radio, Rating, Slider, Text input, Timer, Toggle, and Video controls.

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

• Applies to Add picture, Audio, Button, Camera, Card, Check box, Column chart, Date Picker, Display form, Drop down, Edit form, Export, Gallery, HTML text, Image, Import, Label, Line chart, List Box, Microphone, PDF viewer, Pen input, Pie chart, Radio, Rating, Slider, Text input, Timer, Toggle, and Video controls.

BorderThickness – The thickness of a control's border.

• Applies to Add picture, Audio, Button, Camera, Card, Check box, Column chart, Date Picker, Display form, Drop down, Edit form, Export, Gallery, HTML text, Image, Import, Label, Line chart, List Box, Microphone, PDF viewer, Pen input, Pie chart, Radio, Rating, Slider, Text input, Timer, Toggle, and Video controls.

Color – The color of text in a control.

• Applies to Add picture, Button, Check box, Column chart, Date Picker, Drop down, Export, HTML text, Import, Label, Line chart, List Box, Microphone, Pen input, Pie chart, Radio, Text input, and Timer controls.

Drop Shadow - Adds shadow effects around the control.

• Applies to Horizontal container and Vertical container controls.

Fill – The background color of a control.

• Applies to Add picture, Audio, Button, Card, Check box, Date Picker, Display form, Drop down, Edit form, Export, Gallery, HTML text, Icon, Image, Import, Label, List Box, Microphone, PDF viewer, Pen input, Radio, Rating, Screen, Shape, Text input, Timer, Toggle, and Video controls.

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.

• These properties apply to Add picture, Attachments, Audio, Button, Camera, Check box, Combo box, Date Picker, Drop down, Export, Gallery, Icon, Image, Import, Label, List Box, Microphone, Radio, Rating, Shape, Slider, Text input, Timer, Toggle, and Video controls.

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.

• Applies to Add picture, Button, Check box, Column chart, Date Picker, Drop down, Export, HTML text, Image, Import, Label, Line chart, List Box, Microphone, PDF viewer, Pie chart, Radio, Slider, Text input, Timer, and Toggle controls.

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

• Applies to Add picture, Button, Check box, Date Picker, Drop down, Export, Import, Label, List Box, Microphone, Radio, Text input, and Timer controls.

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

• Applies to Add picture, Button, Check box, Date Picker, Drop down, Export, HTML text, Image, Import, Label, List Box, Microphone, Radio, Text input, and Timer controls.

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.

• Applies to Add picture, Button, Check box, Column chart, Drop down, Export, HTML text, Image, Import, Label, Line chart, List Box, Microphone, PDF viewer, Pie chart, Slider, Text input, Timer, and Toggle controls.

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

• Applies to Add picture, Button, Check box, Drop down, Export, Import, Label, List Box, Microphone, Radio, Text input, and Timer controls.

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

• Applies to Add picture, Button, Check box, Drop down, Export, Icon, Image, Import, Label, List Box, Microphone, Radio, Shape, Text input, and Timer controls.

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.

• Applies to Add picture, Button, Check box, Column chart, Drop down, Export, Icon, Image, Import, Label, Line chart, List Box, Microphone, PDF viewer, Pie chart, Shape, Slider, Text input, Timer, and Toggle controls.

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

• Applies to Add picture, Button, Check box, Drop down, Export, Import, Label, List Box, Microphone, Radio, Text input, and Timer controls.

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

• Applies to Add picture, Button, Check box, Drop down, Export, Image, Import, Label, List Box, Microphone, Radio, Text input, and Timer controls.

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.

• Applies to Drop down, List Box, and Pen input controls.

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

• Applies to Drop down and List Box controls.

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