visualife/color-palette-designer

Farbpaletten-Designer

Farben, die gut aussehen und den Kontrast erfüllen, entstehen aus einem Prozess: Farbtöne für die Stimmung wählen, dann die Helligkeit mit Mathematik korrigieren. Harmonieräder, 60-30-10 und Farbpsychologie-Diagramme sind Anfangsheuristiken ohne Nutzerforschung im Hintergrund. Kontrast, Zurückhaltung (ein Aktionsfarbton) und ein Akzent, der sich von seiner Umgebung abhebt, sind die Teile, die Bestand haben. Baue darauf auf.

Alle Zahlen stammen aus scripts/palette.mjs (abhängigkeitsfreies Node). Führe es aus, anstatt Verhältnisse oder OKLCH-Werte von Hand zu schätzen; handberechnete Kontraste sind oft genug falsch (die Forschung, aus der dieses Skill entstand, hatte mehrere Werte um 0,05 bis 0,15 daneben).

S=<skill-dir>/scripts/palette.mjs
node $S contrast '#767676' '#ffffff'        # 4.54:1, Noten, APCA Lc
node $S oklch '#3F6B4E'                     # exaktes OKLCH
node $S solve '#C0643F' '#FFFFFF' 4.5 darker   # Erhöhe nur L, bis es besteht
node $S ramp 155 0.12                       # 50-950 OKLCH-Rampe
node $S generate --hue 155 --chroma 0.07 --neutral-hue 95 --accent-offset -110 --format report
node $S generate ... --format css           # auch: css-light-dark | json | dtcg
node $S audit sage-wellness                 # eine kuratierte Paletten-ID oder eine beliebige rollenbasierte .json
node $S presets                             # Voreinstellungen für Bereichsaufteilung und Zustandsmischung
node $S ratio 70 25 5 --preset calm         # Validiere eine Bereichsaufteilung (Prozent der sichtbaren Fläche)
node $S states sage-wellness --css          # Gelöste Hover/Active/Disabled/Tint-Mischungen + Prüfungen
node $S dark midnight-terminal              # Dunkelmodus-Regeln D1-D11 (füge --light <id|datei>, --oled hinzu)
node $S cvd '#0072B2' '#D55E00' '#009E73'   # Farbblindheits-Seperation

audit, generate, dark, states und ratio beenden sich mit einem Fehlercode bei einem fehlschlagenden Paar oder einer FAIL-Regel. Verwende sie als Tor, bevor du dem Benutzer etwas zeigst. Für einen Dunkelmodus führen generate und audit die Dunkelmodus-Regeln automatisch aus.

Arbeitsablauf: Von der Kurzbeschreibung zur validierten Palette

1. Analysiere die Kurzbeschreibung. Markenfarben, Stimmungswörter, Branche, Zielgruppe (Alter, Sehfähigkeit), Modi (Hell, Dunkel oder beide), Konformität (AA standardmäßig; AAA Fließtext für Gesundheit, Behörden, ältere Zielgruppen). Wenn der Benutzer nur eine Stimmung angegeben hat, wähle einen Farbton aus der Entscheidungstabelle unten und nenne die Annahme in einem Satz, anstatt nachzufragen.
2. Wähle eine Strategie. Standard ist getönte neutrale + eine Primärfarbe (+ optional ein Akzent). Monochrom plus semantische Farben ist am sichersten. Verwende einen Komplementärkontrast nur, um den CTA hervorzuheben (Isolationseffekt). Triadische und tetradische Schemata gehören in Diagramme und Illustrationen, selten in UI-Chrome.
3. Verankere Farbton und Chroma. Mit einem Marken-Hex führe oklch aus und behalte seinen Farbton. Begrenze Chroma auf etwa 0,12 für erdige/Wellness-Paletten, 0,20-0,26 für lebendige/Technik-Paletten. Ohne eine Markenfarbe wähle einen Farbton, der sich von den offensichtlichen Mitbewerbern in der Kategorie unterscheidet.
4. Generiere. generate erstellt neutrale, primäre, akzentuierende und semantische Rollen für jeden Modus und löst die Helligkeit so, dass die Kontrastziele erreicht werden. Für eine manuell erstellte Palette baust du Rampen mit ramp und weist die Stufen den Rollen zu (Tabelle unten).
5. Validiere jedes Paar mit audit. Bei Fehlern verschiebe nur die Helligkeit (solve), niemals den Farbton; reduziere Chroma, wenn die Farbe den sRGB-Bereich verlässt. Jeder Fehler in den 15 kuratierten Paletten war ein Akzent mit mittlerer Helligkeit und hohem Chroma (OKLCH L etwa 0,60-0,77): zu hell für weißen Text, zu dunkel für dunklen Text, zu nah an Weiß für 3:1. Lösung: Abdunkeln auf L <= 0,55 und weißen Text verwenden, Aufhellen auf L >= 0,72 und dunklen Text verwenden, oder dekorativ mit Rand belassen.
6. Farbblindheitsprüfung mit cvd. Fallen Primär-, Erfolgs- und Fehlerfarbe zusammen (dE_OK < 0,10 unter jeder Simulation), trenne sie durch Helligkeit und fordere ein Symbol und eine Beschriftung, weil Farbtöne allein keine Bedeutung tragen können (WCAG 1.4.1).
7. APCA ist empfehlend. WCAG 3 hat noch keinen Kontrastalgorithmus angenommen (der Arbeitsentwurf vom September 2026 sagt, dies sei noch zu bestimmen), daher entscheidet WCAG 2.2 über Bestehen/Nichtbestehen. Melde APCA Lc als Warnung: Fließtext unter |Lc| 75 ist dünn (häufig im Dunkelmodus); unter 15 ist unsichtbar.
8. Definiere Zustände mit states, nicht von Hand. Hover- und Active-Prozentsätze hängen von der Palette ab: Flache Voreinstellungsprozentsätze hinterließen bei mindestens einem Zustandsschritt unter dL 0,03 (kaum sichtbar) bei 37 von 45 gemessenen Palette/Voreinstellungs-Kombinationen, und der Hover-Schritt allein bei 26. node $S states <palette> --preset standard --css löst den Mischprozentsatz und die Richtung (zu der von Text/Hintergrund, die On-Primary lesbar hält), prüft den Kontrast jedes Zustands und gibt color-mix(in oklab, ...) Variablen aus; generate --format css --states standard fügt sie jedem Modus hinzu. Deaktiviert: in Richtung Hintergrund gemischt plus ein nicht-farbliches Signal. Fokus: 2px Ring, Offset 2px, >= 3:1 gegen Hintergrund. Ausgewählt und Besucht benötigen ein nicht-farbliches Signal.
9. Wähle die Proportionen (siehe „Prozentregeln" unten) und nenne die Voreinstellung in den Auslieferungshinweisen.
10. Gib aus die Rollentabelle (Hex + exaktes OKLCH), die Bestehen/Nichtbestehen-Tabelle, CSS Custom Properties und optional Tailwind v4 @theme oder DTCG JSON. Beschrifte die Begründung als Konvention oder Beleg (siehe references/evidence-and-conventions.md), damit generierter Text niemals Farbpsychologie-Folklore wiederholt.
11. Zeige es. Biete an oder erstelle die Demoseite (unten), damit der Benutzer die Palette auf einem echten Layout beurteilt, nicht auf einem Farbmuster-Raster.

Rollenvertrag

Jede Palette definiert diese Rollen für jeden unterstützten Modus. Komponenten konsumieren Rollen, niemals rohe Hex-Werte.

Rolle	Zweck	Minimum
bg, surface, surface-2	Leinwand, Karten, erhöhte Paneele	unterscheidbar (OKLCH dL >= ~0,03)
border	dekorative Trennlinien	keine
border-strong	Eingabeumrandungen, Bedienelemente	3:1 auf bg (SC 1.4.11)
text	Fließtext	4,5:1 auf bg und Oberflächen (Ziel 7+)
text-muted	Sekundärtext	4,5:1 auf bg und Oberflächen
primary / on-primary	Hauptaktionsfüllung / Text darauf	Füllung 3:1 auf bg, Linktext 4,5:1; Text auf Füllung 4,5:1
accent / on-accent	optionaler zweiter Farbton	wie primary, wenn er Bedeutung trägt
success warning error info	Statustext und -symbole	4,5:1 auf bg; niemals farblich allein
focus-ring	Tastaturfokus	3:1 gegen benachbarte Farben

Zuordnung Rampe zu Rolle (50-950 Skala): Hell bg 50 oder weiß, surface weiß/50, surface-2 100, border 200, border-strong 500, text 900-950, text-muted 600, primary 600-700, on-primary weiß, focus primary-600. Dunkel: bg 950 (oder 900), surface 900, surface-2 800, border 800, border-strong 600, text 50-100, text-muted 400, primary 300-400, on-primary 950, focus primary-300. Behandle die Zuordnung als erste Schätzung und lass audit entscheiden.

Harte Regeln (WCAG 2.2 AA, sofern nicht AAA angefordert)

• Text 4,5:1; großer Text (>= 24px oder >= 18,66px fett) 3:1; UI-Komponenten und bedeutungsvolle Grafiken 3:1 (SC 1.4.11); AAA ist 7:1 Text, 4,5:1 großer Text.
• Dekorative Ränder können blass sein, aber eine Eingabeumrandung, die der einzige Hinweis für das Feld ist, muss 3:1 erreichen. Ein 1,3:1 „eleganter" Eingaberand ist ein Fehler.
• Farbe trägt niemals allein Bedeutung. Unterstreiche Textlinks oder gib ihnen 3:1 gegen den umgebenden Text plus einen Hover/Fokus-Hinweis; Fehler erhalten ein Symbol und eine Nachricht; Diagrammreihen erhalten direkte Beschriftungen oder Formen.
• Getönte Hintergründe ändern die Mathematik. Semantische Farben, die für Weiß optimiert sind, fallen auf einem warmen Papierhintergrund auf etwa 4,4:1; führe audit auf dem echten Hintergrund aus, nicht auf Weiß.
• Kontrast auf Verläufen und Fotos muss am schlechtesten Punkt (hellster und dunkelster Bereich) halten, oder füge eine Abdeckung hinzu.

Details, Formeln, farbblindheitssichere Sätze (Okabe-Ito) und APCA-Schwellenwerte: references/accessibility.md.

Arbeiten in OKLCH

• Verwende oklch(L C H) als Quelle der Wahrheit. L ist die wahrgenommene Helligkeit (0-1), daher sehen Farben mit gleichem L wirklich gleich hell aus; in HSL sind 50% Gelb und 50% Blau extrem unterschiedlich. Das Drehen des Farbtons in OKLCH behält die Helligkeit, weshalb Harmonieversatze dort funktionieren und nicht in HSL.
• Töne Neutrale mit dem Markenfarbton bei sehr niedrigem Chroma: etwa 0,005-0,015 nahe Weiß, 0,01-0,045 in Dunkeltönen. Warme Neutrale (Farbton 60-100) passen zu Wellness, Essen, Verlagswesen; kühle (240-270) zu SaaS, Finanzen, Entwicklertools. Vermeide isolierte reine Grautöne neben getönten.
• Rampenziele: L 0,985, 0,967, 0,928, 0,872, 0,707, 0,554, 0,446, 0,372, 0,279, 0,208, 0,129 für die Stufen 50-950, Chroma an beiden Enden abnehmend. Gamut-Mapping durch Reduzieren von Chroma, nicht durch Beschneiden; Browser beschneiden grob.
• Verläufe: interpoliere in oklab oder in oklch, um graue, matschige Mittelpunkte zu vermeiden; vermeide vollansichtige Dunkelverläufe mit nahezu null Chroma (Banding) oder füge subtiles Rauschen hinzu.
• Unterstützung (Ende 2026): oklch() Baseline seit 2023; color-mix() Weit verbreitet seit November 2025; relative Farbsyntax in Chrome 122+, Firefox 128+, Safari 18+; light-dark() erreicht „Weit verbreitet" am 13. November 2026. Gib einfache Custom Properties mit einem prefers-color-scheme plus [data-theme]-Override als Standardausgabe aus; biete light-dark() als kompakte Alternative an. In der relativen Farbsyntax ist l 0-1.

Entscheidungstabelle: Kurzbeschreibung zu Strategie

Kurzbeschreibungssignal	Neutral	Primär	Akzent	Modus	Ziel
Wellness, Bio, Spa, Tee	warm, H 70-100, C 0,008-0,02	Salbei/Moos/Teal, C 0,05-0,10, L ~0,50	analoge oder erdige Komplementärfarbe (Terrakotta, Ton)	hell	AA, Fließtext 7:1 bevorzugt
E-Commerce	neutral/warm, C <= 0,01	Marke	isolierter CTA-Farbton, der nirgendwo sonst verwendet wird	hell	AA
SaaS / B2B	kühl, H 250-270, C 0,01-0,04	Blau/Indigo/Violett	monochrom + semantisch	hell + dunkel	AA
Entwickler-Tool	kühl oder reines Grau	Blau/Violett/Grün, dunkel L 0,70-0,80	mono; Syntaxfarben nur im Code	dunkel zuerst + hell	AA, APCA prüfen
Agentur / Portfolio	cremefarbenes Off-White oder nahezu Schwarz	Schwarz/Weiß	ein elektrischer Akzent, mit Rändern, wenn er 3:1 nicht erfüllt	entweder	AA
Finanzen	kühles Marineblau	Marine/Blau	Gewinn/Verlust mit +/- und Pfeilen	hell (+ dunkel)	AA, AAA für Zahlen
Gesundheit	kühl neutral	Teal/Blau	ruhiges Grün	hell	AAA Fließtext
Kinder / Kreative	warme Creme	gesättigtes Violett/Blau	triadisch, jedes <= 10% Fläche	hell	AA

Ausgangspunkte: references/palettes.md (15 verifizierte Paletten mit CSS, OKLCH und Bestehen/Nichtbestehen-Tabellen). Wähle die nächstgelegene, passe Farbton und Chroma an, führe audit erneut aus.

Prozentregeln und Voreinstellungen

Bereichsaufteilungen sind ein Flächenbudget, kein Gesetz: 60-30-10 ist eine Innenarchitektur-Konvention ohne Nutzerstudie hinter den genauen Zahlen, aber ein kleiner Akzentanteil schützt den einen forschungsgestützten Effekt hier (ein CTA hebt sich nur ab, wenn sein Farbton selten ist). Anteile sind Prozent der sichtbaren Hintergrundfläche (Textfarbe wird nicht gezählt). Überprüfe eine Aufteilung mit ratio; messe eine echte Seite mit scripts/measure-area.js anstatt zu raten.

Voreinstellung	Aufteilung n-s-a	Verwendung für
classic	60-30-10	E-Commerce- und SaaS-Marketing, allgemeiner Standard
calm	70-25-5	Wellness, Gesundheit, Finanzen, Verlagswesen
dense-app	80-17-3	Dashboards, Admin, Entwicklertools (hell oder dunkel)
product-first	80-15-5	Kataloge, in denen Fotos die Farbe tragen; ein isolierter CTA-Farbton
editorial	70-27-3	Brutalistisch/Redaktionell: Ränder und Farbe tun die Arbeit
dark-showcase	70-22-8	Dunkles Portfolio/Agentur mit einem lebendigen Akzent
bold-brand	50-30-20	Kreative, Kampagnen, Kinder: Akzent kann führen

Regeln: Anteile summieren sich auf 100 (FAIL); Neutral ist der größte Anteil, >= 45; Akzent bleibt innerhalb des Bereichs der Voreinstellung (gesättigte Verläufe und Markenüberlagerungen zählen als Akzent); Primär hält >= 70% der Akzentfläche, sodass ein Aktionsfarbton führt; semantische Farben <= 2% im Ruhezustand; dunkle Themen halten Neutral >= 70. Zustandsvoreinstellungen (subtle 8/14/50, standard 12/20/60, strong 16/26/70 als Bodenprozentsätze für Hover/Active/Disabled, Tönungen 8/10/14) werden pro Palette von states erhöht, bis der Schritt sichtbar ist. Bereiche, Regeln A1-A7 und S1-S6, Richtungslogik und das Mess-Snippet: references/proportions-and-states.md.

Dunkelmodus

Ein dunkles Thema ist eine zweite Palette, niemals eine Umkehrung. Die Engine erzwingt die messbaren Regeln (node $S dark ..., auch ausgeführt von generate und audit); der Rest sind Implementierungsregeln, die von Hand anzuwenden sind. Vollständige Tabelle mit Schwellenwerten und Korrekturen: references/dark-mode-rules.md.

Gemessen (FAIL blockiert; WARN benötigt eine angegebene Begründung):

• D1 bg ist nicht reines Schwarz: OKLCH L 0,13-0,24 (echtes #000 nur für eine deklarierte OLED-Variante).
• D2 Text ist nicht reines Weiß: L 0,88-0,95. D3 Text/bg <= 17:1.
• D4 Erhöhung durch Helligkeit: bg < surface < surface-2, etwa +0,04 L pro Schritt; Schatten erhöhen auf Dunkel nicht.
• D5 Neutrale getönt, bg Chroma <= 0,045.
• D6 Primär ist entweder eine helle Füllung (L >= 0,70) mit dunklem On-Primary oder eine tiefe Füllung (L <= 0,58) mit weißem On-Primary; das Band 0,58-0,68 ist eine tote Zone. Füllung benötigt 3:1 auf bg und surface.
• D7 Gegen das helle Thema: gleicher Farbton (innerhalb von 10 Grad), heller, Chroma nicht höher (um 10-30% reduzieren).
• D8 Statusfarben für Dunkel nachjustiert: 4,5:1 auf bg und auf der erhöhten Oberfläche, mit Symbol und Text.
• D9 border-strong 3:1; dekorative Ränder bleiben sichtbar (dL >= 0,05). D11 focus ring 3:1.
• D10 APCA empfehlend: Text |Lc| >= 75, muted >= 45 (Ziel 60); dunkle Polarität legt dünnen Text offen, den WCAG 2 besteht.

Von Hand: niemals filter: invert verwenden (N1); bei Hover aufhellen anstatt abdunkeln (N3); kein Alpha-Text (N4); helle Fotos abdunkeln und helle/Mono-Logo-Varianten ausliefern (N5); kleine dünne Schriftarten vermeiden (N6); color-scheme und theme-color pro Schema setzen (N8); dem Betriebssystem mit einem Drei-Zustand-Umschalter und ohne Flackern folgen (N9); Diagrammfarben auf der dunklen Oberfläche erneut prüfen (N10). Der helle Modus liest sich für die meisten Benutzer mit normalem Sehvermögen besser, und der dunkle Modus hilft einigen Sehbehinderten, also biete beide an. Referenz-Dunkelpaletten und Token-Architektur: references/dark-mode-and-tokens.md.

Anti-Patterns, die zu erkennen sind

Drei oder mehr gesättigte Farbtöne in Chrome; der CTA-Farbton wird für Überschriften, Symbole und Abzeichen wiederverwendet; gesättigte Komplementärfarben bei gleichem L (Kanten vibrieren); grauer Text auf farbigen Hintergründen (verwende den Farbton des Hintergrunds bei angepasstem L); hellgrauer Text auf Off-White „minimalistisch" unter 4,5:1; Mid-L-Akzent mit weißem Text; outline: none ohne Ersatz; Hover- und Active-Zustände, die sich durch eine winzige Farbtonverschiebung unterscheiden (ändere L um 0,05-0,10); deaktiviert, das wie aktiviert aussieht; dieselbe gesättigte Markenfarbe unverändert im Dunkelmodus wiederverwendet;

…

[abgeschnitten für Übersetzung]