Colors

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.

Default Color Palette

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:

Custom colors can be saved as new palette

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

List of theme defined palettes with custom user palettes

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

Export and/or Import current palette colors and custom user palettes

---

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.

Gutenberg Color Palette

Elementor Color Palette

---

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);