Global Colors

ColorMag includes a powerful Global Color System that gives you full control over your site’s look and feel from a single place.

Using color palettes, custom palettes, global linking, and dark mode support, you can change your entire website’s color scheme instantly—without editing individual elements. 

This article explains how the system works and how to use it effectively. 

You can find Global color settings under: Appearance → Customize → Global → Colors 

Color Palette #

The Color Palette controls the overall color theme of your website. 

ColorMag provides several predefined palettes, each containing 9 colors designed to work harmoniously across your layout. 

When you select or change a palette, any element that uses Global Colors will automatically update to match the global preset.

Palette Color Purpose #

Each palette includes the following colors: 

Color Name	Color Category	Color Purpose
Main Accent	Accent Colors	Primary brand color used for buttons, links, call-to-action, and main highlights.
Secondary Accent	Accent Colors	Supporting accent for hover states, tags, badges, and subtle highlights
Main Background	Background Colors	Default background for general page areas
Surface Background	Background Colors	Background for cards, panels, and elevated sections
Contrast Background	Background Colors	Background for headers, footers, hero sections, or areas requiring high visual contrast
Title Text	Text Colors	Color used for headings text
Regular Text	Text Colors	Color for body text, paragraphs, content text
Text on Contrast	Text Colors	Text color displayed on dark/contrast backgrounds
Muted	Utility Color	Subtle color for lines, dividers, outlines, captions, and secondary text

Viewing Color Names 

When you hover over or click any color in the palette, its name appears, helping you understand its purpose. 

Note: All new ColorMag demos are designed using these preset palettes. You can instantly transform the demo’s appearance by selecting a different palette. 

Creating a Custom Palette #

You can create your own palette to match your brand colors. 

To add a custom palette: 

1. Go to Global Colors (Appearance → Customize → Global → Colors) 
2. Click Add Custom Palette 
3. Enter a name 
4. Select a base palette from the Extend Palette dropdown 
5. Click Add to create your palette 
6. Click any color to edit it using the color picker 

You can delete custom palettes from the same interface. 

Customizing Color Palette #

You can customize both the predefined palettes and your custom palettes. 

Edit Colors – Click on any area of the color palette to open it. Then, select any color in the palette to access the picker, where you can choose your preferred shade. 

Delete Palette – Click the delete icon beside a custom palette to remove it. You cannot delete predefined palettes. 

Saving Changes – When you select or edit a palette, the changes apply instantly. Click Publish to save them permanently. 

Theme Colors #

Below the palette section, you’ll find the Theme Colors panel, which defines the default colors for the major areas of your website. These settings act as global defaults that can be overridden for specific elements elsewhere in the Customizer. 

• Primary Color – Accent color used to highlight important elements across your site. Defaults to “Main Accent” from the active color palette. 
• Base – Global default color for all text elements. Defaults to “Regular Text” from the active color palette. 
• Links – Default colors for links throughout your site: 
  • First color circle: Normal link color (defaults to “Main Accent”)
  • Second color circle: Hover link color (defaults to “Secondary Accent”) 
• Headings – Global default color for all heading text (h1-h6). Defaults to “Title Text” from the active color palette. You can set different colors for different heading tags (h1-h6) from Typography settings. 
• Container Inside Background Pro  – The background for the content area inside your container. You can add either a solid color or background image. 

• Container Outside Background Pro– The background for the area outside your container. You can add either a solid color or background image. Note: This option only works if you have selected a Boxed Layout for your container width. 

Dark Skin (Dark Mode) Pro #

If you use the Color Switcher widget in the Header/Footer Builder, the Dark Skin settings define the colors used in dark mode. 

When visitors toggle the color switcher, the palette chosen under Skin Color becomes the second color scheme. 

Important: Even if individual elements use custom (non-global) colors, Dark Skin overrides them for a complete dark mode experience. 

Global Colors in Customizer #

To assign a global color to any element in the Customizer: 

1. Click the color icon in the element to open the color picker 
2. View the active palette colors shown in the top row 
3. Hover over a color circle to see its name 
4. Select the global color you want

When you choose a predefined color from the active palette, a small 🌐 globe icon appears in the top-left corner of the color indicator. 

Important: If you manually choose a custom color (not from the palette), it will not be updated when you change palettes. 

Global Colors in Gutenberg / Block Editor  #

ColorMag global colors can be used across Gutenberg blocks. When you update or change the palette from the Customizer, all blocks using Global Colors update automatically—no need to edit blocks individually. 

To use Global Colors in the Block Editor: 

1. Select any block 
2. Go to the Color settings 
3. Choose a color from the Theme section

All palette colors appear automatically in the block editor’s color picker. 

Global Colors in Elementor #

ColorMag Global Colors integrate seamlessly with Elementor. When you update or change your palette in the Customizer, Elementor styles using Global Colors update automatically. 

To use Global Colors in Elementor: 

1. Open an Elementor element’s color settings 
2. Click the 🌐 globe icon 
3. You’ll see:  
4. Elementor’s global colors 
5. ColorMag Global Colors (prefixed with ColorMag) 
6. Select any “ColorMag” global color

Note: ColorMag’s global colors are labeled with ColorMag for easy identification.