Color Matchmaker
From a mood to a usable color decision — colors that go together, with clear roles and a real mockup.
SKILL.md in the open agentskills.io standard — works directly in Claude, ChatGPT/Codex, Cursor, Copilot & more.
Color Matchmaker is an AI skill for color palettes and color schemes — it finds colors that work together, gives each one a clear role (background, text, button, accent, status), checks contrast and accessibility deterministically, and shows the palette in a real mockup. It advises people with no color knowledge in plain language — not a random generator, not a logo generator.
What this skill does
- Finds colors that work together and gives each a **semantic role** (Anchor, Canvas, Surface, Text, Accent, Border, Focus, Status)
- Turns a **mood** or a fixed color/logo into a complete, usable color system
- Checks **contrast & accessibility deterministically** (WCAG + APCA) and says what each color is good for
- Separates **mood colors** from **UI-safe colors** and derives one from the other without losing character
- Derives **colors from images**, separating structural colors from shadows, highlights, skin tones and casts
- **Rescues existing palettes** with minimal changes (diagnosis → cause → smallest fix → before/after)
- Builds a fitting **mockup** (responsive HTML/CSS or reduced SVG) and exports **design tokens** (CSS/OKLCH/SCSS/JSON/Tailwind)
Description
Color Matchmaker is a skill for color palettes and color systems — it answers not just "which colors go together" but "which color does which job". That's the core rule: **a palette isn't finished until every color has a role** — Anchor (the load-bearing dark), Canvas (the calm base), Accent (character/signal), plus Surface, Text, Muted, Border, Focus and status colors as far as the use-case needs them. The skill makes decisions instead of endless questions: "no idea" and "surprise me" are valid answers; it makes sensible default assumptions and states them briefly. It consistently separates **mood colors** (atmosphere, large areas) from **UI-safe colors** (text, buttons, links, status) and derives one from the other without destroying the character. Seven modes cover everyday work: **Quick Match** (fast to a usable palette), **Vibe to Palette** (turn a mood like "luxurious but not arrogant" into a color system), **One Color In** (build a full system from one fixed brand/logo color), **Image Match** (derive a palette from a photo/logo/moodboard), **Palette Rescue** (minimally fix an existing palette instead of rebuilding it), **Color Roulette** (three surprising but controlled directions) and **Palette Playground** ("make it more premium/darker/warmer" — turn the one right dial, not everything). The color math is **deterministic**: bundled zero-dependency Node scripts convert color formats including OKLCH, compute WCAG and APCA contrast, measure perceptual distance (ΔE), derive interaction states perceptually evenly, and export design tokens (CSS, OKLCH, SCSS, JSON, Tailwind). The skill is **honest**: no color-psychology myths, no invented color fidelity, no "pass/fail" without numbers — instead it tells you what a color is genuinely good for. It closes with a fitting mockup — responsive HTML/CSS for digital, reduced SVG for visual use-cases — so the color effect is shown, not just claimed.
Examples
Tested with Claude Code
/color-matchmaker Here's the logo for my app Image Match for an app. Honestly: logo colors are estimated. The pixel-art logo is color-rich, but the colors sort cleanly into roles: dark violet carries everything, gold/cream is the brand, magenta glows as magic, green and crimson are status colors → a dark fantasy app theme.
App palette (dark, role → hex)
- Canvas
#1E1826· Surface#2A2136· Text#F1E9DA· Muted#A99BB5· Gold/primary#E3C06A· Magenta/magic#C15CE6· Green/success#8FB84E· Crimson/danger#C0392B
Contrast (measured, WCAG)
| Pairing | Ratio | Verdict |
|---|---|---|
text #F1E9DA on canvas | 14.3:1 | ✅ body text |
gold #E3C06A on canvas | 9.9:1 | ✅ text, numbers, headlines |
| dark on gold (CTA) | 9.9:1 | ✅ primary button |
white on magenta fill #B03AD6 | 4.75:1 | ✅ magenta button |
white on light magenta #C15CE6 | 3.5:1 | ⚠ large/bold only |
Rules: ✅ gold = the one primary action (dark text on it, never white) + currency/numbers · ✅ magenta = magic/interaction (glow light, button in the deeper twin #B03AD6 + white) · ✅ green = success, crimson = danger/boss — clear game signals · ✖ not all five colors equally loud: gold leads, magenta is the sidekick, the rest is status.
Area: ~75% dark violet · ~15% gold + cream text · ~10% magenta/green/red as signals. Light variant, rarity colors (common→legendary) and Tailwind export on request.
One quick assumption: website, light ground, “Character” level — red as a signal/action color, not a fill. Tell me if it's something else (brand, app, print, social).
Signal Red — a bold red on a calm base.
Core palette (role → hex)
- Anchor/text
#241419· Canvas#FBF6F4· Surface#FFFFFF· Red/accent#D7263D· Hover#BC1B32· Muted#6E585C
Contrast (measured, WCAG)
| Pairing | Ratio | Verdict |
|---|---|---|
text #241419 on canvas | 16.5:1 | ✅ body text |
white on red #D7263D | 4.96:1 | ✅ button text (just AA) |
white on deep red #BC1B32 | 6.3:1 | ✅ hover + small text |
Rules: ✅ white on #D7263D for buttons, hover #BC1B32 for small text · ⚠ dark text on red only large/bold · ✖ no full-bleed red layout, no red body text.
Area: ~70% off-white · ~22% structure · ~8% red — that scarcity is what makes the red valuable. Safe/Character/Bold, dark mode and token export (CSS/OKLCH/Tailwind) on request.
/color-matchmaker Here's my logo Image Match. Honestly: logo colors are estimated, not exact. I see a charcoal shield (the gradient is just shaping, not a brand color), white lettering, and the character color: the flame red → orange → yellow. Charcoal + white are the neutrals, orange is the star → a dark UI with a flame accent.
Application palette (dark, role → hex)
- Canvas
#16181C· Surface#212429· Text#F4F5F7· Muted#A0A5AE· Flame/accent#F97316· Ember#FFC24B· Flame-red#E23A0E
Contrast (measured, WCAG)
| Pairing | Ratio | Verdict |
|---|---|---|
text #F4F5F7 on canvas | 16.3:1 | ✅ body text |
orange #F97316 on canvas | 6.3:1 | ✅ text/link/icons |
dark #16181C on orange (CTA) | 6.3:1 | ✅ button text |
white on orange #F97316 | 2.8:1 | ✖ fails |
The key point: the orange CTA = fill #F97316 + dark text, never white (2.8:1 fails). ⚠ flame-red only for gradient tips / LIVE badges. ✖ don't rebuild the charcoal gradient as a UI color — that was just logo shaping.
Area: ~75% charcoal · ~15% structure · ~10% flame. Light variant, status colors (win/loss/live) and Tailwind export on request.
What it does not do
- Not a logo, graphic or illustration generator — it designs the color system, not the artwork
- No color-psychology myths ("blue = trust") and no invented precision (no screen, print or Pantone guarantee)
- Claims no exact color truth from compressed/filtered images — it states the uncertainty
- Never drops a wanted color — it derives a UI-safe variant and constrains its use instead
- Not a substitute for a full accessibility audit of the finished product — the checks are an aid
Compatibility & tech
- Tested (internal)
- 6 scenarios
- Recommended runtime
- Claude Opus or Sonnet; the deterministic scripts need Node (no extra packages). Without Node the skill reasons in OKLCH by hand and labels its numbers as estimates.
- Modes
- Quick Match · Vibe to Palette · One Color In · Image Match · Palette Rescue · Color Roulette · Palette Playground
- Inputs
- short brief / mood · a fixed color (HEX/RGB/HSL/OKLCH) or logo · image / photo / moodboard · an existing palette (to rescue)
- Output format
- Palette with roles + a measured contrast table + pairing rules + area distribution + variants (Safe/Character/Bold, Light/Dark) + a mockup (HTML/CSS or SVG) + design-token export
- Subcategory
- Color palettes & design systems
- License
- Proprietär
Security profile
Runs entirely on your machine with your own AI — no external runtime, no running costs.
Contains executable code or runs actions/tools — take a quick look before using.
Works offline with what you provide — does not call external services on its own.
What you get
- color-matchmaker-1.0.0/12 files
- .claude-plugin/marketplace.json
plugins/color-matchmaker/skills/color-matchmaker/12 files
- SKILL.md
- manifest.json
references/6 files
- 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 files
- color-utils.mjs
- contrast-check.mjs
- export-tokens.mjs
- palette-derive.mjs
- .agents/skills/color-matchmaker/→ universal — same content (Codex, Cursor, Copilot, Gemini, Windsurf, Cline)
- LICENSE.txt
Installation
Also works as a chat prompt
No AI tool? Paste it into Claude, ChatGPT or Gemini and use the method right away.
You get the full method. Only 4 helper script(s) that automate parts of it run once installed.
Installing is the full version — it triggers automatically, runs its scripts and loads references as needed. As a chat prompt you drive the method by hand.
Unlock to copy the ready-to-paste prompt — then in “My Skills”.
Reviews
No reviews yet – be the first.
Note
Colors look different across screens, materials and lighting — Color Matchmaker promises no absolute color fidelity. For print, CMYK is an approximation; plan a physical proof. The deterministic scripts need Node (no extra packages); without Node the skill reasons in OKLCH by hand and labels its numbers as estimates. The contrast/accessibility checks are an aid, not a substitute for a full accessibility audit of the finished product.
Changelog
- v1.0.013.07.2026Initial release: role-based color system (Anchor/Canvas/Accent + Surface/Text/Border/Focus/Status as the use-case needs), 7 modes (Quick Match, Vibe to Palette, One Color In, Image Match, Palette Rescue, Color Roulette, Palette Playground), zero-dependency Node scripts (color conversion incl. OKLCH, WCAG + APCA contrast, ΔE distance, palette derivation with a UI-safe variant, token export for CSS/OKLCH/SCSS/JSON/Tailwind), mood-vs-UI-safe separation, context rules for 10 use-cases (web, app, mobile, branding, social, presentation, print, booth/interior, game UI, charts), accessibility & color-vision checks and a pre-output quality gate. 6 references + 4 scripts.
Frequently asked questions
What does Color Matchmaker do?
Color Matchmaker is an AI skill for color palettes and color schemes — it finds colors that work together, gives each one a clear role (background, text, button, accent, status), checks contrast and accessibility deterministically, and shows the palette in a real mockup. It advises people with no color knowledge in plain language — not a random generator, not a logo generator.
How do I build a color palette that actually works together?
That's exactly what Color Matchmaker does — it finds colors that go together and gives each one a clear role (background, text, button, accent, status), checks contrast with real numbers, and shows the palette in a mockup instead of dumping pretty hex codes.
I already have a brand color — can Color Matchmaker build a palette around it?
Yes. In "One Color In" mode, Color Matchmaker respects your fixed color, derives matching neutrals, text and accent colors plus a light and a dark application, and adds a UI-safe variant for buttons/links when needed — without replacing your color.
Does the skill check accessibility and contrast?
Yes, deterministically. Color Matchmaker computes WCAG contrast ratios (plus APCA as a second opinion) with bundled scripts and tells you not just "pass/fail" but what a color is good for — body text, large text only, or fills/borders only.
Can Color Matchmaker pull a palette from a logo or photo?
Yes, in "Image Match" mode it reads the image and separates load-bearing structural colors from shadows, highlights, skin tones and color casts. It returns a mood palette (atmosphere) and a cleaned application palette with roles — and states honestly where the extraction is uncertain.
Which export formats does it support?
Color Matchmaker gives HEX as the canonical reference and, on request, CSS custom properties, OKLCH, SCSS variables, JSON design tokens or a Tailwind config — every token named by role (`--color-accent`), not by hue (`--orange`).
Does it replace a graphic or logo generator?
No. Color Matchmaker designs the color system, not the graphic. For finished UI/frontend building blocks there's Frontend Design, and for social/OG images the Social Preview Architect — Color Matchmaker supplies the colors those pieces are built on.
Which AI tools does Color Matchmaker work with?
Claude · ChatGPT/Codex · Cursor · Copilot · Gemini CLI · Windsurf · Cline
How do I use Color Matchmaker?
Color Matchmaker is a SKILL.md in the open agentskills.io standard: install it with one command (npx) or download it and add it to your AI tool — Claude (Projects), ChatGPT (Custom GPT), Cursor, Copilot, Gemini CLI and more. No code needed.