Die Farb-Ansicht

Gib eine einzige Markenfarbe als Ausgangsfarbe an, und die Farb-Ansicht leitet den Rest ab: eine vollständige OKLCH-Rampe, eine von der Marke getönte Neutral-Skala, die vier Funktionsfarben und die semantischen Rollen, die dein CSS tatsächlich nutzt — mit WCAG-Kontrast-Mindestwerten, die schon während der Arbeit erzwungen werden.

Die Werkzeugleiste

• Schritte — wie viele Werte jede Rampe bekommt (die vertraute 50–900 hat zehn). Die Helligkeit der einzelnen Schritte folgt einer Kurve, die vom Verhältnis der globalen Skala geformt wird, sodass die farbliche Progression und die typografische Progression ein gemeinsames Skelett teilen.
• Chroma-Kurve — wie die Sättigung über die Rampe verteilt wird (die Glockenkurve hält die Mitten kräftig und die Enden ruhig).
• WCAG-Stufe — der Kontrast-Mindestwert (AA oder AAA), den die semantische Ableitung einhalten muss.
• Dunkel — erzeugt die dunkle Variante jeder Rampe als eigene Ableitung, mit eigener Helligkeitskurve und einem leichten Chroma-Schub — keine Umkehrung des hellen Themes.
• Erweitert — progressive Einblendung der feineren Regler (Farbton-Versatz pro Rampe, Chroma-Multiplikator, Helligkeits-Mindestwert, P3-Farbraum). Ein Punkt auf der Schaltfläche zeigt an, wenn dort drin etwas von den Standardwerten abweicht.

Rampen und Rollen

Jede Palette ist eine Karte: die Ausgangsfarbe oben, die abgeleiteten Schritte darunter, mit hex-Werten und Schritt-Beschriftungen. Das Tool warnt, wenn benachbarte Schritte einander zu ähnlich sind, um noch unterscheidbar zu sein — eine Prüfung auf gerade noch wahrnehmbare Unterschiede (JND), keine ästhetische Meinung.

Paletten werden nach Rolle gruppiert, und die Gruppierung ist eine Konvention, die das Tool erzwingt, keine bloße Empfehlung:

• Marke — genau eine; die Ausgangsfarbe, auf die alles andere reagiert.
• Sekundär — so viele du willst; das „+” wohnt hier.
• Neutral — genau eine, getönt vom Markenfarbton, damit die Grautöne zur Familie gehören.
• Funktional — genau vier: danger, warning, success, info. Der feste Satz ist der Punkt — diese Namen sind das, was der nachgelagerte Code erwartet.

Seiten-Anker und Dark Mode

Die zwei Anker definieren den Seitenhintergrund in Hell und Dunkel. Der dunkle Anker folgt automatisch dem dunkelsten Markenschritt — „die Nacht ist von der Marke getönt” — bis du die Verbindung mit einer eigenen Wahl bewusst trennst; eine Schaltfläche zum erneuten Verknüpfen stellt sie wieder her.

Die Seitenleiste

Wähle ein beliebiges Farbfeld, und die Seitenleiste untersucht es: OKLCH-Komponenten, hex, Kontrast gegen beide Anker (WCAG-Verhältnis und APCA Lc nebeneinander) sowie Harmonie-Vorschläge, die aus der Ausgangsfarbe abgeleitet sind — ein tiefer Ton, ein Gegen-Farbton, ein Stahlton, eine Tönung — jeder nur einen Klick davon entfernt, eine Sekundärpalette zu werden.

Die Simulation von Sehschwächen (Protanopie, Deuteranopie, Tritanopie) rendert die gesamte Leinwand durch die entsprechenden Matrizen — eine Prüfung, ohne Wertung dargestellt.

Theorie

Der Lernbereich behandelt die Ideen ausführlich: OKLCH · Farbskalen · Kontrast · Dark Mode · Markenfarb-Systeme.