TomasValleDuran/color-theory

Farbtheorie für Oberflächen

Farbe im UI ist meist ein Helligkeits-Problem im Kostüm eines Farbtons. Hierarchie, Kontrast, Lesbarkeit und Dark Mode werden alle durch die Helligkeit bestimmt; der Farbton trägt Identität und Bedeutung; die Chroma (Sättigung) trägt Betonung. Arbeite in dieser Reihenfolge.

Das Werkzeug – verwende es anstatt zu raten

scripts/palette.py (Python 3, keine Abhängigkeiten) berechnet alles in OKLCH und mappt auf den sRGB-Farbraum. Ertaste niemals manuell ein Kontrastverhältnis oder erfinde eine Rampe von Hand, wenn es sich berechnen lässt.

S=<skill-dir>/scripts/palette.py   # <skill-dir> = das Basisverzeichnis, das beim Laden dieses Skills angezeigt wird
python3 $S system "#6d28d9"                    # vollständiges System: Rampen + Hell-/Dunkelrollen, alle Paare verifiziert
python3 $S system "#6d28d9" --format tailwind  # Tailwind v4 @theme + semantische Variablen (auch: css, json = DTCG)
python3 $S ramp "#0f766e" --format css         # eine 50–950 Rampe (Eingang auf den nächstgelegenen Schritt gesnappt)
python3 $S neutral "#0f766e" --tint 0.01       # Graurampe, in Richtung des Markenfarbtons getönt
python3 $S contrast "#fff" "#7c3aed"           # WCAG-Verhältnis + Stufen + APCA Lc
python3 $S cvd "#16a34a" "#dc2626" "#2563eb"   # Farbenblind-Simulation + konfuse Paare
python3 $S harmony "#6d28d9" --scheme split    # Farbton-Beziehungen in OKLCH
python3 $S convert "hsl(...)/#hex/oklch(...)"  # Notation-Konvertierung + wie lebendig die Farbe ist

system durchläuft automatisch Schritte entlang einer Rampe, wenn ein Paar fehlschlägt (z. B. verschiebt es text-muted dunkler, bis 4.5:1 erreicht ist) und gibt jede Anpassung aus – gib diese an den Benutzer weiter, es sind Designentscheidungen.

Arbeitsablauf: Von „Ich brauche Farben“ zu ausgelieferten Tokens

1. Finde den Anker. Vorhandene Markenfarbe? Verwende sie. Keine vorhanden? Leite sie aus der Persönlichkeit des Produkts ab (siehe Auswahl eines Farbtons unten) und schlage 2–3 Seeds mit einer einzeiligen Begründung vor, anstatt einer einzelnen willkürlichen Wahl.
2. Generiere das System mit palette.py system <seed>. Eine Akzentrampe, eine Neutralrampe und nur die Statusrampen, die das Produkt darstellt.
3. Ordne semantischen Rollen zu, verwende niemals Primitive in Komponenten (--color-accent, --color-text-muted, nicht --violet-600). Der Skill „Design-System-Ersteller“ behandelt die Token-Architektur ausführlich.
4. Verifiziere: Kontrast auf dem dargestellten Paar (Text auf seiner tatsächlichen Oberfläche, einschließlich Alpha/Overlays), beide Themes, CVD-Prüfung für jede farbcodierte Bedeutung (Diagramme, Status, Tags).
5. Wende zurückhaltend an (unten), dann betrachte es dargestellt.

Wie viel Farbe: Verteilung

• Neutrale erledigen ~90 % der Arbeit. Hintergründe, Oberflächen, Text, Rahmen. Ein UI, das auf guten Neutralen mit einem Akzent aufgebaut ist, wirkt fast immer professioneller als eines mit mehreren Farbtönen.
• 60-30-10 ist eine nützliche Plausibilitätsprüfung: ~60 % dominanter Neutralton, ~30 % sekundäre Oberflächen-/Neutralvariation, ~10 % Akzent. Wenn der Akzent ~10–15 % der Pixel überschreitet, bedeutet er nicht mehr „handle hier“.
• Eine gefüllte primäre Aktion pro Ansicht. Farbe auf dem Hintergrund eines Buttons liest sich von weitem als primär; farbiger Text liest sich als Link.
• Eine Farbe, eine Bedeutung. Wenn Violett „Marke/Interaktion“ bedeutet, verwende es nicht auch für einen Kategorie-Tag. Statusfarben müssen klar vom Akzent getrennt sein (das Tool hält ≥25° im OKLCH-Farbton).
• Farbe ist niemals das einzige Signal. ~8 % der Männer und ~0,5 % der Frauen haben eine Farbsehschwäche; kombiniere Farbe mit einem Icon, Label, Muster oder einer Position.

Auswahl eines Farbtons (wenn es keine Marke gibt)

Assoziationen sind kulturabhängig und schwach im Vergleich zur Ausführung – eine gut aufgebaute Palette in jedem Farbton ist besser als ein „psychologisch korrekter“ Farbton, der schlecht verwendet wird. Verwende sie als Entscheidungshilfen:

Farbtonfamilie	Typische UI-Lesart	Typische Produkte	Achtung
Blau / Indigo	Vertrauen, Ruhe, Kompetenz	Fintech, SaaS, Gesundheit, Enterprise	die generischste Wahl; erhöhe Chroma oder verschiebe zu Indigo/Cyan, um hervorzustechen
Violett	kreativ, Premium, „KI“	Kreativ-Tools, KI-Produkte	sehr gesättigtes Violett ist inzwischen ein Zeichen für „KI-Müll“
Grün / Teal	Wachstum, Geld, Gesundheit, Erfolg	Finanzen, Nachhaltigkeit, Wellness	Konflikt mit „Erfolg“-Status – verschiebe die Statusfarbe
Rot / Rose	Energie, Dringlichkeit, Leidenschaft	Lebensmittel, Medien, Unterhaltung	Konflikt mit „Gefahr“; verwende für Markenmomente, halte destruktive Aktionen getrennt
Orange / Bernstein	Wärme, Freundlichkeit, Aktion	Konsum, Lebensmittel, Marktplätze	dunkle Orangen werden braun; überprüfe Hellmodus-Füllungen
Gelb / Limette	Optimismus, Aufmerksamkeit	Konsum, verspielt	kann keinen weißen Text tragen; verwende dunklen Text auf gelben Füllungen oder verwende die Marke als Akzent-Subtle und wähle einen dunkleren Schritt für Füllungen (--hue-shift -15 hält Schattierungen golden statt oliv)
Beinahe-Neutral (Schwarz/Stein/Sand)	Luxus, Redaktionell, Werkzeug	Entwickler-Tools, Mode, Portfolios	benötigt typografisches und räumliches Handwerk, um nicht leer zu wirken

Regionale Hinweise, die wissenswert sind: Rot ist in China glücklich/festlich, bedeutet aber Verlust in westlichen Finanzen (und Gewinn in chinesischen/japanischen Aktientickern); Weiß wird in Teilen Ostasiens mit Trauer assoziiert. Für Finanz-UIs sollten Auf/Ab-Farben konfigurierbar sein.

Wahrnehmungsgetreue Farbe – warum OKLCH

HSL-Helligkeit lügt: hsl(60 100% 50%) (Gelb) und hsl(240 100% 50%) (Blau) teilen „L=50%“, unterscheiden sich aber enorm in der wahrgenommenen Helligkeit. Deshalb haben HSL-Rampen ungleichmäßige Kontraste und Dunkel-/Hellstufen, die über verschiedene Farbtöne hinweg nicht übereinstimmen.

OKLCH = L (wahrgenommene Helligkeit 0–1) · C (Chroma, ~0–0.37) · H (Farbtonwinkel). Gleiches L ≈ gleiche wahrgenommene Helligkeit über Farbtöne hinweg, daher:

• hat die gleiche Stufe über Rampen (alle -600) einen ähnlichen Kontrast gegen Weiß,
• kannst du den Farbton drehen, ohne die Helligkeit zu ändern (Harmonien, Statusfarben, die „passen“),
• kann der Dark Mode durch Überlegungen zu L abgeleitet werden.

Einschränkungen: Der sRGB-Farbraum ist unregelmäßig – jeder Farbton hat ein unterschiedliches maximales Chroma bei jedem L (Gelb erreicht seinen Höhepunkt nahe L≈0,95, Blau nahe L≈0,45). Das Tool führt ein Gamut-Mapping durch Reduzieren der Chroma durch, wobei L und H erhalten bleiben. Breitgamut-Farben (Display-P3) sind eine Verbesserung: deklariere zuerst den sRGB-Wert, dann den lebendigen P3/oklch()-Wert in @media (color-gamut: p3).

CSS unterstützt oklch() in allen modernen Browsern; verwende es in neuen Web-Projekten. Auf nativen Plattformen konvertiere in die Notation der Plattform (Hex/sRGB, Color(red:green:blue:), Color(0xFF…)) – das --notation hex-Flag des Tools hilft.

Rampen, Neutrale und Tönungen

• Rampen halten einen Farbton von Anfang bis Ende, sind am hellen Ende feiner abgestuft (dort leben Hintergründe und das Auge ist am empfindlichsten) und erreichen ihren Chroma-Höhepunkt in der Mitte der Rampe. 11 Stufen (50–950, Tailwind-Konvention) oder 12 (Radix-Konvention, jede Stufe hat eine benannte Aufgabe) – siehe references/ramps-and-roles.md für die Rollenzuordnung.
• Getönte Neutrale: Mische ein wenig des Markenfarbtons in Grautöne (Chroma ≈ 0,005–0,02). Es lässt das gesamte UI zusammenhängend wirken; reine #808080-Grautöne wirken neben einem gesättigten Akzent tot. Warme Marke → warme Grautöne; kühl → kühl.
• Verwende niemals reines Schwarz auf reinem Weiß für Fließtexte in Marken-UIs; beinahe-Schwarz (neutral-950) auf beinahe-Weiß reduziert Blendung. Reine schwarze Hintergründe im Dark Mode verursachen beim Scrollen auf OLED Verschmieren; verwende L ≈ 0,13–0,18.

Dark Mode ist keine Umkehrung

• Höhe geht heller, nicht schattiger-dunkler: Oberfläche > Hintergrund um ~0,03–0,06 L.
• Entsättige Akzente leicht und erhöhe ihre Helligkeit; gesättigte Mitteltöne vibrieren auf dunklen Hintergründen.
• Fließtext leicht off-white (neutral-50/100), zurückgenommener Text um neutral-400.
• Füllungen wechseln ihr Label oft zu dunklem Text (das Tool entscheidet anhand des Kontrasts).
• Messe jedes Paar neu; Kontrast überlebt eine Umkehrung nicht. Siehe references/dark-mode.md.

Kontrast – die Standards

Paar	WCAG 2.2 AA	AAA	APCA-Richtlinie (beratend)
Fließtext (<24px / <18.66px fett)	4.5:1	7:1	Lc 75+ (90 bevorzugt)
Großer Text (≥24px oder ≥18.66px fett)	3:1	4.5:1	Lc 60+
UI-Komponenten und grafische Objekte, die zum Verständnis notwendig sind (Eingaberahmen, Icons, Fokusringe, Diagramm-Markierungen)	3:1 (SC 1.4.11)	—	Lc 45+
Deaktivierte Steuerelemente, dekorative Elemente, Logos	ausgenommen	—	—

WCAG 2.x ist die gesetzliche/Compliance-Baseline (ADA, EN 301 549 / European Accessibility Act). APCA (der WCAG 3-Kandidat) modelliert die Wahrnehmung besser, besonders für Dark Mode und hellen Text, aber WCAG 3 ist nicht final – erfülle WCAG 2.2 AA und verwende APCA als zweite Meinung. Details, Fokusring-Regeln und Fallstricke in references/contrast-and-cvd.md.

Verläufe, Overlays und Alpha

• Interpoliere Verläufe in oklab (glatt, kein matschiger Mittelbereich); verwende in oklch für mehrfarbige Durchläufe, die durch die Mitte grau werden würden. Halte die Stopps in der Helligkeit nahe beieinander für Hintergründe hinter Text.
• Text über Bildern: ein Scrim (Verlaufs-Overlay) oder eine solide Unterlage; messe den schlechtesten Bereich.
• Alpha-Farben (/50, rgba) ändern den Kontrast je nach Untergrund. Bevorzuge solide Tokens für Text; reserviere Alpha für Overlays, Hover-Zustände und Schatten.

Datenvisualisierung

Kategoriale Paletten benötigen ungefähr gleiche Helligkeit und maximale Farbtrennung; sequenzielle Paletten variieren die Helligkeit monoton; divergierende Paletten teilen einen neutralen Mittelpunkt. Verwende den Skill dataviz, falls verfügbar – er enthält eine validierte Palettenmethode. Führe immer palette.py cvd auf Diagramm-Reihenfarben aus.

Checkliste zum Überprüfen von Farben anderer

• Jedes Text/Hintergrund-Paar in beiden Themes gemessen (nicht geschätzt)
• Eingaberahmen, Fokusringe, Icons, die Bedeutung vermitteln ≥ 3:1
• Keine rohen Hex-/RGB-Werte in Komponenten; nur semantische Tokens
• Ein Akzent, nur für interaktive/primäre Bedeutung verwendet
• Statusfarben unterscheiden sich vom Akzent und untereinander unter CVD-Simulation
• Neutrale konsistent getönt (keine Mischung aus kühlen und warmen Grautönen)
• Dark Mode entworfen (hellere Oberflächen für Höhe, angepasste Akzente), nicht invertiert
• Bedeutung niemals nur durch Farbe vermittelt

Für ein vollständiges Farbsystem-Audit mit nach Schweregrad geordneten Ergebnissen ist der Skill better-colors hervorragend; zum Auswählen/Ableiten/Generieren bleib hier.

Referenzen

• references/ramps-and-roles.md — schrittweise Rollenzuordnung (Tailwind 50–950 und Radix 1–12), Zustandsfarben (Hover/Aktiv/Deaktiviert/Ausgewählt)
• references/dark-mode.md — Dark-Theme-Konstruktion, Höhe, Plattformspezifikationen (iOS semantische Farben, Material tonale Oberflächen)
• references/contrast-and-cvd.md — WCAG 2.2 Details, APCA-Stufen, Fokusindikatoren, CVD-Designregeln
• references/harmony-and-brand.md — Harmonieschemata, Ableitung sekundärer Farben, Marke-zu-UI-Übersetzung, Farbtemperatur, simultaner Kontrast