Color Matchmaker
Von der Stimmung zur einsetzbaren Farbentscheidung — Farben, die zusammenpassen, mit klaren Rollen und echtem Mockup.
SKILL.md im offenen agentskills.io-Standard — direkt nutzbar in Claude, ChatGPT/Codex, Cursor, Copilot & Co.
Color Matchmaker ist ein KI-Skill für Farbpaletten und Farbsysteme — er findet zusammenpassende Farben, gibt jeder eine klare Rolle (Hintergrund, Text, Button, Akzent, Status), prüft Kontrast und Barrierefreiheit deterministisch und zeigt die Palette im echten Mockup. Er berät auch Menschen ohne Farbwissen in klarer Sprache — kein Zufallsgenerator, kein Logo-Generator.
Was dieser Skill macht
- Findet zusammenpassende Farben und gibt jeder eine **semantische Rolle** (Anchor, Canvas, Surface, Text, Accent, Border, Focus, Status)
- Übersetzt eine **Stimmung** oder einen festen Farbwert/ein Logo in ein vollständiges, einsetzbares Farbsystem
- Prüft **Kontrast & Barrierefreiheit deterministisch** (WCAG + APCA) und sagt, wofür jede Farbe taugt
- Trennt **Mood Colors** von **UI-safe Colors** und leitet die eine aus der anderen ab, ohne den Charakter zu verlieren
- Leitet **Farben aus Bildern** ab und unterscheidet Strukturfarben von Schatten, Lichtern, Hauttönen und Farbstichen
- **Repariert bestehende Paletten** mit minimalem Eingriff (Diagnose → Ursache → kleinste Korrektur → Vorher/Nachher)
- Baut ein passendes **Mockup** (responsives HTML/CSS oder reduziertes SVG) und exportiert **Design-Tokens** (CSS/OKLCH/SCSS/JSON/Tailwind)
Beschreibung
Color Matchmaker ist ein Skill für Farbpaletten und Farbsysteme — er beantwortet nicht nur „welche Farben passen zusammen", sondern „welche Farbe übernimmt welche Aufgabe". Das ist das Kernprinzip: **Eine Palette ist erst fertig, wenn jede Farbe eine Rolle hat** — Anchor (tragende dunkle Farbe), Canvas (ruhige Grundfläche), Accent (Charakter/Signal), plus Surface, Text, Muted, Border, Focus und Statusfarben, soweit der Anwendungsfall sie braucht. Der Skill trifft Entscheidungen statt endloser Rückfragen: „keine Ahnung" und „überrasch mich" sind gültige Antworten, er trifft sinnvolle Standardannahmen und macht sie kurz kenntlich. Er trennt konsequent **Mood Colors** (Atmosphäre, große Flächen) von **UI-safe Colors** (Text, Buttons, Links, Status) und leitet die eine aus der anderen ab, ohne den Charakter zu zerstören. Sieben Modi decken den Alltag ab: **Quick Match** (schnell zu einer brauchbaren Palette), **Vibe to Palette** (eine Stimmung wie „luxuriös, aber nicht arrogant" in ein Farbsystem übersetzen), **One Color In** (aus einer festen Marken-/Logofarbe ein ganzes System bauen), **Image Match** (Palette aus Foto/Logo/Moodboard ableiten), **Palette Rescue** (eine bestehende Palette minimal reparieren statt neu erfinden), **Color Roulette** (drei überraschende, kontrollierte Richtungen) und **Palette Playground** („mach es premiumiger/dunkler/wärmer" — die eine richtige Stellschraube drehen, nicht alles austauschen). Die Farbmathematik ist **deterministisch**: mitgelieferte Node-Skripte (ohne Abhängigkeiten) konvertieren Farbformate inklusive OKLCH, berechnen WCAG- und APCA-Kontrast, messen perzeptuelle Distanz (ΔE), leiten Interaktionszustände perzeptuell gleichmäßig ab und exportieren Design-Tokens (CSS, OKLCH, SCSS, JSON, Tailwind). Der Skill ist **ehrlich**: keine Farbpsychologie-Mythen, keine erfundene Farbtreue, kein „bestanden/nicht bestanden" ohne Zahlen, sondern die Aussage, wofür eine Farbe wirklich taugt. Am Ende steht ein passendes Mockup — responsives HTML/CSS bei digitalen, reduziertes SVG bei visuellen Anwendungen — damit die Farbwirkung sichtbar wird, nicht nur behauptet.
Beispiele
Getestet mit Claude Code
/color-matchmaker Hier das Logo für meine App Image Match für eine App. Ehrlich: Logo-Farben sind geschätzt. Das Pixel-Art-Logo ist farbreich, aber die Farben ordnen sich klar in Rollen: dunkles Violett trägt alles, Gold/Creme ist die Marke, Magenta glüht als Magie, Grün und Karmesin sind Statusfarben → dunkles Fantasy-App-Theme.
App-Palette (Dark, Rolle → Hex)
- Canvas
#1E1826· Surface#2A2136· Text#F1E9DA· Muted#A99BB5· Gold/Primary#E3C06A· Magenta/Magic#C15CE6· Grün/Success#8FB84E· Karmesin/Danger#C0392B
Kontrast (gemessen, WCAG)
| Paarung | Ratio | Urteil |
|---|---|---|
Text #F1E9DA auf Canvas | 14,3:1 | ✅ Fließtext |
Gold #E3C06A auf Canvas | 9,9:1 | ✅ Text, Zahlen, Headlines |
| Dunkel auf Gold (CTA) | 9,9:1 | ✅ Primär-Button |
Weiß auf Magenta-Fill #B03AD6 | 4,75:1 | ✅ Magenta-Button |
Weiß auf hellem Magenta #C15CE6 | 3,5:1 | ⚠ nur groß/fett |
Regeln: ✅ Gold = die eine Hauptaktion (dunkler Text drauf, nie weiß) + Währung/Zahlen · ✅ Magenta = Magie/Interaktion (Glow hell, Button in tieferer Twin #B03AD6 + Weiß) · ✅ Grün = Erfolg, Karmesin = Gefahr/Boss — klare Spielsignale · ✖ nicht alle fünf Farben gleich laut: Gold führt, Magenta ist Sidekick, Rest ist Status.
Fläche: ~75 % Dunkelviolett · ~15 % Gold + Cremetext · ~10 % Magenta/Grün/Rot als Signale. Light-Variante, Rarity-Farben (Common→Legendary) und Tailwind-Export auf Zuruf.
Kurz die Annahme: Website, heller Grund, „Character“-Level — Rot als Signal- und Aktionsfarbe, nicht als Fläche. Sag Bescheid, wenn's was anderes ist (Marke, App, Print, Social).
Signalrot — ein kräftiges Rot mit ruhigem Unterbau.
Kernpalette (Rolle → Hex)
- Anchor/Text
#241419· Canvas#FBF6F4· Surface#FFFFFF· Rot/Akzent#D7263D· Hover#BC1B32· Muted#6E585C
Kontrast (gemessen, WCAG)
| Paarung | Ratio | Urteil |
|---|---|---|
Text #241419 auf Canvas | 16,5:1 | ✅ Fließtext |
Weiß auf Rot #D7263D | 4,96:1 | ✅ Button-Text (knapp AA) |
Weiß auf Rot-tief #BC1B32 | 6,3:1 | ✅ Hover + kleiner Text |
Regeln: ✅ Weiß auf #D7263D für Buttons, Hover #BC1B32 für kleinen Text · ⚠ dunkler Text auf Rot nur groß/fett · ✖ kein rotes Vollflächen-Layout, kein roter Fließtext.
Fläche: ~70 % Kalkweiß · ~22 % Struktur · ~8 % Rot — genau das macht das Rot wertvoll. Dazu Safe/Character/Bold, Dark Mode und Token-Export (CSS/OKLCH/Tailwind) auf Zuruf.
/color-matchmaker Hier mein Logo Image Match. Ehrlich: Logo-Farben sind geschätzt, nicht exakt. Ich sehe einen Anthrazit-Schild (der Verlauf ist nur Formgebung, keine Markenfarbe), weiße Lettern und die Charakterfarbe: die Flamme Rot → Orange → Gelb. Anthrazit + Weiß sind die Neutralen, Orange ist der Star → dunkles UI mit Flammen-Akzent.
Application-Palette (Dark, Rolle → Hex)
- Canvas
#16181C· Surface#212429· Text#F4F5F7· Muted#A0A5AE· Flame/Accent#F97316· Ember#FFC24B· Flammrot#E23A0E
Kontrast (gemessen, WCAG)
| Paarung | Ratio | Urteil |
|---|---|---|
Text #F4F5F7 auf Canvas | 16,3:1 | ✅ Fließtext |
Orange #F97316 auf Canvas | 6,3:1 | ✅ Text/Link/Icons |
Dunkel #16181C auf Orange (CTA) | 6,3:1 | ✅ Button-Text |
Weiß auf Orange #F97316 | 2,8:1 | ✖ fällt durch |
Der wichtigste Punkt: oranger CTA = Fläche #F97316 + dunkler Text, nie weiß (2,8:1 fällt durch). ⚠ Flammrot nur für Verlaufsspitzen/LIVE-Badges. ✖ kein Anthrazit-Verlauf als UI-Farbe nachbauen — das war nur Logo-Formgebung.
Fläche: ~75 % Anthrazit · ~15 % Struktur · ~10 % Flamme. Light-Variante, Status-Farben (Win/Loss/Live) und Tailwind-Export auf Zuruf.
Was es nicht macht
- Kein Logo-, Grafik- oder Illustrationsgenerator — er gestaltet das Farbsystem, nicht die Grafik
- Keine Farbpsychologie-Mythen („Blau = Vertrauen") und keine erfundene Präzision (keine Bildschirm-, Druck- oder Pantone-Garantie)
- Behauptet keine exakte Farbwahrheit aus komprimierten/gefilterten Bildern — nennt Unsicherheit
- Verwirft keine Wunschfarbe, sondern leitet eine UI-sichere Variante ab und grenzt den Einsatz ein
- Ersetzt keinen vollständigen Accessibility-Audit im fertigen Produkt — die Checks sind ein Hilfsmittel
Kompatibilität & Technik
- Geprüft (intern)
- 6 Szenarien
- Empfohlene Laufzeit
- Claude Opus oder Sonnet; die deterministischen Skripte brauchen Node (ohne Zusatzpakete). Ohne Node rechnet der Skill in OKLCH von Hand und kennzeichnet die Werte als geschätzt.
- Modi
- Quick Match · Vibe to Palette · One Color In · Image Match · Palette Rescue · Color Roulette · Palette Playground
- Eingaben
- Kurzbeschreibung / Stimmung · Feste Farbe (HEX/RGB/HSL/OKLCH) oder Logo · Bild / Foto / Moodboard · bestehende Palette (zum Retten)
- Ausgabeformat
- Palette mit Rollen + gemessener Kontrasttabelle + Pairing-Regeln + Flächenverteilung + Varianten (Safe/Character/Bold, Light/Dark) + Mockup (HTML-CSS oder SVG) + Design-Token-Export
- Unterkategorie
- Farbpaletten & Design-Systeme
- Lizenz
- Proprietär
Sicherheitsprofil
Läuft komplett bei dir mit deiner eigenen KI — keine externe Runtime, keine laufenden Kosten.
Enthält ausführbaren Code oder führt Aktionen/Tools aus — vor der Nutzung kurz reinschauen.
Arbeitet offline mit dem, was du gibst — ruft von sich aus keine externen Dienste auf.
Lieferumfang
- color-matchmaker-1.0.0/12 Dateien
- .claude-plugin/marketplace.json
plugins/color-matchmaker/skills/color-matchmaker/12 Dateien
- SKILL.md
- manifest.json
references/6 Dateien
- color-matchmaker-accessibility.md
- color-matchmaker-checklist.md
- color-matchmaker-color-theory.md
- color-matchmaker-context-rules.md
- color-matchmaker-mood-vocabulary.md
- color-matchmaker-ui-ux.md
scripts/4 Dateien
- color-utils.mjs
- contrast-check.mjs
- export-tokens.mjs
- palette-derive.mjs
- .agents/skills/color-matchmaker/→ universell — gleicher Inhalt (Codex, Cursor, Copilot, Gemini, Windsurf, Cline)
- LICENSE.txt
Installation
Auch als Chat-Prompt nutzbar
Kein KI-Tool? Füg ihn in Claude, ChatGPT oder Gemini ein und nutze die Methode sofort.
Du bekommst die volle Methode. Nur 4 Helfer-Skript(e), die Teile automatisieren, laufen erst in der Installation.
Die Installation ist die volle Version — sie greift automatisch, führt ihre Skripte aus und lädt Referenzen bei Bedarf. Als Chat-Prompt fährst du die Methode selbst.
Zum Kopieren des paste-fertigen Prompts freischalten — danach in „Meine Skills".
Bewertungen
Noch keine Bewertungen – sei der/die Erste.
Hinweis
Farben wirken je nach Bildschirm, Material und Licht unterschiedlich — Color Matchmaker verspricht keine absolute Farbtreue. Für Druck ist die CMYK-Angabe eine Näherung; einen physischen Proof einplanen. Die deterministischen Skripte brauchen Node (ohne zusätzliche Pakete); ohne Node rechnet der Skill in OKLCH von Hand und weist seine Werte als geschätzt aus. Kontrast-/Barrierefreiheits-Checks sind ein Hilfsmittel, kein Ersatz für einen echten Accessibility-Audit im fertigen Produkt.
Änderungen
- v1.0.013.07.2026Erstveröffentlichung: rollenbasiertes Farbsystem (Anchor/Canvas/Accent + Surface/Text/Border/Focus/Status je nach Anwendungsfall), 7 Modi (Quick Match, Vibe to Palette, One Color In, Image Match, Palette Rescue, Color Roulette, Palette Playground), deterministische Node-Skripte ohne Abhängigkeiten (Farb-Konvertierung inkl. OKLCH, WCAG- + APCA-Kontrast, ΔE-Distanz, Paletten-Ableitung mit UI-sicherer Variante, Token-Export für CSS/OKLCH/SCSS/JSON/Tailwind), Mood- vs. UI-safe-Trennung, Kontext-Regeln für 10 Anwendungsfälle (Web, App, Mobile, Branding, Social, Präsentation, Print, Messe/Interior, Game-UI, Diagramme), Accessibility- & Farbvision-Prüfung und ein Vor-Ausgabe-Qualitätscheck. 6 References + 4 Skripte.
Häufige Fragen
Was macht Color Matchmaker?
Color Matchmaker ist ein KI-Skill für Farbpaletten und Farbsysteme — er findet zusammenpassende Farben, gibt jeder eine klare Rolle (Hintergrund, Text, Button, Akzent, Status), prüft Kontrast und Barrierefreiheit deterministisch und zeigt die Palette im echten Mockup. Er berät auch Menschen ohne Farbwissen in klarer Sprache — kein Zufallsgenerator, kein Logo-Generator.
Wie finde ich eine Farbpalette, die wirklich zusammenpasst?
Genau dafür ist Color Matchmaker da — der Skill findet zusammenpassende Farben und gibt jeder eine klare Rolle (Hintergrund, Text, Button, Akzent, Status), prüft den Kontrast mit echten Zahlen und zeigt die Palette direkt im Mockup, statt nur hübsche HEX-Codes auszuwerfen.
Ich habe schon eine Markenfarbe — kann Color Matchmaker eine Palette darum bauen?
Ja. Im Modus „One Color In" respektiert Color Matchmaker deine feste Farbe, leitet passende Neutraltöne, Text- und Akzentfarben sowie eine Hell- und Dunkel-Anwendung ab und erzeugt bei Bedarf eine UI-sichere Variante für Buttons/Links — ohne deine Farbe zu ersetzen.
Prüft der Skill auch Barrierefreiheit und Kontrast?
Ja, deterministisch. Color Matchmaker berechnet WCAG-Kontrastverhältnisse (plus APCA als zweite Meinung) mit mitgelieferten Skripten und sagt dir nicht nur „bestanden/nicht bestanden", sondern wofür eine Farbe taugt — Fließtext, nur großer Text, nur Fläche oder Rahmen.
Kann Color Matchmaker aus einem Logo oder Foto eine Palette ableiten?
Ja, im Modus „Image Match" liest der Skill das Bild und unterscheidet tragende Strukturfarben von Schatten, Lichtern, Hauttönen und Farbstichen. Er liefert eine Mood-Palette (Atmosphäre) und eine bereinigte Anwendungspalette mit Rollen — und nennt ehrlich, wo die Auswahl unsicher ist.
In welchen Formaten kann ich die Farben exportieren?
Color Matchmaker gibt HEX als eindeutige Referenz und auf Wunsch CSS-Custom-Properties, OKLCH, SCSS-Variablen, JSON-Design-Tokens oder eine Tailwind-Config aus — alle Tokens nach Rolle benannt (`--color-accent`), nicht nach Farbe (`--orange`).
Ersetzt der Skill einen Grafik- oder Logo-Generator?
Nein. Color Matchmaker gestaltet das Farbsystem, nicht die Grafik. Für fertige UI-/Frontend-Bausteine gibt es Frontend Design, für Social-/OG-Bilder den Social Preview Architect — Color Matchmaker liefert die Farben, die diese Bausteine tragen.
Mit welchen KI-Tools funktioniert Color Matchmaker?
Claude · ChatGPT/Codex · Cursor · Copilot · Gemini CLI · Windsurf · Cline
Wie setze ich Color Matchmaker ein?
Color Matchmaker ist eine SKILL.md im offenen agentskills.io-Standard: per Befehl installieren (npx) oder herunterladen und ins KI-Tool laden — Claude (Projects), ChatGPT (Custom GPT), Cursor, Copilot, Gemini CLI u. a. Kein Code nötig.