hallowebsite RGB Palette Variables for Kadence

DE | EN

Adds an RGB version of each Kadence global palette colour (--global-palette1-rgb …), so you can use your palette with transparency in rgba(). Overlays, shadows and tints then always follow your current colours.

Download v1.0.1
Version
1.0.1
Updated
14. November 2026
File size
3,0 KB
Author
hallowebsite

Overview

hallowebsite RGB Palette Variables for Kadence makes your Kadence global colours usable with transparency. Kadence outputs its palette as --global-palette1 … --global-palette9, which can't be used directly inside rgba(). This plugin creates a matching RGB triplet variable for each colour, e.g. --global-palette1-rgb. You can then write semi-transparent overlays, shadows and tinted backgrounds that always follow your current palette.

Features

  • --global-palette1-rgb … --global-palette9-rgb on :root.
  • Reads the colours actually used on the page (hex or rgb), so palette changes are picked up automatically.
  • A tiny inline script with no extra files.
  • An instructions card with a live preview under Settings → Kadence Palette RGB.

Usage

/* 50 % overlay in accent colour */
.hero::after { background-color: rgba(var(--global-palette1-rgb), .5); }

/* Soft shadow in the strongest text colour */
.card { box-shadow: 0 10px 30px rgba(var(--global-palette3-rgb), .12); }

/* Tinted section */
.section-tint { background: rgba(var(--global-palette2-rgb), .08); }

Notes

  • The variables are set by JavaScript right after the page loads. Add a fallback for critical styles: rgba(var(--global-palette1-rgb, 0,0,0), .5).
  • Kadence palette colours 1–9 are supported.
  • Requires the Kadence theme.

Changelog

Changed:
- Rebranding: neuer Name „hallowebsite RGB Palette Variables for Kadence“, Autor hallowebsite, Plugin-URI https://hallowebsite.de/plugins/rgb-palette-variables-for-kadence/
- Keine funktionalen Änderungen.