Summary: This guide explains how to access and customize your Site's color palette using hex codes for primary, secondary, and tertiary colors, detailing how these choices and their contrasting (counter) colors are applied across various site elements like headers, footers, and content blocks.
Before You Begin
- You must have Admin permissions to access Sites > Design settings.
- All color codes must be entered as Hex Color Codes. Other formats will cause issues.
- Consider using external tools like Adobe Color for palette inspiration.
Step-by-Step Instructions
1. Click on Sites from your main navigation menu.
2. Select Design from the left navigation menu.
3. Enter your information into the Primary Color field. [This is the default color used throughout your site and for hyperlinks.]
4. Enter your information into the Secondary Color field. [Used for headlines and some hyperlinks.]
5. Enter your information into the Tertiary Color field. [Used for buttons in blocks.]
6. Click the Save Settings button (or similar).
Troubleshooting & FAQs
- My site looks broken or visually inconsistent: An incorrect color code (i.e., not a hex code) may have been entered. Go back to Sites > Design and either reset your colors to the default palette or enter the correct hex color codes.
- What determines which color is used on a block? The colors change based on the Block color layout you choose. The Primary/Secondary/Tertiary colors and their counters are combined into several predefined overlay combinations (Overlay #1 through #6) and neutral options (Overlay #7 through #10).
What Determines Color Placement?
Primary Color: This is the default color used throughout your site, and used for hyperlinks.
Secondary Color: Headlines (used in news/blog/events), Hyperlinks
Tertiary Color: Used for buttons in blocks Primary/Secondary and their counter colors are used in blocks and headers.
When Primary or Secondary is chosen as the overlay color with the text being the Primary or Secondary color and the counter (contrasting) color will be the background (and vice versa).
In Blocks, the colors change depending on what Block color layout you choose.
Color Overlay Combinations and Examples
For the following examples, we will use these colors:
Overlay #1: Primary Background with Primary Counter All Text
Overlay #2: Secondary Background and Secondary Counter All Text
Overlay #3: Tertiary Background and Primary Counter All Text
Overlay #4: Primary Counter Background with Primary Headings and Black Text
Overlay #5: Secondary Counter Background with Secondary Headings and Black Text
Overlay #6: Tertiary Counter Background with Tertiary Headings and Black Text
Overlays 7 through 10 are Neutrals
#7 White text on a dark grey background
#8 Black text on light grey background
#9 Black text on a white background
#10 Dark grey text on a white background (negligible difference on most monitors)
Uh oh! Does your site look broken?
In the event an incorrect color code has been added, your site may look like this:
Don't fret! There's a quick and easy way to fix this:
- Go back to Admin > Design.
- Reset your colors to the default palette or enter correct hex color codes.