Using Advanced Colors

Use advanced colors to optimize your style profile by configuring colors for items such as text styles, sliders, uploaders, tooltips, buttons, menus, charts, and more.

See the following resources for more information:

See How To: Create a Basic Style Profile for an example of creating a basic style profile.
See How To: Create an Advanced Style Profile for an example of configuring advanced colors on your form.

When you click the Advanced link on the canvas, you see a list of advanced colors that are automatically generated based on the main colors. When you change any of the three main colors, the advanced colors are automatically regenerated to support and blend with the new color palette.

Advanced colors are grouped to support the related main color. For example, the Calendar Background Color is white to be clearly visible when you open the Calendar on a view that has a gray background. Similarly, the rest of the Calendar group colors blend with the group and main colors. When you change an advanced color in a group, the related group colors automatically regenerate. For example if you change the Button Background Color, the Button Border Color and Button Text Color automatically change to blend with the rest of the color palette to ensure the style looks natural. The generated color depends on the layout of your form, for example where the view or control is on the screen, or whether a control is on a view, form or dialog.

Configure an advanced color

If you want more control over your colors, you can configure the advanced colors to override the automatically generated color. Click the color you want to change, then select a color from the color wheel by clicking and dragging your cursor inside the picker area to highlight a color. You can also change the brightness and transparency of the color, or type a named web color such as red, white, or yellow, or type a HEX, HEX8, RGB, RGBA, HSL, or HSLA value in the field below the color wheel to specify a particular color.

When you change a color, an edit icon shows the color as edited. All colors that are changed are listed in the Changed section, allowing you to easily see the updated colors. Edited colors are also shown in the All section with the related group colors.

You can reset a specific color by clicking Reset next to the color, or you can reset all the colors that you changed by clicking Reset All. When you reset, the color and related group colors are automatically regenerated based on the three main colors.

To search for a specific color item or group, type a letter or word to refine the search. Click the X to clear the search.

If you override an advanced color by selecting a new color, and then change one of the main colors, the color you've overridden will not automatically regenerate because you have configured a specific color. Only colors that are not specifically configured will change automatically. For more information about considerations and best practices when working with advanced colors, see Style Profile Considerations and Best Practices.

Advanced Color Groups

Use the table below to explore the different advanced color groups and which areas each group affects.

You can sort the table contents by clicking any of the column headings.

Advanced color group ▼	What is affected by this group?	Example	What happens with the automatic generation?
Buttons	All styles of the Button control: Normal Main action Quiet action Destructive action	Click to enlarge	The Main action uses the color of the Main Accent Color. The rest of the colors are automatically generated based on the three main colors.
Calendar	Calendar control (Date, Time, and DateTime) Affects the week, month, and year layout for a date-based user interface Calendar control popup content (note that the popup container is controlled by Menus)	Click to enlarge	Uses the Main Accent Color for key highlights, and aims to fit in well with the Form Background Color.
Charts	Any chart or graph with series, axis, and legends, for example Reporting control charts	Click to enlarge
Check box controls	Check box control Check box list control	Click to enlarge
Dialog	All dialogs such as Picker control search dialog	Click to enlarge
Error	All errors including validation of controls	Click to enlarge
Form	Content area of a SmartForm. This is usually the white area where controls and views appear The color of the selected tab when your form has tabs The color of controls within the form Dialogs and popups	Click to enlarge	If you set your form to a dark color, the controls inside the form will make themselves lighter to be legible on a dark background (unless you override the colors for those controls using the other advanced colors). Dialogs and popups will automatically fit with this background color (unless Dialog Background Color, or Popup Background Color is changed), to keep your dark theme looking consistent, or light theme feeling clean.
Help Buttons	The "i" buttons often found at the bottom of dialogs	Click to enlarge
Hyperlinks	Hyperlinks found within other controls, or as separate controls, for example: Hyperlink control Hyperlink in a control such as Rich Text control or Data Label control Report Header control SharePoint Hyperlink control	Click to enlarge
Input buttons	The buttons that appear within the input, typically at the end. For example: The arrow in a Drop-Down List control The ellipsis in a Picker control The search spyglass in a search bar such as used for the Worklist control The Worklist control buttons found at the top right (quick buttons for Out-of-Office and Multi-select). The Toggle On colors refer to buttons that are switched on by clicking, and switched off by clicking again	Click to enlarge
Inputs	Any single or multiline inputs which is typically a white input control with grey border, for example: Text box, text area, and rich text Calendar Autocomplete Drop-down Lookup Picker Any of the above found in a List view, Editable List view, or search and filter toolbars	Click to enlarge	Will fit in and be legible on the form, view, dialog, or list item these inputs are placed within.
Lists	Any list or grid control such as tile lists, table lists, and list boxes. It can be single or multi-select. Examples are: List views Grid controls (Reporting controls) Worklist control List Box control Multi-Select control Specific applications: The List Border Color does not apply to List views. The List Border color is by default the same color as the Input Border Color. The List Action Button colors apply to the More and Add new item buttons at the bottom of list items. The List Summary colors apply to aggregates in a List view.	Click to enlarge	Controls within in a list item such as List view or Editable List view will change color to remain legible when you hover over or select a list item. In most cases, if you configure an advanced color, that color will apply. The exception is when you select a list item, a control within the list item will disregard its configured advanced color. For example if Button Background Color = hotpink, and you select a list item with a button within the list item, the button will not be hotpink. However, the button will be hotpink for all other states of the list item.
Loaders	Progress or spinner loading indicators such as loading the following controls: File Attachment control Image Attachment control	Click to enlarge
Main tab	Form tabs. This is the selected tab on the form and by default matches the color of your form	Click to enlarge
Menus	Any popup or context menu that is a single select list, for example: Drop-down popup Worklist item context menu popup (visible when you share or sleep a worklist item) Autocomplete Calendar control popup	Click to enlarge
Page	The outermost background color on a form. Note that this does not affect standalone views	Click to enlarge	Based on the Form Background Color, this color will contrast subtly with the form color you have chosen, for a professional look.
Panel	Only affects the Report Header control	Click to enlarge
Pills	In an input, these are the resolved items you type in. For example typing in a set of users into a "to" field, and seeing them resolve to users within the input. These pills are used in: Worklist control Out-of-Office dialog. This is where you add multiple users to your Out of Office and they show in an added user's box as pills before clicking OK in the dialog	Click to enlarge
Radio button controls	Radio button control Radio button list control	Click to enlarge
Rating control	Rating control	Click to enlarge
Required indicator	Required indicators such as in the List view filter dialog	Click to enlarge
Search	Search dialogs such as Out of Office configuration dialog	Click to enlarge
Segmented tab	The Design and HTML tabs at the bottom of the Rich Text control.	Click to enlarge
Sliders	Any slider user interface within controls, for example: Separate controls that act as a slider Slider control	Click to enlarge
SmartFields	List view filter dialogs - When you drag in a SmartField from the context browser into an advanced filter	Click to enlarge
Tabs	Tabs in dialogs Unselected form tabs	Click to enlarge
Text Styles	Any headings or labels within controls, for example h1 tag in a Rich Text control Separate controls that act as headings or labels, such as: Label control Data Label control Radio Button control and Radio Button List control (the label) Check Box control and Check Box List control (the label) Choice control (the label) List Display control	Click to enlarge	A little bit of your Main Accent Color is mixed in to make these headings fit in with your style profile by default.
ToolBar Button icon	ToolBar Button control	Click to enlarge
Toolbar	List view filter or search toolbar Rich-text Bold/Italic toolbar Worklist multi-select or search toolbar	Click to enlarge	Input background colors in a toolbar are ignored to soften the look of the toolbar.
Tooltips	Validation and info tooltips on input controls Slider value tooltip (appears above slider thumb as you drag it) Chart tooltips	Click to enlarge
Tree items	Any expand or collapse tree user interface, for example: Tree control List View filter dialog Context browser tree	Click to enlarge
Uploaders	Any user interface that allows dropping of a file for upload, or dropping of other content, either within a control, or as a dedicated control, for example: File Attachment control Image Attachment control	Click to enlarge
View	Only affects view instances on a form, for example the header, header expand and collapse button, and the surrounding background of the view content which makes it feel like a block or panel on top of the form. The Toggle On colors refer to buttons that are switched on by clicking, and switched off by clicking again	Click to enlarge