The SharePoint Color Palette Tool Demystified

The SharePoint Color Palette Tool is a free tool created by Microsoft that allows you to create a Composed Look for SharePoint 2013 and SharePoint Online. I don’t know much about the history of the tool, but I have a suspicion it was created for internal use and later released to the public. It’s basically a bare bones tool with no fancy branding - heck the program doesn’t even have a proper desktop icon - it’s just a light weight tool with a specific purpose. 

I decided to write this article because although there are other blog posts on how to use the tool, none of them go into detail on the available color slots and exactly what they control. To make matters worse, the preview you see in the tool is often incomplete or incorrect.

Below are the color slots with a description of what they control and a screenshot to show exactly what user interface element they are changing. They are listed in the same order as the .spcolor file that gets created from the Color Palette Tool. I found it a lot easier to work in the .spcolor file directly within SharePoint Designer and to just use the Color Palette Tool when I wanted to see what a color slot controlled in the UI. Working from the .spcolor file saves you the time of having to save the file from the Color Palette Tool and manually uploading it to SharePoint after every change.

With that out of the way, on to the color slots! 


BodyText

Normal body text. The BodyText slot (unsurprisingly) controls the color of the body text. It also controls the text within List’s and Document Libraries.

SubtleBodyText

Body text that must be lighter than normal such as metadata text. A good example of where SubtleBodyText is used is within List Column Names and default ‘helper’ text created by SharePoint. An example of ‘helper’ text would be “Enter name here” or “Drag files here.”

StrongBodyText

Body text color for text that must stand out from normal body text. For the longest time I was unable to find was this slot actually controlled. I struggled to find anything it was changing, I tried adding strong tags to body content, looked for it within Web Parts, and so on. It wasn’t until I gave up looking that I stumbled across it. The example below shows where it was being used in the “Changing the look” UI within Site Settings.

DisabledText

Disabled text. For example, unavailable items in menus or text input boxes. Disabled Text is most commonly used in Input Boxes where you are unable to add information. It can also be used to display an item that is dependent on a parent item that has yet to be selected or used.

SiteTitle

The text color of the page title. As of right now, I have only been able to change the SiteTitle when using the Seattle Master Page. The Oslo Master Page does not use this color slot to control the Site Title.

WebPartHeading

Text color for Web Part headings. WebPartHeading controls all Web Part Headers, the Page Title in Oslo Master Page, and the header is Site Settings.

ErrorText

The main error color that is used for error text, borders, and backgrounds, as needed.

AccentText

Text color for accented body text. So far I have only been able to find AccentText changing the color of Icons used by the default Documents Web Part that is added to a Team Site. It didn’t change the color of the other icons on the page…

SearchURL

Text color for the URL found in search results. Also used to highlight new items or successful status notifications.

Hyperlink

Text color for hyperlinks. Hyperlinks controls the colors of Hyperlinks – so that includes all of the Site Settings links an all other Text links within SharePoint.

HyperlinkFollowed

Text color for followed hyperlinks. I didn’t include a screenshot for this control. This changes the color of hyperlinks that were clicked.

HyperlinkActive

Hyperlink color when pressed. I didn’t include a screenshot for this control. This controls the color of a hyperlink you are currently viewing.

CommandLinks

Large command links that must be a bit lighter than body text because of their size. CommandLinks control the links to options like “Remove this” or “Edit Links” and the Ellipses on List items.

CommandLinksSecondary

Command link color for links that are smaller, and therefore have a stronger color to stand out. I am currently hunting down an example screenshot for this control.

CommandLinksHover

Command link color on hover. I am currently hunting down an example screenshot for this control.

CommandLinksPressed

Command link color when pressed. I am currently hunting down an example screenshot for this control.

CommandLinksDisabled

Command link color when command link is disabled. I am currently hunting down an example screenshot for this control.

BackgroundOverlay

The main background color that is visible between the optional background image and the page content. Using a background overlay will change the color of a background image (if you are using one) or it will set a background color. If you are using the Oslo Master Page BackgroundOverlay will only change the color of the main body of the page. If you are using the Seattle Master Page it will change the background of the page. That being said, it is transparent – it is an overlay.

Oslo:
Seattle:
DisabledBackground

Background for disabled elements such as browser controls, for example, input box or select box (except buttons). Here is an example of DisabledBackground in use:

PageBackground

The background color of the page. Appears behind the optional background image. PageBackground will cover the entire background except for the nav area (Seattle) and except for the Nav and Body area (Oslo)

HeaderBackground

The background color for the header area of the page. The Site Logo, Site Title, and nav are all within the header of the page. Oslo seems to be the only Master Page affected by this color slot.

FooterBackground

The background color for the footer area of the page. I have been unsuccessful in getting this color slot to make a change to my page. I have tried adding footers into the Page Layouts and nothing happens. I am currently hunting down an example screenshot for this control.

SelectionBackground

The background color for selected list items and drop-down menu items. This is might be easy to confuse with HoverBackground, the essentially do the same thing but, as the name implies, this only appears once an item has been selected.

HoverBackground

The background color for list items and drop-down menu items on hover. This basically adds color to anything you hover over, list items, menu items, and so on.

RowAccent

The accented left border on selected list items. (The little colored box on the left side of list items.)

StrongLines

Borders for browser controls on hover. I’ve only been able to get StrongLines to appear when Hovering over Text Input boxes.

Lines

Borders for browser controls. Lines is used to control the default lines that appear around input boxes.

SubtleLines

Subtle border color. For example, gridlines for inline editing.

DisabledLines

Border color for disabled browser controls such as input boxes and select boxes.

AccentLines

Focused border color for selected browser controls. I found that AccentLines only appear in input boxes once you type in them or when you have selected an option. The Red Lines in the screenshot are appearing because I have selected the "Current" color scheme. The red lines also appear around the text box because I typed in it.

DialogBorder

Dialog box border color. An example of DialogBorder is borders of navigation drop down items.

Navigation

Text color for horizontal and vertical navigation items. Text color of global navigation and quick launch text. I was only able to get this to function using the Seattle Master Page.

NavigationAccent

Text color for a selected horizontal navigation item. Color of the active/displayed item selected from the Navigation.

NavigationHover

Navigation text color on hover. Applies to top navigation, and to Quick Launch in horizontal mode. Color of the Global Navigation text on hover.

NavigationPressed

Text color of navigation item when pressed. Applies to top navigation, and to Quick Launch in horizontal mode. Color of the Global Navigation text on click.

NavigationHoverBackground

Background color of Quick Launch items in vertical mode on hover over the navigation item.

NavigationSelectedBackground

Background color of Quick Launch items in vertical mode after the navigation item is selected.

EmphasisText

The text color that appears on top of emphasis background items (Buttons within Dialogs/Pop-Ups). Only used in Initial Button and Hover text.

EmphasisBackground

The accented background color that appears directly behind emphasis text. So far can only see it changing the background color of the Site Logo, and Tile backgrounds, also buttons located within Pop-up Dialogs.

EmphasisHoverBackground

Background color on hover, for elements that are using emphasis background. Used when hovering/mouse over in background color of the Site Logo, and Tile Backgrounds, also buttons located within Pop-up Dialogs.

EmphasisBorder

Border color for elements that are using emphasis background. Border for buttons using Emphasis BG in Dialogs/Pop-ups.

EmphasisHoverBorder

Border color on hover for elements that are using emphasis background. Hover Border for buttons using Emphasis BG in Dialogs/Pop-ups (while mouse over/hovered).

SubtleEmphasisText

Text that appears on top of subtle emphasis background.

SubtleEmphasisCommandLinks

Command link color for links that appear on top of subtle emphasis background. These are located usually in Dialogs and Pop ups and are usually used in footers as links. I am currently hunting down an example screenshot for this control.

SubtleEmphasisBackground

Background that appears directly behind subtle emphasis text. Subtle Backgrounds are commonly footers in Dialogs and Pop-ups - by default they are usually a light color. Also used in ‘Attract’ areas (like boxes that say “Drag files here” or “Drop an image here".

TopBarText

Text and glyph color for the welcome menu, quick access toolbar icons, and closed ribbon tabs. Username, browse, page, share, follow, sync and edit.

TopBarBackground

The background color for the top bar, which is seen below and to the right of the suite navigation (the green color bar in screenshot below).

TopBarHoverText

Text and glyph color on hover for the welcome menu, quick access toolbar icons, and closed ribbon tabs. In the screenshot below “Items” is blue because the mouse was hovering over it at the time the screenshot was taken.

TopBarPressedText

Text and glyph color for when the welcome menu, quick access toolbar icons, or closed ribbon tabs are pressed. Since “Page” is selected, its text color is black.

HeaderText

The base text color for anything in the header area. I have only been able to get HeaderText to appear when typing in the Search input box while there is a HeaderBackground color Applied.

HeaderSubtleText

Helper text for the search box when in the header area. This changes the color of the default text within the header search box. It also changes the color of the Pencil icon next to “Edit Links”.

HeaderDisableText

Text for the search box, if the search box is disabled when in the header area. I was unable to get the search box to be disabled, so I was only able to get a screenshot from the Color Palette Tool.

HeaderNavigationText

Base text color for navigation links in the header area. Global Navigation menu item text color for Oslo site layout

HeaderNavigationPressedText

Text color for navigation links in the header area when you press the link. Global Navigation menu item text color on click for Oslo site layout. Briefly shows the color when you press the link.

HeaderNavigationSelectedText

Text color for navigation links in the header area after the link is selected. Global Navigation menu item text color for selected for Oslo site layout.

HeaderLines

Search box lines when the search box is in the header area. The red lines in the screenshot below. This controls the color of the lines around the search box.

HeaderStrongLines

This controls the color of the lines around the search box when hovered over. This only applies to the search box in the header area of the page. I made it so the lines turn green when hovered over (represented in the screenshot).

HeaderAccentLines

Search box lines on focus when the search box is in the header area of the page. This control the color of lines when the cursor is within the search box or while typing within the search box.

HeaderSubtleLines

Subtle lines found inside the header area. Not used in default CSS. I am currently hunting down an example screenshot for this control.

HeaderDisabledLines

Controls the color of the search box lines if the search box is disabled (when it's in the header area). The example screenshot shows the red lines of the disabled search box.

HeaderDisabledBackground

Search box background if the search box is disabled when it's in the header area. The screenshot is using a green background to represent this control.

HeaderFlyoutBorder

Border for drop-down menus when originating from the header area.

HeaderSiteTitle

Text color for the site title in the header area.

SuiteBarBackground

Background color for the suite navigation. If you have a Suite Bar Background Color set globally from O365 Admin settings it will override anything that is set in the .spcolor file.

SuiteBarHoverBackground

Background color on hover for the suite navigation. If you have a Suite Bar Background Color set globally from O365 Admin settings it will override anything that is set in the .spcolor file. This setting is represented by the brown square in the screenshot.

SuiteBarText

Text and glyph color for the suite navigation items. If you have a Suite Bar Background Color set globally from O365 Admin settings it will override anything that is set in the .spcolor file.

SuiteBarDisabledText

Text and glyph color for disabled suite items. Not used in default CSS. The Gray text in the screenshot represents the SuiteBarDisabledText.

ButtonText

Text color for buttons. ButtonText controls the text in Resting, Hover, and Pressed. The control is represented by the dark blue text in the screenshot.

ButtonDisabledText

Text color for disabled buttons.

ButtonBackground

Background color for buttons. Includes buttons for switching pages. I kept the background white in this example.

ButtonHoverBackground

Background color for buttons on hover. Includes buttons for switching pages. This control is represented by the light blue background in the screenshots.

ButtonPressedBackground

Background color for buttons while pressed. Includes buttons for switching pages.

ButtonDisabledBackground

Background color for disabled buttons. Includes buttons for switching pages.

ButtonBorder

Border color for buttons.

ButtonHoverBorder

Border color for buttons on hover.

ButtonPressedBorder

Border color for buttons while pressed.

ButtonDisabledBorder

Border color for buttons that are disabled.

ButtonGlyph

Glyph color for a glyph that appears in a button. Examples of buttons glyphs in this screenshot are the arrows and magnifying glass.

ButtonGlyphActive

Glyph color on hover & Pressed, for a glyph that appears in a button. This is being represented by the grey background behind the arrow and then behind the magnifying glass in the screenshot.

ButtonGlyphDisabled

Glyph color for a disabled button. Usually gray by default. I am currently hunting down an example screenshot for this control.

TileText

The text that appears on top of the tile background overlay.

TileBackgroundOverlay

The background overlay color for tiles. Usually covers the bottom portion of the tiles, until hovered by cursor, then it covers the entire tile.


Generating a SharePoint Content Inventory with PowerShell

Being able to effectively understand and visualize your SharePoint content is a critical step in any SharePoint migration. This PowerShell script will generate a data file which you can analyze with Excel to answer key questions about your content.