Kadence Palette RGB Helper

Kadence liefert mit seinen globalen Farbpaletten eine richtig gute Basis: --global-palette1 bis --global-palette9 stehen als CSS-Variablen zur Verfügung und lassen sich in Kadence-Blöcken sowie im Theme vielseitig einsetzen. In der Praxis ist mir aber immer wieder dieselbe Lücke begegnet: Sobald man feinere Abstufungen, RGBA-Overlays oder Utility-Workflows braucht, wird es unnötig umständlich.

Genau daraus ist der Kadence Palette RGB Helper entstanden – ein kleines, sehr leichtgewichtiges Plugin, das Kadence-Farben „weiterdenkt“ und dir zwei Dinge liefert:

1. RGB-Triplets für die Kadence-Paletten, damit rgba() sauber funktioniert
2. Solid „Strength“-Varianten (1–100), die wie eine auf Weiß gerechnete Deckkraft wirken
3. Utility-Classes (bg/text/border), damit man die Abstufungen ohne eigenes CSS direkt nutzen kann

In diesem Logpost beschreibe ich, warum das Plugin entstanden ist, wie es technisch funktioniert und welche Entscheidungen dahinter stecken.

---

Ausgangslage: Kadence-Paletten sind gut – aber nicht „workflow-ready“

Kadence stellt Farben typischerweise als HEX oder RGB-String in den globalen Variablen bereit, z. B.:

• --global-palette1: #123456;
• oder --global-palette1: rgb(18, 52, 86);

Für viele Anwendungsfälle reicht das. Sobald du aber z. B. ein Overlay brauchst, willst du so etwas schreiben:

.overlay {
  background: rgba(var(--global-palette1-rgb), 0.4);
}

Das Problem: Kadence liefert nicht zuverlässig ein RGB-Triplet, sondern je nach Setup ein HEX oder RGB. Du brauchst also entweder zusätzliche Variablen oder du musst die Farben per Hand pflegen – und genau das ist in einem skalierenden Designsystem die Sorte Arbeit, die man einmal automatisieren sollte.

---

Ziel 1: RGB-Triplets generieren (ohne Datenbank, ohne PHP-Overhead)

Der erste Schritt war simpel:
Aus --global-paletteX wird automatisch --global-paletteX-rgb.

Das Plugin liest die Kadence-Variablen im Browser aus (über getComputedStyle(document.documentElement)), parst sie (HEX oder rgb/rgba) und schreibt dann eine neue Variable auf :root:

• --global-palette1-rgb: 18, 52, 86;

Das ist bewusst reines Frontend/Runtime-JS, weil:

• Kadence die Variablen erst beim Rendern wirklich bereitstellt
• ich keine DB-Writes will
• ich keine komplizierte PHP-Parser-Logik brauche
• die Lösung überall funktioniert (Frontend + wp-admin Preview)

Damit war die erste Workflow-Lücke geschlossen: RGBA-Overlays sind jetzt „clean“.

---

Ziel 2: „Strength“-Varianten, aber als SOLID Farben (1–100)

Der nächste, entscheidende Schritt war:
Ich wollte Abstufungen wie „Palette 2 in 10% Stärke“ – aber nicht als Transparenz, sondern als echte Farbe.

Warum?

Transparenz ist im UI oft unpraktisch:

• Overlay-Farben wirken je nach Hintergrund anders
• Buttons, Badges, Cards sollen reproduzierbar aussehen
• Designer erwarten häufig „Tint“-Varianten (heller) statt „Opacity“-Varianten

Daher erzeugt das Plugin für jede Palette 100 Solid-Varianten, z. B.:

• --global-palette2-1 bis --global-palette2-100

Wichtig ist die Mathematik dahinter:
Die Variationen werden auf Weiß (#ffffff) gemischt, also so, als würde man rgba(original, strength) über weiß legen – aber das Ergebnis ist dann eine voll deckende rgb(...) Farbe, keine Transparenz.

Das bringt zwei starke Vorteile:

• Abstufungen sind konstant, unabhängig vom Hintergrund
• Man kann sie direkt überall einsetzen: Backgrounds, Borders, Text

Zusätzlich gibt es optional auch die Triplet-Varianten dazu:

• --global-paletteX-10-rgb: r, g, b;

---

Ziel 3: Utility-Classes, weil Variablen keine Klassen sind

Ein typischer Stolperstein im Alltag:

„Ich will einfach class="--global-palette2-10" nutzen.“

Geht nicht. CSS-Variablen sind keine Klassen – sie sind Werte.
Darum generiert das Plugin echte Utility-Classes, die direkt auf CSS-Properties mappen:

• .bg-paletteX-STEP → background-color
• .text-paletteX-STEP → color
• .border-paletteX-STEP → border-color

Damit werden Dinge möglich wie:

<div class="bg-palette1-9">Background</div>
<p class="text-palette3-30">Text</p>
<div class="border-palette9-60">Border</div>

Das ist besonders hilfreich in Gutenberg/Kadence, wo du schnell mal eine Klasse zuweisen willst, ohne Custom CSS anzufassen.

---

Technische Entscheidungen, die das Plugin „leicht“ halten

Ich wollte bewusst kein Plugin bauen, das:

• Optionen speichert
• Datenbank-Tabellen anlegt
• serverseitig kompliziert rendert
• Build-Prozesse braucht

Darum ist die Architektur simpel:

PHP

• registriert ein leeres Script-Handle
• hängt Inline-JS dran
• lädt es in Frontend und Admin (Preview in wp-admin)
• stellt eine kleine Settings-Seite bereit (Anleitung + Live-Demo)

JavaScript (Runtime)

• liest --global-palette1..9
• akzeptiert HEX und rgb/rgba
• setzt neue CSS-Variablen auf document.documentElement.style
• injiziert genau einen <style>-Tag für Utility-Classes
• läuft einmal pro Page Load

Das Ergebnis: keine externen Requests, kein DB-Overhead, keine Abhängigkeiten.

---

Was Version 1.4.0 „rund“ macht

In v1.4.0 sind die wichtigsten Teile zusammengewachsen:

✅ Stärke 1–100 statt grober Stufen

Statt nur weniger Presets gibt’s 100 Abstufungen. Das klingt viel, ist aber extrem praktisch, weil man:

• sehr fein „designen“ kann
• im UI präzise Tints bekommt
• bei Bedarf schnell justiert, ohne neue CSS-Regeln

✅ Solide Farben statt Opacity

Das ist der Kern: Konsistenz.
Der Satz aus dem Plugin trifft es perfekt:

Die „strength“-Variablen sind NICHT transparent.
Es sind echte Farben, gerechnet wie rgba(…) auf Weiß.

✅ Utility-Classes (bg/text/border)

Damit wird das Ganze nicht nur ein „Dev-Tool“, sondern sofort im Editor nutzbar.

✅ Settings-Seite mit Live Preview

Ich finde es wichtig, dass ein Tool wie dieses nicht „unsichtbar“ ist.
Darum gibt es in den Einstellungen:

• Erklärung der Variablen
• Beispiel-Code
• Live-Demo
• Swatches, die direkt die erzeugten Variablen anzeigen

So weiß man sofort: Kadence liefert die Palette, das Plugin greift – alles funktioniert.

---

Grenzen (bewusst) und wann ich erweitern würde

Das Plugin mischt auf Weiß. Das ist bewusst gewählt, weil:

• die meisten UI-Flächen hell sind
• die Tint-Logik für viele Layouts passt

Wenn du aber z. B. ein Dark-UI hast oder auf #111 mischen möchtest, kann man das sehr einfach erweitern: Hintergrundfarbe als HEX definieren und dann gegen diese Farbe blenden.

Außerdem gilt: Die Utility-Classes sind bewusst „simple“.
Kein Tailwind-Clone, kein riesiger Generator – nur genau das, was ich in Kadence-Projekten ständig brauche.

---

Fazit: Ein kleines Plugin, das Kadence im Alltag schneller macht

Der Kadence Palette RGB Helper ist am Ende genau das geworden, was ich wollte:

• Kadence-Paletten rein, Workflow-ready Farben raus
• RGBA-Overlays ohne Frickelei
• Solid Tints (1–100) ohne Opacity-Probleme
• Utility-Classes für Gutenberg/Kadence
• Keine DB, keine Abhängigkeiten, keine Performance-Bremse

Wenn du mit Kadence arbeitest und häufiger:

• Tints brauchst
• Overlays sauber bauen willst
• schnell im Editor Klassen setzen willst

…dann ist dieses Plugin genau die Art kleiner Helfer, die im Projektalltag richtig Zeit spart.

---

Ausblick (optional)

Wenn ich das Plugin weiter ausbaue, wären die nächsten sinnvollen Schritte:

• „Blend-Basis“ konfigurierbar machen (weiß → beliebiger Hintergrund)
• optional Steps als Presets (z. B. nur 5/10/20/30/40/60/80/90)
• optionale Utilitys für outline, fill (SVG) oder ring
• Debug-Mode: Anzeige, welche Kadence-Variablen gefunden wurden