Color schemes allow you to create a polished and professional experience across your site while adhering to your company's branding. You can apply the same color scheme to your site branding, as well as the cards and header content layouts in the interfaces used for your site pages. This gives your site a consistent style and user experience.
This page will:
When creating your site, you can choose from our selection of dark color schemes or you can create your own custom color scheme. To create a consistent style for your users, use the same color scheme that you select for your site branding across all user interfaces in your site.
There are three dark color schemes to choose from for your sites and interfaces: Charcoal, Navy, and Plum.
Only use dark color schemes when you can apply the scheme to all of your site pages. Do not create sites with a mix of dark and non-dark color scheme pages. Dark color schemes shouldn't be applied to pages used on Tempo or across multiple sites with different color schemes.
To use a dark color scheme consistently across your site:
Alternatively, you can create a custom color scheme to match your company branding. To create a custom color scheme, you will need to choose a set of site branding colors. These include your navigation bar color, selected highlight color, accent color, and loading bar color. Once you've selected the color scheme for your site, use them consistently across all interfaces and site pages for a cohesive and professional look.
For more information on custom color schemes for sites and header content layouts, see our header content layout design guidance.
For each dark color scheme, we've provided an example of the scheme used in a site dashboard and the list of hex codes for the color scheme.
The hex codes correspond to the site's navigation bar color, selected highlight color, accent color, and loading bar color. For more information on configuring these site branding colors, see UX Sites Branding.
"#1a1e21"
"#242a2d"
"#99a8c5"
"#69afdc"
"#17202b"
"#1a2a3c"
"#2c6acc"
"#69afdc"
"#171523"
"#232131"
"#CD482D5"
"#b388f4"
We have extensive color scheme design and style guidance for sites, header content layouts, and cards in our documentation. The following links provide in depth guidance on each topic.
Site Color Schemes