The colors you choose for your Tithely site play a crucial role in its overall look and feel. This article explains how primary, secondary, and tertiary colors, along with their contrasting counterparts, are used throughout your website to create a cohesive design.
Understanding Color Usage
Your chosen colors and their contrasting colors are applied to various elements like blocks, headers, and footers. They appear as text and background (or overlay) colors, along with a neutral palette, to maintain a consistent aesthetic.
Accessing and Setting Your Site Colors
- Log in to your Tithely account and select Sites.
- Click the Admin menu at the top right of your site.
- Select Design. Here, you can view and modify your primary, secondary, tertiary, and contrasting colors.
🌟 Tithely Tip: You can choose from pre-selected color palettes or create your own. For inspiration, explore platforms like Adobe Color, which offers thousands of free palettes.
Important: Use hex color codes (e.g., #123456). Other formats like decimal or RGB may cause issues with your site's appearance.
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 - Watch the video below, and in a few simple clicks, your website will be back to normal.
- Go back to Admin > Design.
- Reset your colors to the default palette or enter correct hex color codes.
User Permissions needed to access Sites
Account Owner, Admin, Limited Acess User with permissions granted for Sites, or Admin Permissions granted directly on the Tithely Site. If you have additional questions, please reference this article.