Kalium Documentation
HomeAccountPricingChangelog
  • Getting Started
    • Introduction
      • Before Getting Started
        • Hosting and Domain
        • WordPress Installation
        • Server Requirements
      • How To Purchase Kalium
    • Installation
      • Installing theme via WordPress
      • Installing theme via FTP
      • License Activation
      • Importing a Starter Site
      • Installing Required Plugins
      • Child Theme
      • Updating Kalium
    • License
      • Managing Licenses
      • Activation Scope
      • Prorating Plan Updates
    • Dashboard
    • Customizer
    • Migrating from Kalium 3 to 4
      • Migrating Automatically
      • Migrating Manually
  • General
    • Header
      • Layouts
      • Custom Header
        • Elements
      • Styling
      • Top Bar
      • Sticky Header
      • Mobile Menu
      • Other Options
      • In Page Options
    • Footer
      • Adding/Editing Content
      • Styling
    • Sidebars
      • Troubleshooting Sidebar
  • Post Types
    • Blog
      • Blog Page
      • Post Page
      • Creating a Blog Page
      • Creating a Blog Post
    • Portfolio
      • Portfolio Page
      • Project Page
      • Creating a Portfolio Page
      • Creating a Portfolio Item
        • Side Portfolio
        • Columned
        • Carousel
        • Zig Zag
        • Fullscreen
        • Lightbox
        • Design Your Own
    • WooCommerce
      • General Settings
        • Mini Cart
        • Free Shipping Bar
        • Product Badges
      • Product Catalog
        • Product Card
      • Product Page
      • Product Images
      • Cart & Checkout
      • My Account
      • Store Notice
    • Search Results
  • Typography
    • Fonts
      • How to Add a Font
        • Adding Adobe Fonts
        • Adding Self-Hosted Fonts
        • Adding External Fonts
      • Custom Selectors
      • Advanced Settings
    • Font Sizes
    • Typography Settings
  • Styling
    • Brand and Logo
    • Colors
    • Buttons
    • Forms
    • Layout
    • Link Styles
    • Site Frame
  • Translation
    • Translation introduction
    • Translating with WPML
    • Translating with Loco Translate
    • Translating with Poedit
    • Adding a Language Switcher
    • RTL Languages
  • Other
    • Social Icons
    • Image Placeholder
    • Breadcrumbs
    • Scroll to Top
    • Maintenance Mode
    • Lightbox
    • Custom CSS
  • Troubleshooting
    • Manage Options in Customizer
    • Bad Hosting Environment
Powered by GitBook
On this page
  • Base Palette
  • Global Theme Colors
  • Global Colors
  • Headings
  • Other Colors
  • CSS Color References
  1. Styling

Colors

PreviousBrand and LogoNextButtons

Last updated 9 months ago

Colors are a fundamental aspect of the theme, and understanding how to work with them will help you achieve the best results and enhance your site’s overall appearance.

To manage and edit colors go to Appearance -> Customize -> Styling -> Colors


Base Palette

The color palette defines the base colors of your site based on your brand guidelines.

It is a set of of 8 colors by default but you can add more colors by clicking the icon in upper part of colors strip.

Base palette colors are utilized to be used throughout all color pickers as references so when you update a color in the base palette, every other reference is updated automatically as well.

You can also choose from predefined palettes by clicking the palette icon.

After you save the palette, it appears in the list of Custom Palettes as Palette X where X is an ordered number:

You can also export or import existing palettes including current colors in the same dialog by clicking Export/Import tab:


Global Theme Colors

Theme palette colors are also recognized by both the Gutenberg and Elementor. This ensures consistency across your site’s design, allowing you to seamlessly apply your chosen color palette in different parts of your site, whether you’re using the Gutenberg blocks or Elementor’s widgets.


Global Colors

  • Links - Normal and hover color for every link in the theme.

  • Text - Default text color and muted text color.

  • Text Selection - Change how selected text looks when selected.


Headings

  • Headings H1-H6 - Default colors for all headings (as every heading size inherits from this value).

  • Heading 1 to Heading 6 - Custom color for every heading size.


Other Colors

  • Footer - Footer background, text, headings and link colors.

  • Site Background - The body background color.

  • Overlay - Default color of backdrop overlays for lightboxes.

CSS Color References

Every color provides a CSS variable reference of this form you can use throughout the site:

var(--k-color-1)
var(--k-color-2)
var(--k-color-3)
var(--k-color-4)
var(--k-color-5)
var(--k-color-6)
var(--k-color-7)
var(--k-color-8)
var(--k-color-9) /* custom added colors */

As well as their RGB variant:

var(--k-color-1-rgb)
var(--k-color-2-rgb)
var(--k-color-3-rgb)
var(--k-color-4-rgb)
var(--k-color-5-rgb)
var(--k-color-6-rgb)
var(--k-color-7-rgb)
var(--k-color-8-rgb)
var(--k-color-9-rgb) /* custom added colors */

So you can use with custom opacity for example:

background: rgba(var(--k-color-1-rgb), 0.5);

When the colors are modified, the icon will show up instead of the icon where you can save the current set of colors as a palette:

✏️
➕
➕
🎨
Default Color Palette
Custom colors can be saved as new palette
List of theme defined palettes with custom user palettes
Export and/or Import current palette colors and custom user palettes
Gutenberg Color Palette
Elementor Color Palette