Color palettes and fonts in SharePoint

Use this reference to define the color palette or font scheme that is used in a SharePoint site.

[!IMPORTANT] This extensibility option is only available for classic SharePoint experiences. You cannot use this option with modern experiences in SharePoint Online, like with communication sites.

Color palettes

A color palette is the combination of colors that are used in a SharePoint site. The color palette for a SharePoint site is defined in a color palette file. Color slots are also used by the master page preview file to generate thumbnail and preview images of a site. The following describes the structure of the color palette file and the master page preview file:

• Color palette file (.spcolor)

  Color palette files are used in the Change the look wizard, which enables users to change the look and feel of their site by using the SharePoint themes user interface. By default, 32 color palette files are installed with SharePoint. You can also create additional color palette files. The following example shows the format of a color palette file.

<s:colorPalette isInverted="InvertedSetting" previewSlot1="Slot1" previewSlot2="Slot2" previewSlot3="Slot3" xmlns:s="http://schemas.microsoft.com/sharepoint/">
    <s:color name="ColorSlot" value="Color" />
    <!--additional color slots-->
</s:colorPalette>

In a color palette file, the following placeholders are replaced:

• InvertedSetting is a Boolean value. true if the color palette is generally light text on a dark background. false if the color palette is generally dark text on a light background.

• Slot1 is the annotation name of the color slot to use as the first block of the palette icon in the color palette picker of the theming experience.

• Slot2 is the annotation name of the color slot to use as the second block of the palette icon in the color palette picker of the theming experience.

• Slot3 is the annotation name of the color slot to use as the third block of the palette icon in the color palette picker of the theming experience.

• ColorSlot is the annotation name of the color slot that you are defining (for example, SiteTitle).

• Color is the hexadecimal value of the color to use for the specified color slot. This may be in 6 digits (RRGGBB) or 8 digits (AARRGGBB). If the hexadecimal value is 8 digits, the first two digits represent the opacity level (00-FF, which maps to 0-255). If the hexadecimal value is 6 digits, the default opacity is 100% or FF.

The color palette files are located in the Theme Gallery of the root site, in the site collection in the 15 folder (http:// SiteCollectionName/_catalogs/theme/15/). To access the Theme Gallery from the SharePoint user interface, on the Site Settings page, under Web Designer Galleries, select Themes, and then select 15.

• Master page preview file (.preview)

  Master page preview files are used to generate thumbnail images and preview images when you use the Change the look wizard. A master page must have a corresponding preview file to be used in the Change the look wizard. A preview file is a specially formatted file that has sections for the default color palette, default font scheme, tokenized CSS, and tokenized HTML. It uses string tokens to get the value of color slots, font names, and localized UI strings. The following example shows color slots being used in the master page preview file.

[ID] #dgp-pageContainer
{
    background-color: [T_THEME_COLOR_PAGEBACKGROUND];
    color: [T_THEME_COLOR_BODYTEXT];
    width: 100%;
    height:100%;
    background-image: url('[T_IMAGE]');
    background-size: cover;
    font-family: [T_BODY_FONT];
}

For more information, see How to: Create a master page preview file in SharePoint

Color slot mapping

Table 1 describes the color slots that are available and where color slots are used in a SharePoint site.

Note

When discussing navigation items,pressed applies to when a user clicks or touches a navigation item.Selected applies to when a user is navigated to the page.> The following summarizes a normal flow of actions and the color slot that applies to the navigation item link at each step:> The base text of a navigation item link: HeaderNavigationText> A user hovers the cursor over the navigation item link: HeaderNavigationHoverText> A user clicks, touches, or chooses the navigation item link: HeaderNavigationPressedText> The user is navigated to the chosen page. The color slot that applies to the navigation item for the page the user is now on: HeaderNavigationSelectedText

Table 1. Color slots

Annotation Name	Where the Color Is Used in the UI	Token Name
BodyText	Normal body text.	[T_THEME_COLOR_BODYTEXT]
SubtleBodyText	Body text that must be lighter than normal. An example is metadata text.	[T_THEME_COLOR_SUBTLEBODYTEXT]
StrongBodyText	Body text color for text that must stand out from normal body text.	[T_THEME_COLOR_STRONGBODYTEXT]
DisabledText	Disabled text. For example, unavailable items in menus.	[T_THEME_COLOR_DISABLEDTEXT]
SiteTitle	The text color of the page title.	[T_THEME_COLOR_SITETITLE]
WebPartHeading	Text color for web part headings.	[T_THEME_COLOR_WEBPARTHEADING]
ErrorText	The main error color that is used for error text, borders, and backgrounds, as needed.	[T_THEME_COLOR_ERRORTEXT]
AccentText	Text color for accented body text.	[T_THEME_COLOR_ACCENTTEXT]
SearchURL	Text color for the URL found in search results. Also used to highlight new items or successful status notifications.	[T_THEME_COLOR_SEARCHURL]
Hyperlink	Text color for hyperlinks.	[T_THEME_COLOR_HYPERLINK]
HyperlinkFollowed	Text color for followed hyperlinks.	[T_THEME_COLOR_HYPERLINKFOLLOWED]
HyperlinkActive	Hyperlink color when pressed.	[T_THEME_COLOR_HYPERLINKACTIVE]
CommandLinks	Large command links that must be a bit lighter than body text because of their size.	[T_THEME_COLOR_COMMANDLINKS]
CommandLinksSecondary	Command link color for links that are smaller, and therefore have a stronger color to stand out.	[T_THEME_COLOR_COMMANDLINKSSECONDARY]
CommandLinksHover	Command link color on hover.	[T_THEME_COLOR_COMMANDLINKSHOVER]
CommandLinksPressed	Command link color when pressed.	[T_THEME_COLOR_COMMANDLINKSPRESSED]
CommandLinksDisabled	Command link color when command link is disabled.	[T_THEME_COLOR_COMMANDLINKSDISABLED]
BackgroundOverlay	The main background color that is visible between the optional background image and the page content.	[T_THEME_COLOR_BACKGROUNDOVERLAY]
DisabledBackground	Background for disabled elements such as browser controls, for example, input box or select box (except buttons).	[T_THEME_COLOR_DISABLEDBACKGROUND]
PageBackground	The background color of the page. Appears behind the optional background image.	[T_THEME_COLOR_PAGEBACKGROUND]
HeaderBackground	The background color for the header area of the page.	[T_THEME_COLOR_HEADERBACKGROUND]
FooterBackground	The background color for the footer area of the page.	[T_THEME_COLOR_FOOTERBACKGROUND]
SelectionBackground	The background color for selected list items and drop-down menu items.	[T_THEME_COLOR_SELECTIONBACKGROUND]
HoverBackground	The background color for list items and drop-down menu items on hover.	[T_THEME_COLOR_HOVERBACKGROUND]
RowAccent	The accented left border on selected list items.	[T_THEME_COLOR_ROWACCENT]
StrongLines	Borders for browser controls on hover.	[T_THEME_COLOR_STRONGLINES]
Lines	Borders for browser controls.	[T_THEME_COLOR_LINES]
SubtleLines	Subtle border color. For example, gridlines for inline editing.	[T_THEME_COLOR_SUBTLELINES]
DisabledLines	Border color for disabled browser controls such as input boxes and select boxes.	[T_THEME_COLOR_DISABLEDLINES]
AccentLines	Focused border color for selected browser controls.	[T_THEME_COLOR_ACCENTLINES]
DialogBorder	Dialog box border color.	[T_THEME_COLOR_DIALOGBORDER]
Navigation	Text color for horizontal and vertical navigation items.	[T_THEME_COLOR_NAVIGATION]
NavigationAccent	Text color for a selected horizontal navigation item.	[T_THEME_COLOR_NAVIGATIONACCENT]
NavigationHover	Navigation text color on hover. Applies to top navigation, and to Quick Launch in horizontal mode.	[T_THEME_COLOR_NAVIGATIONHOVER]
NavigationPressed	Text color of navigation item when pressed. Applies to top navigation, and to Quick Launch in horizontal mode.	[T_THEME_COLOR_NAVIGATIONPRESSED]
NavigationHoverBackground	Background color of Quick Launch items in vertical mode on hover over the navigation item.	[T_THEME_COLOR_NAVIGATIONHOVERBACKGROUND]
NavigationSelectedBackground	Background color of Quick Launch items in vertical mode after the navigation item is selected.	[T_THEME_COLOR_NAVIGATIONSELECTEDBACKGROUND]
EmphasisText	The text color that appears on top of emphasis background.	[T_THEME_COLOR_EMPHASISTEXT]
EmphasisBackground	The accented background color that appears directly behind emphasis text.	[T_THEME_COLOR_EMPHASISBACKGROUND]
EmphasisHoverBackground	Background color on hover, for elements that are using emphasis background.	[T_THEME_COLOR_EMPHASISHOVERBACKGROUND]
EmphasisBorder	Border color for elements that are using emphasis background.	[T_THEME_COLOR_EMPHASISBORDER]
EmphasisHoverBorder	Border color on hover for elements that are using emphasis background.	[T_THEME_COLOR_EMPHASISHOVERBORDER]
SubtleEmphasisText	Text that appears on top of subtle emphasis background.	[T_THEME_COLOR_SUBTLEEMPHASISTEXT]
SubtleEmphasisCommandLinks	Command link color for links that appear on top of subtle emphasis background.	[T_THEME_COLOR_SUBTLEEMPHASISCOMMANDLINKS]
SubtleEmphasisBackground	Background that appears directly behind subtle emphasis text.	[T_THEME_COLOR_SUBTLEEMPHASISBACKGROUND]
TopBarText	Text and glyph color for the welcome menu, quick access toolbar icons, and closed ribbon tabs.	[T_THEME_COLOR_TOPBARTEXT]
TopBarBackground	The background color for the top bar, which is seen below and to the right of the suite navigation.	[T_THEME_COLOR_TOPBARBACKGROUND]
TopBarHoverText	Text and glyph color on hover for the welcome menu, quick access toolbar icons, and closed ribbon tabs.	[T_THEME_COLOR_TOPBARHOVERTEXT]
TopBarPressedText	Text and glyph color for when the welcome menu, quick access toolbar icons, or closed ribbon tabs are pressed.	[T_THEME_COLOR_TOPBARPRESSEDTEXT]
HeaderText	The base text color for anything in the header area.	[T_THEME_COLOR_HEADERTEXT]
HeaderSubtleText	Helper text for the search box when in the header area.	[T_THEME_COLOR_HEADERSUBTLETEXT]
HeaderDisableText	Text for the search box, if the search box is disabled when in the header area.	[T_THEME_COLOR_HEADERDISABLETEXT]
HeaderNavigationText	Base text color for navigation links in the header area.	[T_THEME_COLOR_HEADERNAVIGATIONTEXT]
HeaderNavigationHoverText	Text color for navigation links in the header area when you hover over the link.	[T_THEME_COLOR_HEADERNAVIGATIONHOVERTEXT]
HeaderNavigationPressedText	Text color for navigation links in the header area when you press the link.	[T_THEME_COLOR_HEADERNAVIGATIONPRESSEDTEXT]
HeaderNavigationSelectedText	Text color for navigation links in the header area after the link is selected.	[T_THEME_COLOR_HEADERNAVIGATIONSELECTEDTEXT]
HeaderLines	Search box lines when the search box is in the header area.	[T_THEME_COLOR_HEADERLINES]
HeaderStrongLines	Search box lines on hover when the search box is in the header area.	[T_THEME_COLOR_HEADERSTRONGLINES]
HeaderAccentLines	Search box lines on focus when the search box is in the header area.	[T_THEME_COLOR_HEADERACCENTLINES]
HeaderSublteLines	Subtle lines found inside the header area. Not used in default CSS.	[T_THEME_COLOR_HEADERSUBTLELINES]
HeaderDisabledLines	Search box lines if the search box is disabled when it's in the header area.	[T_THEME_COLOR_HEADERDISABLEDLINES]
HeaderDisabledBackground	Search box background if the search box is disabled when it's in the header area.	[T_THEME_COLOR_HEADERDISABLEDBACKGROUND]
HeaderFlyoutBorder	Border for drop-down menus when originating from the header area.	[T_THEME_COLOR_HEADERFLYOUTBORDER]
HeaderSiteTitle	Text color for the site title when in the header area.	[T_THEME_COLOR_HEADERSITETITLE]
SuiteBarBackground	Background color for the suite navigation.	[T_THEME_COLOR_SUITEBARBACKGROUND]
SuiteBarHoverBackground	Background color on hover for the suite navigation.	[T_THEME_COLOR_SUITEBARHOVERBACKGROUND]
SuiteBarText	Text and glyph color for the suite navigation items.	[T_THEME_COLOR_SUITEBARTEXT]
SuiteBarDisabledText	Text and glyph color for disabled suite items. Not used in default CSS.	[T_THEME_COLOR_SUITEBARDISABLEDTEXT]
ButtonText	Text color for buttons.	[T_THEME_COLOR_BUTTONTEXT]
ButtonDisabledText	Text color for disabled buttons.	[T_THEME_COLOR_BUTTONDISABLEDTEXT]
ButtonBackground	Background color for buttons.	[T_THEME_COLOR_BUTTONBACKGROUND]
ButtonHoverBackground	Background color for buttons on hover.	[T_THEME_COLOR_BUTTONHOVERBACKGROUND]
ButtonPressedBackground	Background color for buttons while pressed.	[T_THEME_COLOR_BUTTONPRESSEDBACKGROUND]
ButtonDisabledBackground	Background color for disabled buttons.	[T_THEME_COLOR_BUTTONDISABLEDBACKGROUND]
ButtonBorder	Border color for buttons.	[T_THEME_COLOR_BUTTONBORDER]
ButtonHoverBorder	Border color for buttons on hover.	[T_THEME_COLOR_BUTTONHOVERBORDER]
ButtonPressedBorder	Border color for buttons while pressed.	[T_THEME_COLOR_BUTTONPRESSEDBORDER]
ButtonDisabledBorder	Border color for buttons that are disabled.	[T_THEME_COLOR_BUTTONDISABLEDBORDER]
ButtonGlyph	Glyph color for a glyph that appears in a button.	[T_THEME_COLOR_BUTTONGLYPH]
ButtonGlyphActive	Glyph color on hover, for a glyph that appears in a button.	[T_THEME_COLOR_BUTTONGLYPHACTIVE]
ButtonGlyphDisabled	Glyph color for a disabled button.	[T_THEME_COLOR_BUTTONGLYPHDISABLED]
TileText	The text that appears on top of the tile background overlay.	[T_THEME_COLOR_TILETEXT]
TileBackgroundOverlay	The background overlay color for tiles.	[T_THEME_COLOR_TILEBACKGROUNDOVERLAY]
ContentAccent1	The first accent color that a user can select from the Rich Text Editor color picker.	[T_THEME_COLOR_CONTENTACCENT1]
ContentAccent2	The second accent color that a user can select from the Rich Text Editor color picker.	[T_THEME_COLOR_CONTENTACCENT2]
ContentAccent3	The third accent color that a user can select from the Rich Text Editor color picker.	[T_THEME_COLOR_CONTENTACCENT3]
ContentAccent4	The fourth accent color that a user can select from the Rich Text Editor color picker.	[T_THEME_COLOR_CONTENTACCENT4]
ContentAccent5	The fifth accent color that a user can select from the Rich Text Editor color picker.	[T_THEME_COLOR_CONTENTACCENT5]
ContentAccent6	The sixth accent color that a user can select from the Rich Text Editor color picker.	[T_THEME_COLOR_CONTENTACCENT6]

Font schemes

Fonts are defined in the font scheme (.spfont file) and the master page preview (.preview file) for a given SharePoint site. The font scheme defines the fonts that are used in four areas: title, navigation, heading, and body. Seven font schemes are included in SharePoint. You can create additional font schemes. The font scheme files are located in the 15 subfolder of the Theme Gallery of the root site of the site collection (http:// SiteCollectionName/_catalogs/theme/15/). To access the Theme Gallery from the SharePoint user interface, on the Site Settings page, under Web Designer Galleries, select Themes, and then select 15.

The following example describes the format for an .spfont file.

<?xml version="1.0" encoding="utf-8"?>
<s:fontScheme name="FontSchemeName" previewSlot1="Slot1" previewSlot2="Slot2" xmlns:s="http://schemas.microsoft.com/sharepoint/">
  <s:fontSlots>
    <s:fontSlot name="FontSlotName">
      <s:latin typeface="LatinScriptFont" />
      <s:ea typeface="EAScriptFont"/>
      <s:cs typeface="CSFont" />
      <s:font script="Language" typeface="ScriptFont" />
      <!--Additional fonts-->
  </s:fontSlots>
  <!--Additional font slots-->
</s:fontScheme>

In an .spfont file, the following placeholders are replaced:

• FontSchemeName is the name of the font scheme.

• Slot1 is the name of the font slot that you want to use as the first block of the font icon in the font scheme picker in the Change the look wizard.

• Slot2 is the name of the font slot that you want to use as the second block of the font icon in the font scheme picker in the Change the look wizard.

• FontSlotName is the name of the font slot that you are defining (for example, title).

• LatinScriptFont is the font to use for Latin scripts. This font is also the fallback font. That is, this is the font that is used for a language that does not have a script that is explicitly set in the font scheme.

  Note

  You must provide additional information to use web fonts in your font scheme. For more information, see the Web fonts section in this article.

• EAScriptFont is the font to use for East Asia scripts. The <s:ea> element is not currently used by SharePoint. But, the <s:ea> element is still required in the font scheme.

• CSFont is the font to use for complex scripts. The <s:cs> element is not currently used by SharePoint. But, the <s:cs> element is still required in the font scheme.

• Language is the language script.

• ScriptFont is the font to use for the specified language script.

The following example shows a portion of an .spfont file.

<s:fontScheme name="Georgia" previewSlot1="title" previewSlot2="body" xmlns:s="http://schemas.microsoft.com/sharepoint/">
    <s:fontSlots>
        <s:fontSlot name="title">
            <s:latin typeface="Georgia"/>
            <s:ea typeface=""/>
            <s:cs typeface="Segoe UI Light" />
            <s:font script="Arab" typeface="Tahoma" />
            <s:font script="Deva" typeface="Mangal" />
            <s:font script="Grek" typeface="Segoe UI Light" />
            <s:font script="Hang" typeface="Malgun Gothic" />
            <s:font script="Hans" typeface="Microsoft YaHei" />
            <s:font script="Hant" typeface="Microsoft JhengHei" />
            <s:font script="Hebr" typeface="Tahoma" />
            <s:font script="Hira" typeface="Meiryo" />
            <s:font script="Thai" typeface="Tahoma" />
            <s:font script="Armn" typeface="Tahoma" />
            <s:font script="Beng" typeface="Vrinda" />
            <s:font script="Cher" typeface="Plantagenet Cherokee" />
            <s:font script="Ethi" typeface="Nyala" />
            <s:font script="Geor" typeface="Sylfaen" />
            <s:font script="Gujr" typeface="Shruti" />
            <s:font script="Guru" typeface="Raavi" />
            <s:font script="Knda" typeface="Tunga" />
            <s:font script="Khmr" typeface="DaunPenh" />
            <s:font script="Laoo" typeface="DokChampa" />
            <s:font script="Mlym" typeface="Kartika" />
            <s:font script="Mymr" typeface="Myanmar Text" />
            <s:font script="Orya" typeface="Kalinga" />
            <s:font script="Sinh" typeface="Iskoola Pota" />
            <s:font script="Syrc" typeface="Estrangelo Edessa" />
            <s:font script="Taml" typeface="Latha" />
            <s:font script="Telu" typeface="Gautami" />
            <s:font script="Thaa" typeface="MV Boli" />
            <s:font script="Tibt" typeface="Cordia New" />
            <s:font script="Yiii" typeface="Microsoft Yi Baiti" />
        </s:fontSlot>
???

SharePoint includes support for web fonts. You must provide additional information to use web fonts in your font scheme. For more information, see the Web fonts section in this article.

Web-safe fonts

Web-safe fonts are a set of fonts that are widely used and available on most devices by default. To specify a web-safe font in the font scheme, include the name of the font in the typeface attribute of the font slot. The following example shows a web-safe font used in a font scheme.

<s:fontSlot name="title">
  <s:latin typeface="Georgia"/>
???
</s:fontSlot>

Web fonts

Web fonts are fonts that are available on the Internet. When a user views a site that uses web fonts, the web browser downloads the necessary font files along with the rest of the page. To specify a web font, you must provide the URL to your web font files in four font formats (for support across browsers), and a small and large thumbnail image to use to render the font names in the font scheme picker.

The following example describes the information that is required to use a web font in an <s:latin> element.

<s:latin typeface="FontName"
  eotsrc="EotFile"
  woffsrc="WoffFile"
  ttfsrc="TtfFile"
  svgsrc="SvgFile"
  largeimgsrc="LargeImgFile"
  smallimgsrc="SmallImgFile" />

In this example of using a web font, the following placeholders would be replaced:

• FontName is the name of the web font.

• EotFile is the relative URL to the Embedded Open Type font file.

• WoffFile is the relative URL to the Web Open Font Format font file.

• TtfFile is the relative URL to the TrueType font file.

• SvgFile is the relative URL to the Scalable Vector Graphics font file.

• LargeImgFile is the relative URL to the large thumbnail image that you want to use in the font scheme picker.

• SmallImgFile is the relative URL to the small thumbnail image that you want to use in the font scheme picker.

Note

The paths to the files have to be the full URL (i.e. https://tenant.sharepoint.com/sites/sitename/_catalogs/theme/15/fontfile.wof) The LargeImgFile and SmallImgFile attributes have to be present in the Latin tag even if given empty values.

Font slots

Table 1 describes the available font slots and where they are used in a page.

Table 1. Font slots

Font Slot Name	Description
title	Used for the page title.
navigation	Used for the horizontal and vertical navigation elements on the page.
large-heading	Used for the H1 heading.
heading	Used for H2 and H3 headings, web part titles, dialog box titles, and callout titles.
small-heading	Used for H4 headings.
large-body	Used for large body text (15 pixels and 19 pixels).
body	The base font that is used everywhere else on the page.

See also

• Themes overview for SharePoint

• How to: Deploy a custom theme in SharePoint

• Upgrade custom themes and CSS to SharePoint

• How to: Create a master page preview file in SharePoint

• SharePoint Team Blog: Show off your style with SharePoint theming

• SharePoint Design Manager branding and design capabilities