Color Matchmaker
De l'ambiance à une décision de couleur utilisable — des couleurs assorties, avec des rôles clairs et une vraie maquette.
SKILL.md au standard ouvert agentskills.io — utilisable directement dans Claude, ChatGPT/Codex, Cursor, Copilot, etc.
Color Matchmaker est un skill d'IA pour les palettes et systèmes de couleurs — il trouve des couleurs assorties, donne à chacune un rôle clair (fond, texte, bouton, accent, statut), vérifie le contraste et l'accessibilité de façon déterministe, et montre la palette dans une vraie maquette. Il conseille aussi les personnes sans connaissance des couleurs, en langage clair — ni générateur aléatoire, ni générateur de logo.
Ce que fait ce skill
- Trouve des couleurs assorties et donne à chacune un **rôle sémantique** (Anchor, Canvas, Surface, Texte, Accent, Bordure, Focus, Statut)
- Transforme une **ambiance** ou une couleur/un logo fixe en un système de couleurs complet et utilisable
- Vérifie **contraste & accessibilité de façon déterministe** (WCAG + APCA) et dit à quoi sert chaque couleur
- Sépare les **couleurs d'ambiance** des **couleurs sûres pour l'UI** et dérive l'une de l'autre sans perdre le caractère
- Extrait des **couleurs d'images**, en distinguant les couleurs structurelles des ombres, reflets, tons chair et dominantes
- **Sauve les palettes existantes** avec un minimum de changements (diagnostic → cause → plus petit correctif → avant/après)
- Construit une **maquette** adaptée (HTML/CSS responsive ou SVG épuré) et exporte des **design tokens** (CSS/OKLCH/SCSS/JSON/Tailwind)
Description
Color Matchmaker est un skill pour les palettes et systèmes de couleurs — il ne répond pas seulement à « quelles couleurs vont ensemble » mais à « quelle couleur fait quel travail ». C'est la règle centrale : **une palette n'est terminée que lorsque chaque couleur a un rôle** — Anchor (le foncé porteur), Canvas (la base calme), Accent (caractère/signal), plus Surface, Texte, Atténué, Bordure, Focus et couleurs de statut, autant que le cas d'usage l'exige. Le skill décide au lieu de multiplier les questions : « aucune idée » et « surprends-moi » sont des réponses valides ; il pose des hypothèses par défaut raisonnables et les indique brièvement. Il sépare systématiquement les **couleurs d'ambiance** (atmosphère, grandes surfaces) des **couleurs sûres pour l'UI** (texte, boutons, liens, statut) et dérive l'une de l'autre sans détruire le caractère. Sept modes couvrent le quotidien : **Quick Match** (vite une palette utilisable), **Vibe to Palette** (traduire une ambiance comme « luxueux mais pas arrogant » en système de couleurs), **One Color In** (bâtir un système complet à partir d'une couleur de marque fixe), **Image Match** (extraire une palette d'une photo/logo/moodboard), **Palette Rescue** (réparer une palette existante au minimum plutôt que tout refaire), **Color Roulette** (trois directions surprenantes mais maîtrisées) et **Palette Playground** (« rends-la plus premium/plus sombre/plus chaude » — tourner le bon curseur, pas tout changer). Le calcul des couleurs est **déterministe** : des scripts Node sans dépendances convertissent les formats dont l'OKLCH, calculent le contraste WCAG et APCA, mesurent la distance perceptuelle (ΔE), dérivent les états d'interaction de manière perceptuellement régulière, et exportent des design tokens (CSS, OKLCH, SCSS, JSON, Tailwind). Le skill est **honnête** : pas de mythes de psychologie des couleurs, pas de fidélité inventée, pas de « réussi/échoué » sans chiffres — plutôt à quoi une couleur sert vraiment. Il conclut par une maquette adaptée — HTML/CSS responsive pour le numérique, SVG épuré pour le visuel — pour que l'effet couleur soit montré, pas seulement affirmé.
Exemples
Testé avec Claude Code
/color-matchmaker Voici le logo de mon app Image Match pour une app. Honnêtement : les couleurs d'un logo sont estimées. Le logo pixel-art est riche en couleurs, mais elles se rangent proprement en rôles : le violet foncé porte tout, l'or/crème est la marque, le magenta brille comme magie, le vert et le cramoisi sont des couleurs d'état → un thème d'app fantasy sombre.
Palette d'app (sombre, rôle → hex)
- Canvas
#1E1826· Surface#2A2136· Texte#F1E9DA· Muted#A99BB5· Or/primaire#E3C06A· Magenta/magie#C15CE6· Vert/succès#8FB84E· Cramoisi/danger#C0392B
Contraste (mesuré, WCAG)
| Association | Rapport | Verdict |
|---|---|---|
texte #F1E9DA sur canvas | 14,3:1 | ✅ corps de texte |
or #E3C06A sur canvas | 9,9:1 | ✅ texte, chiffres, titres |
| foncé sur or (CTA) | 9,9:1 | ✅ bouton principal |
blanc sur magenta #B03AD6 | 4,75:1 | ✅ bouton magenta |
blanc sur magenta clair #C15CE6 | 3,5:1 | ⚠ grand/gras seulement |
Règles : ✅ l'or = l'unique action principale (texte foncé dessus, jamais blanc) + monnaie/chiffres · ✅ magenta = magie/interaction (glow clair, bouton dans le jumeau plus profond #B03AD6 + blanc) · ✅ vert = succès, cramoisi = danger/boss — des signaux de jeu clairs · ✖ pas les cinq couleurs aussi fortes : l'or mène, le magenta est le second, le reste est de l'état.
Surface : ~75 % violet foncé · ~15 % or + texte crème · ~10 % magenta/vert/rouge comme signaux. Variante claire, couleurs de rareté (commun→légendaire) et export Tailwind sur demande.
Une hypothèse rapide : site web, fond clair, niveau « Character » — le rouge comme couleur de signal et d'action, pas comme aplat. Dis-moi si c'est autre chose (marque, app, print, social).
Signal Red — un rouge affirmé sur une base calme.
Palette de base (rôle → hex)
- Anchor/texte
#241419· Canvas#FBF6F4· Surface#FFFFFF· Rouge/accent#D7263D· Hover#BC1B32· Muted#6E585C
Contraste (mesuré, WCAG)
| Association | Rapport | Verdict |
|---|---|---|
texte #241419 sur canvas | 16,5:1 | ✅ corps de texte |
blanc sur rouge #D7263D | 4,96:1 | ✅ texte de bouton (juste AA) |
blanc sur rouge foncé #BC1B32 | 6,3:1 | ✅ hover + petit texte |
Règles : ✅ blanc sur #D7263D pour les boutons, hover #BC1B32 pour le petit texte · ⚠ texte foncé sur rouge seulement en grand/gras · ✖ pas de mise en page tout en rouge, pas de corps de texte rouge.
Surface : ~70 % blanc cassé · ~22 % structure · ~8 % rouge — cette rareté est ce qui rend le rouge précieux. Safe/Character/Bold, dark mode et export de tokens (CSS/OKLCH/Tailwind) sur demande.
/color-matchmaker Voici mon logo Image Match. Honnêtement : les couleurs d'un logo sont estimées, pas exactes. Je vois un bouclier anthracite (le dégradé n'est qu'une mise en forme, pas une couleur de marque), un lettrage blanc, et la couleur de caractère : la flamme rouge → orange → jaune. Anthracite + blanc sont les neutres, l'orange est la vedette → une UI sombre avec un accent flamme.
Palette d'application (sombre, rôle → hex)
- Canvas
#16181C· Surface#212429· Texte#F4F5F7· Muted#A0A5AE· Flamme/accent#F97316· Ember#FFC24B· Rouge-flamme#E23A0E
Contraste (mesuré, WCAG)
| Association | Rapport | Verdict |
|---|---|---|
texte #F4F5F7 sur canvas | 16,3:1 | ✅ corps de texte |
orange #F97316 sur canvas | 6,3:1 | ✅ texte/lien/icônes |
foncé #16181C sur orange (CTA) | 6,3:1 | ✅ texte de bouton |
blanc sur orange #F97316 | 2,8:1 | ✖ échoue |
Le point clé : le CTA orange = aplat #F97316 + texte foncé, jamais blanc (2,8:1 échoue). ⚠ rouge-flamme seulement pour les pointes de dégradé / badges LIVE. ✖ ne reconstruis pas le dégradé anthracite comme couleur d'UI — ce n'était qu'une mise en forme du logo.
Surface : ~75 % anthracite · ~15 % structure · ~10 % flamme. Variante claire, couleurs d'état (win/loss/live) et export Tailwind sur demande.
Ce qu’il ne fait pas
- Ni générateur de logo, de graphique ou d'illustration — il conçoit le système de couleurs, pas l'image
- Pas de mythes de psychologie des couleurs (« bleu = confiance ») ni de précision inventée (aucune garantie écran, impression ou Pantone)
- Ne prétend à aucune vérité colorimétrique exacte à partir d'images compressées/filtrées — il signale l'incertitude
- N'abandonne jamais une couleur voulue — il en dérive une variante sûre pour l'UI et en limite l'usage
- Ne remplace pas un audit d'accessibilité complet du produit fini — les vérifications sont une aide
Compatibilité & technique
- Testé (interne)
- 6 scénarios
- Runtime recommandé
- Claude Opus ou Sonnet ; les scripts déterministes nécessitent Node (sans paquets supplémentaires). Sans Node, le skill raisonne en OKLCH à la main et indique ses valeurs comme estimées.
- Modes
- Quick Match · Vibe to Palette · One Color In · Image Match · Palette Rescue · Color Roulette · Palette Playground
- Entrées
- brief court / ambiance · une couleur fixe (HEX/RGB/HSL/OKLCH) ou un logo · image / photo / moodboard · une palette existante (à sauver)
- Format de sortie
- Palette avec rôles + tableau de contraste mesuré + règles d'association + répartition des surfaces + variantes (Safe/Character/Bold, Light/Dark) + une maquette (HTML/CSS ou SVG) + export de design tokens
- Sous-catégorie
- Palettes de couleurs & design systems
- Licence
- Proprietär
Profil de sécurité
S’exécute entièrement chez toi avec ta propre IA — aucun runtime externe, aucun coût récurrent.
Contient du code exécutable ou exécute des actions/outils — jette un œil avant utilisation.
Fonctionne hors ligne avec ce que tu fournis — n’appelle pas de services externes de lui-même.
Contenu livré
- color-matchmaker-1.0.0/12 fichiers
- .claude-plugin/marketplace.json
plugins/color-matchmaker/skills/color-matchmaker/12 fichiers
- SKILL.md
- manifest.json
references/6 fichiers
- 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 fichiers
- color-utils.mjs
- contrast-check.mjs
- export-tokens.mjs
- palette-derive.mjs
- .agents/skills/color-matchmaker/→ universel — même contenu (Codex, Cursor, Copilot, Gemini, Windsurf, Cline)
- LICENSE.txt
Installation
Aussi comme prompt de chat
Pas d’outil IA ? Collez-le dans Claude, ChatGPT ou Gemini et utilisez la méthode aussitôt.
Vous obtenez la méthode complète. Seuls 4 script(s) d’aide qui automatisent des parties ne tournent qu’une fois installés.
L’installation est la version complète — elle se déclenche automatiquement, exécute ses scripts et charge les références au besoin. En prompt de chat, vous pilotez la méthode vous-même.
Déverrouillez pour copier le prompt prêt à coller — ensuite dans « Mes skills ».
Avis
Pas encore d’avis – soyez le premier.
Remarque
Les couleurs varient selon l'écran, le matériau et la lumière — Color Matchmaker ne promet aucune fidélité absolue. En impression, le CMJN est une approximation ; prévoyez un bon à tirer physique. Les scripts déterministes nécessitent Node (sans paquets supplémentaires) ; sans Node, le skill raisonne en OKLCH à la main et indique ses valeurs comme estimées. Les vérifications de contraste/accessibilité sont une aide, pas un substitut à un audit d'accessibilité complet du produit fini.
Journal des modifications
- v1.0.013.07.2026Première version : système de couleurs par rôles (Anchor/Canvas/Accent + Surface/Text/Border/Focus/Status selon le cas d'usage), 7 modes (Quick Match, Vibe to Palette, One Color In, Image Match, Palette Rescue, Color Roulette, Palette Playground), scripts Node sans dépendances (conversion de couleurs dont OKLCH, contraste WCAG + APCA, distance ΔE, dérivation de palette avec variante sûre pour l'UI, export de tokens CSS/OKLCH/SCSS/JSON/Tailwind), séparation mood/UI-safe, règles de contexte pour 10 cas d'usage, vérifications d'accessibilité et de vision des couleurs, et un contrôle qualité avant sortie. 6 références + 4 scripts.
Questions fréquentes
Que fait Color Matchmaker ?
Color Matchmaker est un skill d'IA pour les palettes et systèmes de couleurs — il trouve des couleurs assorties, donne à chacune un rôle clair (fond, texte, bouton, accent, statut), vérifie le contraste et l'accessibilité de façon déterministe, et montre la palette dans une vraie maquette. Il conseille aussi les personnes sans connaissance des couleurs, en langage clair — ni générateur aléatoire, ni générateur de logo.
Comment créer une palette de couleurs qui s'accorde vraiment ?
C'est exactement le rôle de Color Matchmaker — il trouve des couleurs assorties et donne à chacune un rôle clair (fond, texte, bouton, accent, statut), vérifie le contraste avec de vrais chiffres et montre la palette dans une maquette, au lieu de sortir de jolis codes hexadécimaux.
J'ai déjà une couleur de marque — Color Matchmaker peut-il bâtir une palette autour ?
Oui. En mode « One Color In », Color Matchmaker respecte votre couleur fixe, dérive des neutres, des couleurs de texte et d'accent assortis ainsi qu'une application claire et une sombre, et ajoute une variante sûre pour l'UI (boutons/liens) si nécessaire — sans remplacer votre couleur.
Le skill vérifie-t-il l'accessibilité et le contraste ?
Oui, de façon déterministe. Color Matchmaker calcule les rapports de contraste WCAG (plus APCA en second avis) avec des scripts fournis et vous dit non pas « réussi/échoué » mais à quoi sert une couleur — corps de texte, grand texte seulement, ou surfaces/bordures uniquement.
Color Matchmaker peut-il extraire une palette d'un logo ou d'une photo ?
Oui, en mode « Image Match » il lit l'image et distingue les couleurs structurelles porteuses des ombres, reflets, tons chair et dominantes colorées. Il renvoie une palette d'ambiance et une palette d'application nettoyée avec des rôles — et signale honnêtement les extractions incertaines.
Quels formats d'export sont pris en charge ?
Color Matchmaker fournit le HEX comme référence, et sur demande des custom properties CSS, de l'OKLCH, des variables SCSS, des design tokens JSON ou une config Tailwind — chaque token nommé par rôle (`--color-accent`), pas par teinte (`--orange`).
Remplace-t-il un générateur de graphiques ou de logos ?
Non. Color Matchmaker conçoit le système de couleurs, pas le graphique. Pour des composants d'UI/frontend finis il y a Frontend Design, et pour les images sociales/OG le Social Preview Architect — Color Matchmaker fournit les couleurs sur lesquelles ces éléments reposent.
Avec quels outils d’IA Color Matchmaker fonctionne-t-il ?
Claude · ChatGPT/Codex · Cursor · Copilot · Gemini CLI · Windsurf · Cline
Comment utiliser Color Matchmaker ?
Color Matchmaker est un SKILL.md au standard ouvert agentskills.io : installez-le en une commande (npx) ou téléchargez-le et ajoutez-le à votre outil d’IA — Claude (Projects), ChatGPT (Custom GPT), Cursor, Copilot, Gemini CLI, etc. Aucun code requis.