Colors on Tithely Sites

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

1. Log in to your Tithely account and select Sites.
2. Click the Admin menu at the top right of your site.
3. 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. 

1. Go back to Admin > Design.
2. Reset your colors to the default palette or enter correct hex color codes.