Using the Color Palette in Global Styling

In Web Studio > Global Styling > Color Palette, you define the main colors used throughout your site. These settings affect everything from text and buttons to backgrounds and accents. Once set, your color palette ensures a consistent, branded look across all pages.

The Four Main Color Settings

1. Primary Color
   • Used in key UI elements like buttons, highlights, and links.
   • Should usually be your main brand color.
2. Secondary Colors
   • Supporting colors for accents, highlights, or categories.
   • Use sparingly for variation, alerts, or emphasis.
3. Background Color
   • The default background of your site’s pages.
   • Keep it simple (light or dark neutral) to ensure readability.
4. Main Text Color
   • Default color for body text and headings.
   • Must contrast well against your background color.

How the Palette Works

• When you change a color here, it automatically updates across your site.
• Buttons, forms, and text elements that use global colors will adapt instantly.
• You can still override colors in specific blocks – but keeping most elements on global colors ensures consistency and will save a lot of your time.

Tips for Choosing Colors

• Start with your brand palette: Identify your brand’s primary and supporting colors.
• Swap smartly from templates: If you use a template, replace dark template colors with dark tones from your brand, and accent colors with your brand’s accents. This keeps the design structure intact.
• Limit the palette: Stick to a primary, background, main text, and 3-4 secondary colors. Too many colors will lead to a messy design.
• Check contrast: Make sure text against background meets WCAG AA contrast ratio (4.5:1) for readability.

Best Practices

• Primary should stand out: Use it for CTAs (Call-to-Action buttons).
• Secondary for accents only: Avoid overusing secondary colors—this keeps your design clean.
• Keep text dark on light backgrounds (and vice versa): For maximum readability.
• Test accessibility: Use an online contrast checker to confirm your color choices.
• Consistency builds trust: Don’t mix random shades; stick to your palette.

Confirming Your Palette

1. Choose your colors in Global Styling → Color Palette.
2. Preview how they look on different blocks.
3. Click Confirm to save.

Troubleshooting

• My button color didn’t change: Make sure the button uses the global Primary color, not a custom override.
• Text is hard to read: Adjust your Main Text color for better contrast.
• Too many mismatched colors: Re-set elements to use global colors instead of custom inline ones.