Service | Microsoft Docs article | Related commit history on GitHub | Change details |
---|---|---|---|
SharePoint | Brand Colors | https://github.com/MicrosoftDocs/OfficeDocs-SharePoint/commits/public/SharePoint/SharePointOnline/brand-colors.md | + Last updated : 09/03/2024 + Title: Brand colors +++++audience: Admin +f1.keywords: +- NOCSH +++ms.localizationpriority: medium +search.appverid: +- MET150 ++- M365-collaboration ++- admindeeplinkSPO +- onedrive-toc +description: "Learn how to add and manage your brand colors in the SharePoint brand center to create a cohesive visual identity that resonates with your audience." ++# Brand Colors ++By strategically incorporating brand colors throughout your content, you can create a cohesive visual identity that resonates with your audience. These colors are more than mere aesthetic choices; they are powerful tools that evoke emotions, convey messages, and build recognition. Whether it's through a striking website, engaging social media graphics, or compelling marketing materials, the thoughtful use of color can transform ordinary content into an extraordinary experience that authentically expresses your organization's values and essence. ++![Screenshot of managing your brand colors.](media/brand-colors-manage.png) ++Brand colors are your organizationΓÇÖs colors that are uploaded and managed within the SharePoint brand center. In this article, we talk about how to manage your brand colors so you can use them in Microsoft 365. ++## Adding brand colors to the brand center ++Once the brand center is enabled, brand managers can create, update, and manage their organizationΓÇÖs brand colors easily through the app. ++In the brand color library, you can add a new color to create a full list of available standard colors to be used in various experiences. ++> [!NOTE] +> Brand colors are currently supported for use in the SharePoint and Viva Connections theme experiences> ++![The screenshot of adding new brand colors step](media/brand-colors-add-new.png) ++**Step 1**: Select Brand color from the SharePoint brand center app. ++![The screenshot of adding brand color step 1](media/brand-colors-step1.png) ++**Step 2**: Create your brand color by selecting and customizing your color. ++You can create a new color using multiple methods: ++Use the color pickers to move around and select a color ++Enter a Hexadecimal code value into the Hex box ++Enter Red, Green, Blue values into the text boxes ++**Step 3**: Name your brand color. Determine the visible setting for your brand color. ++> [!NOTE] +> This name will appear in picker experiences where you would like to select colors to use and should provide the appropriate information to guide users when selecting.> ++## Manage your brand colors ++To manage your brand colors, youΓÇÖll need to navigate to the Brand colors library in the Brand center app. ++1. Select your color from the library. ++1. Edit the Name, Color, or Visible property for your color. ++> [!NOTE] +> Deletion of brand colors is not allowed from the Brand center app at this time. ++See also: ++[How to choose the perfect colors for your brand](https://create.microsoft.com/learn/articles/how-to-choose-colors-for-brand) ++[Fundamentals of color: What is color theory?](https://create.microsoft.com/learn/articles/what-is-color-theory) |
SharePoint | Site Theme | https://github.com/MicrosoftDocs/OfficeDocs-SharePoint/commits/public/SharePoint/SharePointOnline/site-theme.md | + Last updated : 09/03/2024 + Title: Site theme +++++audience: Admin +f1.keywords: +- NOCSH +++ms.localizationpriority: medium +search.appverid: +- MET150 ++- M365-collaboration ++- admindeeplinkSPO +- onedrive-toc +description: "Learn how SharePoint site themes work at a global level to optimize websites effortlessly, expedite site creation with smart algorithms, and ensure accessibility and professional look and feel." ++# Site theme +The theme is a powerful tool that allows SharePoint site owners and Viva Connections operators to apply cohesive and visually appealing colors to their web spaces. By leveraging these themes, organizations can create a unified look and feel across their sites, ensuring both aesthetic harmony and brand consistency. The customization options provided by themes enable users to tailor their site designs to reflect their unique brand identities while maintaining functionality and accessibility. ++## Principles of SharePoint themes ++### Guided ++Our theming system works at a global level so that updates can be made consistently across each site, allowing users to optimize their websites effortlessly. +Smart and efficient +Our theming system expedites the site creation process by using smart algorithms to generate options that maximize aesthetic choices. ++### Professional ++Our themes embody a professional look and feel that ensures coherency and conveys the brand of our enterprise audiences ++### Accessible ++Our built-in accessibility checker ensures universal design at all levels of themes. For users who decide to customize, we provide helpful guidance to design for accessibility. ++## Default themes from Microsoft ++* Teal +* Blue +* Orange +* Red +* Purple +* Green +* Gray +* Periwinkle +* Black +* Cerulean +* Cobalt +* Dark Yellow +* Dark Blue ++This collection of themes have been designed for accessibility and reflect colors from the Microsoft brand revealing our shared goals and personality. ++## Anatomy of a theme ++### Primary color ++This color is central to your brand identity and personality. Consider how it makes your audience feel and how it differentiates your brand from competitors. ++### Text color ++The text color defines the default color experience for the majority of your text in your experiences. Consider how it will be used and if it can be easily read against the background color. ++### Background color ++This color is used behind your text and images to display all the content in your sites and pages. ++### Accent color ++This color is used sparingly to complement your brand and enhance your experiences. ++### Dark theme ++The dark theme setting is used to update the behavior of your colors when used on a dark background color. This will automatically adjust text and other content for accessibility when your theme is dark. ++## Create your own theme ++In the SharePoint brand center, a brand manager can create custom themes for your organization. These themes are available in the Change the Look experience for site owners and Viva Connections operators to apply to their sites and experiences. ++> [!NOTE] +> To create custom themes in the Brand center, your administrator must have enabled the Brand center from the Microsoft 365 Admin center. ++Visit the SharePoint or Viva Connections branding experiences and select **New theme**. +**Step 1**: Select your primary, text, background, and accent colors using your brand colors or by adding a custom color. Update the dark theme setting to reflect your background color selection. +**Step 2**: Name your theme and preview in different experiences. Determine the Visible setting for your font package. ++![Screenshot of creating a new theme](media/brand-center-new-theme.png) + +## Pay attention to accessibility +Color and contrast are important for accessibility. People with low vision, such as those with macular degeneration, need a certain amount of contrast to be able to see whatΓÇÖs on the screen. ItΓÇÖs also important to be careful with color selection, because color blind people canΓÇÖt tell the differences between certain colors. For example, someone who has red-green color-blindness sees red and green as the same color. +In this theme creation experience we provide a color contrast checker built into the UI Elements preview to guide you towards creating accessible themes. ++## See also +[SharePoint site theming](/sharepoint/dev/declarative-customization/site-theming/sharepoint-site-theming-overview) |