IF-Blueprint Blog

Color palettes and fonts in SharePoint 2013

Today I want to talk just a little bit about designs in SharePoint 2013. You should know that I am not one of the greatest Web Designers and I believe I was never meant to be one of them. But Microsoft made it very easy to get your own corporate look and feel in SharePoint 2013 by just adjusting the color palettes and fonts. It’s not a full-blown design but its maybe just right for some of you.

But still it was just a bunch of hexadecimal color codes in an XML formatted file which looks like the following.

<?xml version="1.0" encoding="utf-8"?>
<s:colorPalette isInverted="false" previewSlot1="BackgroundOverlay" previewSlot2="BodyText" previewSlot3="AccentText" xmlns:s="http://schemas.microsoft.com/sharepoint/">
    <s:color name="BodyText" value="444444" />
    <s:color name="SubtleBodyText" value="777777" />
    <s:color name="StrongBodyText" value="262626" />
    <s:color name="DisabledText" value="B1B1B1" />
    <s:color name="SiteTitle" value="262626" />
    <s:color name="WebPartHeading" value="444444" />
    <s:color name="ErrorText" value="BF0000" />
    <s:color name="AccentText" value="FF0000" />
    <s:color name="SearchURL" value="338200" />
    <s:color name="Hyperlink" value="0072C6" />
    <s:color name="Hyperlinkfollowed" value="663399" />
    <s:color name="HyperlinkActive" value="9B0000" />
    <s:color name="CommandLinks" value="666666" />
    <s:color name="CommandLinksSecondary" value="262626" />
    <s:color name="CommandLinksHover" value="FF0000" />
    <s:color name="CommandLinksPressed" value="9B0000" />
    <s:color name="CommandLinksDisabled" value="B1B1B1" />
    <s:color name="BackgroundOverlay" value="D8FFFFFF" />
    <s:color name="DisabledBackground" value="FDFDFD" />
    <s:color name="PageBackground" value="FFFFFF" />
    <s:color name="HeaderBackground" value="D8FFFFFF" />
    <s:color name="FooterBackground" value="D8FFFFFF" />
    <s:color name="SelectionBackground" value="7F9CCEF0" />
    <s:color name="HoverBackground" value="7FCDE6F7" />
    <s:color name="RowAccent" value="FF0000" />
    <s:color name="StrongLines" value="FF9696" />
    <s:color name="Lines" value="ABABAB" />
    <s:color name="SubtleLines" value="C6C6C6" />
    <s:color name="DisabledLines" value="E1E1E1" />
    <s:color name="AccentLines" value="FF3939" />
    <s:color name="DialogBorder" value="F0F0F0" />
    <s:color name="Navigation" value="666666" />
    <s:color name="NavigationAccent" value="FF0000" />
    <s:color name="NavigationHover" value="FF0000" />
    <s:color name="NavigationPressed" value="9B0000" />
    <s:color name="NavigationHoverBackground" value="7FCDE6F7" />
    <s:color name="NavigationSelectedBackground" value="C6EFEFEF" />
    <s:color name="EmphasisText" value="FFFFFF" />
    <s:color name="EmphasisBackground" value="FF0000" />
    <s:color name="EmphasisHoverBackground" value="C60000" />
    <s:color name="EmphasisBorder" value="C60000" />
    <s:color name="EmphasisHoverBorder" value="9B0000" />
    <s:color name="SubtleEmphasisText" value="666666" />
    <s:color name="SubtleEmphasisCommandLinks" value="262626" />
    <s:color name="SubtleEmphasisBackground" value="F1F1F1" />
    <s:color name="TopBarText" value="666666" />
    <s:color name="TopBarBackground" value="C6EFEFEF" />
    <s:color name="TopBarHoverText" value="333333" />
    <s:color name="TopBarPressedText" value="9B0000" />
    <s:color name="HeaderText" value="444444" />
    <s:color name="HeaderSubtleText" value="777777" />
    <s:color name="HeaderDisableText" value="B1B1B1" />
    <s:color name="HeaderNavigationText" value="666666" />
    <s:color name="HeaderNavigationHoverText" value="FF0000" />
    <s:color name="HeaderNavigationPressedText" value="9B0000" />
    <s:color name="HeaderNavigationSelectedText" value="FF0000" />
    <s:color name="HeaderLines" value="ABABAB" />
    <s:color name="HeaderStrongLines" value="FF9696" />
    <s:color name="HeaderAccentLines" value="FF3939" />
    <s:color name="HeaderSubtleLines" value="C6C6C6" />
    <s:color name="HeaderDisabledLines" value="E1E1E1" />
    <s:color name="HeaderDisabledBackground" value="FDFDFD" />
    <s:color name="HeaderFlyoutBorder" value="D1D1D1" />
    <s:color name="HeaderSiteTitle" value="262626" />
    <s:color name="SuiteBarBackground" value="FF0000" />
    <s:color name="SuiteBarHoverBackground" value="FF6464" />
    <s:color name="SuiteBarText" value="FFFFFF" />
    <s:color name="SuiteBarDisabledText" value="FF9696" />
    <s:color name="ButtonText" value="444444" />
    <s:color name="ButtonDisabledText" value="B1B1B1" />
    <s:color name="ButtonBackground" value="FDFDFD" />
    <s:color name="ButtonHoverBackground" value="E6F2FA" />
    <s:color name="ButtonPressedBackground" value="FF9696" />
    <s:color name="ButtonDisabledBackground" value="FDFDFD" />
    <s:color name="ButtonBorder" value="ABABAB" />
    <s:color name="ButtonHoverBorder" value="FF9696" />
    <s:color name="ButtonPressedBorder" value="FF3939" />
    <s:color name="ButtonDisabledBorder" value="E1E1E1" />
    <s:color name="ButtonGlyph" value="666666" />
    <s:color name="ButtonGlyphActive" value="444444" />
    <s:color name="ButtonGlyphDisabled" value="C6C6C6" />
    <s:color name="TileText" value="FFFFFF" />
    <s:color name="TileBackgroundOverlay" value="7F000000" />
    <s:color name="ContentAccent1" value="FF9339" />
    <s:color name="ContentAccent2" value="C65A00" />
    <s:color name="ContentAccent3" value="24A0A0" />
    <s:color name="ContentAccent4" value="007777" />
    <s:color name="ContentAccent5" value="2FCF2F" />
    <s:color name="ContentAccent6" value="009E00" />

And to be honest I do not see the colors behind a six-digit hexadecimal code … yet!
And I think I want to keep it like that.

But today, a dear colleague of mine showed me how easy it can be to get started in less than 10 minutes when you have the right toolset which in this case is provided by Microsoft itself.

Here is what he showed me:

Download the SharePoint Color Palette Tool from the Microsoft Download Center here.


The tool is easy to handle and self-explaining. (Feel free to contact me if you have questions)

You can use one of the many tools out there to create a color scheme.
We used http://paletton.com in this example.

Just put the hexadecimal color codes into your SharePoint Color Palette and save the file.

Now you can upload the *.spcolor file to SharePoint manually or you use a SharePoint App to deploy the file to SharePoint. Chis O’Brien explained the second way in his blogpost SP2013 host web apps: provisioning files (e.g. master pages) to the host web.

Unfortunately there is no editor for for the *.spfont files. But you can use your own fonts in SharePoint 2013 by providing a custom .spfont file. For more Information about both file types take a look at the MSDN article Color palettes and fonts in SharePoint 2013