Theme colors settings overview

The colors are part of a website’s identity, and their customization is essential. Our color picker supports Hex codes (like #FA4FBCA), and RGBA (like RGBA (213,152,65,0.4)) and it has sliders for transparency and color intensity.

The main difference between them is that RGBA has a transparency value, while Hex Codes do not.

There are two different ways to use theme colors in IonMag:

  • Change Colors Using Hex Codes
  • Change Colors Using RGBA

Social Icons 1

What can I change?

The Theme Colors Panel comes with dedicated sections for various areas of your website. Each one has multiple elements and a color picker that gives you the flexibility to customize everything, the way you always wanted.
Theme color


In IonMag > Theme Panel > Theme Color, you have four areas to manage colors for your website:

  • General theme colors – Set or change colors for the Theme accent (hover, links, buttons, Ajax load animation color) and Background.
  • Header section – This area allows you to set or change colors for Top Menu (Background, Top menu text, Top menu text hover, Social Icons, Social Icons hover color), Main Menu (Menu background, Active and Hover, Menu text color) and Header (background color).
  • Footer section – In this area, you can customize the colors for footer and sub-footer (both background and text color)
  • Content area – This section allows you to add or change the color for posts (title, blocks, author name, text, blockquote, and H1, H2, H3, H4, H5, H6 Color) and pages (title, text and H1, H2, H3, H4, H5, H6 Color).

Note: When you set a color as the background, your website will automatically change to the boxed version.