hallowebsite RGB Palette Variables for Kadence

DE | EN

Ergänzt zu jeder globalen Kadence-Palettenfarbe eine RGB-Variante (--global-palette1-rgb …), damit du deine Palette mit Transparenz in rgba() nutzen kannst. Overlays, Schatten und Tönungen folgen so immer deinen aktuellen Farben.

Download v1.0.1
Version
1.0.1
Aktualisiert
14. November 2026
Dateigröße
3,0 KB
Autor
hallowebsite

Überblick

hallowebsite RGB Palette Variables for Kadence macht deine globalen Kadence-Farben mit Transparenz nutzbar. Kadence gibt seine Palette als --global-palette1 … --global-palette9 aus – direkt in rgba() lassen sich diese Werte nicht verwenden. Das Plugin erzeugt zu jeder Farbe eine passende RGB-Triplet-Variable, z. B. --global-palette1-rgb. So schreibst du halbtransparente Overlays, Schatten und getönte Hintergründe, die immer deiner aktuellen Palette folgen.

Funktionen

  • --global-palette1-rgb … --global-palette9-rgb auf :root.
  • Liest die tatsächlich auf der Seite verwendeten Farben (Hex oder rgb) – Palettenänderungen werden automatisch übernommen.
  • Winziges Inline-Skript, keine zusätzlichen Dateien.
  • Anleitung mit Live-Vorschau unter Einstellungen → Kadence Palette RGB.

Verwendung

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

/* Weicher Schatten in der stärksten Textfarbe */
.card { box-shadow: 0 10px 30px rgba(var(--global-palette3-rgb), .12); }

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

Hinweise

  • Die Variablen setzt JavaScript direkt nach dem Laden der Seite. Für wichtige Styles einen Fallback angeben: rgba(var(--global-palette1-rgb, 0,0,0), .5).
  • Unterstützt werden die Kadence-Palettenfarben 1–9.
  • Erfordert das 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.