Color Setup

The Theme Colors section in Porto defines your website’s visual identity and global color scheme. You can access it by navigating to Porto > Theme Options > Skin > Theme Colors.
From here, you can configure your site’s color palette, including Primary, Secondary, Tertiary, Quaternary, Dark, and Light colors.

By default, Porto uses two key colors:

• Primary Color – This is your main brand color and is applied to buttons, links, highlights, and other key interface elements.
• Secondary Color – This complements your primary color and is commonly used for hover effects, borders, and accent backgrounds.

It’s recommended to configure these two main colors at the start of your site build to ensure a consistent appearance across all pages and imported demo content.

In addition to the main colors, Porto provides several extended color options that help refine your site’s design and readability:

• Tertiary Color – Useful for subtle highlights or alternative accent areas.
• Quaternary Color – Works well for muted backgrounds or divider sections.
• Dark Color – Controls darker elements such as headings, borders, and primary text.
• Light Color – Defines lighter text or background elements, ensuring proper contrast and readability.

These additional color layers provide greater flexibility in maintaining a balanced and visually appealing site design.

Porto’s color system allows you to easily update your entire website’s color scheme at any time.
When you modify your theme colors in Theme Options, Porto automatically applies the new palette globally—saving you from manually editing individual sections or elements.

This feature is particularly helpful if you ever decide to rebrand or refresh your site’s visual identity in the future.

• Choose a color palette that reflects your brand’s style and tone.
• Always test your colors on both light and dark backgrounds to maintain contrast.
• Keep a record of your original color codes before making large changes for easy reference.