Die Kobold-
Werkstatt

Flinke Browser-Werkzeuge, die den Kreativen die wiederkehrenden Handgriffe abnehmen. Jeder Kobold löst eine Sache — richtig gut. Kein Login, kein Server: alles läuft lokal auf deinem Gerät.

// acht Helfer im Dienst · mehr in Arbeit

Farbe & Optik

Farbkobold

Farben & Kontrast

Paletten bauen, Kontraste nach WCAG prüfen, OKLCH-Ramps erzeugen und Farben direkt aus Bildern ziehen. Export als CSS-Variablen, JSON oder Tailwind.

WCAG-MatrixOKLCH-RampsBild → PaletteFarbenblind-Check

öffnen →

Würfelkobold

Farbwelten

Harmonische Paletten würfeln — nach Stimmungsbegriffen aus einer Wolke (über 100) oder rein zufällig. Farben fixieren, den Rest neu würfeln, direkt in den Farbkobold schicken.

Begriffs-WolkeHarmonienFixierenOKLCH

öffnen →

Schattenkobold

Schatten & Verläufe

Realistische, geschichtete box-shadows über wenige Regler — plus ein Verlaufs-Generator mit OKLCH-Interpolation für saubere Übergänge. Live-Vorschau, CSS-Export.

Geschichtete SchattenVerläufeOKLCHCSS-Export

öffnen →

Radiuskobold

Ecken & Rahmen

Runde Ecken – gleich, pro Ecke oder als organische Blob-Form – plus Rahmen und Kontur-Ring. Dazu eine konsistente Radius-Skala als Tokens. Live-Vorschau, CSS-Export.

border-radiusBlob-FormenRahmen & RingRadius-Tokens

öffnen →

Typografie & Maß

AaAaAa

Typokobold

Schrift & Rhythmus

Modulare Typo-Skala mit echten Fonts, live vorschaubar. Fließende clamp()-Werte für responsive Größen, dazu passende Zeilenhöhen. Export als CSS und Tailwind.

Modulare Skalaclamp() fließendLive-FontsZeilenhöhen

öffnen →

Fließkobold

Fließende Werte

Fertige clamp()-Werte für responsive Größen — Einzelwerte für Schrift, Abstand und Breite sowie eine komplette Raum-Skala. Mit Live-Vorschau, die beim Fensterziehen mitfließt.

clamp()-RechnerRaum-SkalaLive-VorschauCSS-Export

öffnen →