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