Color Matchmaker
De la atmósfera a una decisión de color aplicable — colores que combinan, con roles claros y una maqueta real.
SKILL.md en el estándar abierto agentskills.io — funciona directamente en Claude, ChatGPT/Codex, Cursor, Copilot y más.
Color Matchmaker es un skill de IA para paletas y sistemas de color — encuentra colores que combinan, le da a cada uno un rol claro (fondo, texto, botón, acento, estado), comprueba el contraste y la accesibilidad de forma determinista, y muestra la paleta en una maqueta real. También asesora a quien no sabe de color, en lenguaje claro — ni generador aleatorio, ni generador de logos.
Qué hace este skill
- Encuentra colores que combinan y da a cada uno un **rol semántico** (Anchor, Canvas, Surface, Texto, Accent, Borde, Focus, Estado)
- Convierte una **atmósfera** o un color/logo fijo en un sistema de color completo y usable
- Comprueba **contraste y accesibilidad de forma determinista** (WCAG + APCA) y dice para qué sirve cada color
- Separa los **colores de ambiente** de los **colores seguros para UI** y deriva uno del otro sin perder el carácter
- Extrae **colores de imágenes**, distinguiendo los colores estructurales de sombras, brillos, tonos de piel y dominantes
- **Rescata paletas existentes** con cambios mínimos (diagnóstico → causa → corrección más pequeña → antes/después)
- Construye una **maqueta** adecuada (HTML/CSS responsive o SVG depurado) y exporta **design tokens** (CSS/OKLCH/SCSS/JSON/Tailwind)
Descripción
Color Matchmaker es un skill para paletas y sistemas de color — no responde solo a «qué colores combinan» sino a «qué color hace qué trabajo». Esa es la regla central: **una paleta no está terminada hasta que cada color tiene un rol** — Anchor (el oscuro portante), Canvas (la base tranquila), Accent (carácter/señal), más Surface, Texto, Atenuado, Borde, Focus y colores de estado, tantos como el caso de uso necesite. El skill decide en vez de preguntar sin fin: «ni idea» y «sorpréndeme» son respuestas válidas; toma supuestos por defecto razonables y los indica brevemente. Separa de forma sistemática los **colores de ambiente** (atmósfera, grandes superficies) de los **colores seguros para UI** (texto, botones, enlaces, estado) y deriva uno del otro sin destruir el carácter. Siete modos cubren el día a día: **Quick Match** (rápido a una paleta usable), **Vibe to Palette** (traducir una atmósfera como «lujoso pero no arrogante» a un sistema de color), **One Color In** (construir un sistema completo a partir de un color de marca fijo), **Image Match** (extraer una paleta de una foto/logo/moodboard), **Palette Rescue** (arreglar al mínimo una paleta existente en vez de rehacerla), **Color Roulette** (tres direcciones sorprendentes pero controladas) y **Palette Playground** («hazla más premium/más oscura/más cálida» — girar la palanca correcta, no cambiarlo todo). El cálculo del color es **determinista**: scripts de Node sin dependencias convierten formatos incl. OKLCH, calculan el contraste WCAG y APCA, miden la distancia perceptual (ΔE), derivan estados de interacción de forma perceptualmente uniforme y exportan design tokens (CSS, OKLCH, SCSS, JSON, Tailwind). El skill es **honesto**: sin mitos de psicología del color, sin fidelidad inventada, sin «pasa/no pasa» sin cifras — sino para qué sirve de verdad un color. Cierra con una maqueta adecuada — HTML/CSS responsive para lo digital, SVG depurado para lo visual — para que el efecto del color se muestre, no solo se afirme.
Ejemplos
Probado con Claude Code
/color-matchmaker Aquí el logo de mi app Image Match para una app. Con honestidad: los colores de un logo son estimados. El logo pixel-art es rico en color, pero los colores se ordenan claramente en roles: el violeta oscuro lo sostiene todo, el oro/crema es la marca, el magenta brilla como magia, el verde y el carmesí son colores de estado → un tema de app fantasy oscuro.
Paleta de app (oscura, rol → hex)
- Canvas
#1E1826· Surface#2A2136· Texto#F1E9DA· Muted#A99BB5· Oro/primario#E3C06A· Magenta/magia#C15CE6· Verde/éxito#8FB84E· Carmesí/peligro#C0392B
Contraste (medido, WCAG)
| Combinación | Ratio | Veredicto |
|---|---|---|
texto #F1E9DA sobre canvas | 14,3:1 | ✅ texto de cuerpo |
oro #E3C06A sobre canvas | 9,9:1 | ✅ texto, cifras, titulares |
| oscuro sobre oro (CTA) | 9,9:1 | ✅ botón principal |
blanco sobre magenta #B03AD6 | 4,75:1 | ✅ botón magenta |
blanco sobre magenta claro #C15CE6 | 3,5:1 | ⚠ solo grande/negrita |
Reglas: ✅ el oro = la única acción principal (texto oscuro encima, nunca blanco) + moneda/cifras · ✅ magenta = magia/interacción (glow claro, botón en el gemelo más profundo #B03AD6 + blanco) · ✅ verde = éxito, carmesí = peligro/boss — señales de juego claras · ✖ no las cinco a igual volumen: el oro lidera, el magenta es el secundario, el resto es estado.
Superficie: ~75 % violeta oscuro · ~15 % oro + texto crema · ~10 % magenta/verde/rojo como señales. Variante clara, colores de rareza (común→legendario) y exportación Tailwind a petición.
Una suposición rápida: web, fondo claro, nivel «Character» — el rojo como color de señal y acción, no como superficie. Dime si es otra cosa (marca, app, print, social).
Signal Red — un rojo firme sobre una base tranquila.
Paleta base (rol → hex)
- Anchor/texto
#241419· Canvas#FBF6F4· Surface#FFFFFF· Rojo/acento#D7263D· Hover#BC1B32· Muted#6E585C
Contraste (medido, WCAG)
| Combinación | Ratio | Veredicto |
|---|---|---|
texto #241419 sobre canvas | 16,5:1 | ✅ texto de cuerpo |
blanco sobre rojo #D7263D | 4,96:1 | ✅ texto de botón (justo AA) |
blanco sobre rojo profundo #BC1B32 | 6,3:1 | ✅ hover + texto pequeño |
Reglas: ✅ blanco sobre #D7263D para botones, hover #BC1B32 para texto pequeño · ⚠ texto oscuro sobre rojo solo en grande/negrita · ✖ nada de layout todo en rojo, ni texto de cuerpo rojo.
Superficie: ~70 % blanco roto · ~22 % estructura · ~8 % rojo — esa escasez es lo que hace valioso al rojo. Safe/Character/Bold, modo oscuro y exportación de tokens (CSS/OKLCH/Tailwind) a petición.
/color-matchmaker Aquí está mi logo Image Match. Con honestidad: los colores de un logo son estimados, no exactos. Veo un escudo antracita (el degradado es solo forma, no un color de marca), letras blancas y el color de carácter: la llama rojo → naranja → amarillo. Antracita + blanco son los neutros, el naranja es la estrella → una UI oscura con acento de llama.
Paleta de aplicación (oscura, rol → hex)
- Canvas
#16181C· Surface#212429· Texto#F4F5F7· Muted#A0A5AE· Llama/acento#F97316· Ember#FFC24B· Rojo-llama#E23A0E
Contraste (medido, WCAG)
| Combinación | Ratio | Veredicto |
|---|---|---|
texto #F4F5F7 sobre canvas | 16,3:1 | ✅ texto de cuerpo |
naranja #F97316 sobre canvas | 6,3:1 | ✅ texto/enlace/iconos |
oscuro #16181C sobre naranja (CTA) | 6,3:1 | ✅ texto de botón |
blanco sobre naranja #F97316 | 2,8:1 | ✖ no pasa |
El punto clave: el CTA naranja = superficie #F97316 + texto oscuro, nunca blanco (2,8:1 no pasa). ⚠ rojo-llama solo para puntas de degradado / badges LIVE. ✖ no reconstruyas el degradado antracita como color de UI — eso era solo forma del logo.
Superficie: ~75 % antracita · ~15 % estructura · ~10 % llama. Variante clara, colores de estado (win/loss/live) y exportación Tailwind a petición.
Qué no hace
- Ni generador de logos, gráficos o ilustraciones — diseña el sistema de color, no la imagen
- Sin mitos de psicología del color («azul = confianza») ni precisión inventada (sin garantía de pantalla, impresión o Pantone)
- No afirma ninguna verdad de color exacta a partir de imágenes comprimidas/filtradas — indica la incertidumbre
- Nunca descarta un color deseado — deriva una variante segura para UI y limita su uso
- No sustituye una auditoría de accesibilidad completa del producto final — las comprobaciones son una ayuda
Compatibilidad y técnica
- Probado (interno)
- 6 escenarios
- Runtime recomendado
- Claude Opus o Sonnet; los scripts deterministas necesitan Node (sin paquetes adicionales). Sin Node, el skill razona en OKLCH a mano y marca sus valores como estimados.
- Modos
- Quick Match · Vibe to Palette · One Color In · Image Match · Palette Rescue · Color Roulette · Palette Playground
- Entradas
- brief breve / atmósfera · un color fijo (HEX/RGB/HSL/OKLCH) o un logo · imagen / foto / moodboard · una paleta existente (para rescatar)
- Formato de salida
- Paleta con roles + tabla de contraste medido + reglas de combinación + reparto de superficies + variantes (Safe/Character/Bold, Light/Dark) + una maqueta (HTML/CSS o SVG) + exportación de design tokens
- Subcategoría
- Paletas de color y design systems
- Licencia
- Proprietär
Perfil de seguridad
Se ejecuta por completo en tu equipo con tu propia IA — sin runtime externo, sin costes recurrentes.
Contiene código ejecutable o ejecuta acciones/herramientas — échale un vistazo antes de usar.
Funciona sin conexión con lo que proporcionas — no llama a servicios externos por sí mismo.
Qué incluye
- color-matchmaker-1.0.0/12 archivos
- .claude-plugin/marketplace.json
plugins/color-matchmaker/skills/color-matchmaker/12 archivos
- SKILL.md
- manifest.json
references/6 archivos
- 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 archivos
- color-utils.mjs
- contrast-check.mjs
- export-tokens.mjs
- palette-derive.mjs
- .agents/skills/color-matchmaker/→ universal — mismo contenido (Codex, Cursor, Copilot, Gemini, Windsurf, Cline)
- LICENSE.txt
Instalación
También como prompt de chat
¿Sin herramienta de IA? Pégalo en Claude, ChatGPT o Gemini y usa el método al instante.
Obtienes el método completo. Solo 4 script(s) de ayuda que automatizan partes funcionan una vez instalado.
Instalarlo es la versión completa — se activa solo, ejecuta sus scripts y carga referencias cuando hacen falta. Como prompt de chat, tú conduces el método.
Desbloquéalo para copiar el prompt listo para pegar — luego en «Mis skills».
Reseñas
Aún no hay reseñas: sé el primero.
Nota
Los colores se ven distintos según la pantalla, el material y la luz — Color Matchmaker no promete fidelidad absoluta. En impresión, el CMYK es una aproximación; planifica una prueba física. Los scripts deterministas necesitan Node (sin paquetes adicionales); sin Node, el skill razona en OKLCH a mano y marca sus valores como estimados. Las comprobaciones de contraste/accesibilidad son una ayuda, no un sustituto de una auditoría de accesibilidad completa del producto final.
Historial de cambios
- v1.0.013.07.2026Primera versión: sistema de color por roles (Anchor/Canvas/Accent + Surface/Text/Border/Focus/Status según el caso de uso), 7 modos (Quick Match, Vibe to Palette, One Color In, Image Match, Palette Rescue, Color Roulette, Palette Playground), scripts de Node sin dependencias (conversión de color incl. OKLCH, contraste WCAG + APCA, distancia ΔE, derivación de paleta con variante segura para UI, exportación de tokens CSS/OKLCH/SCSS/JSON/Tailwind), separación mood/UI-safe, reglas de contexto para 10 casos de uso, comprobaciones de accesibilidad y de visión del color, y un control de calidad antes de responder. 6 referencias + 4 scripts.
Preguntas frecuentes
¿Qué hace Color Matchmaker?
Color Matchmaker es un skill de IA para paletas y sistemas de color — encuentra colores que combinan, le da a cada uno un rol claro (fondo, texto, botón, acento, estado), comprueba el contraste y la accesibilidad de forma determinista, y muestra la paleta en una maqueta real. También asesora a quien no sabe de color, en lenguaje claro — ni generador aleatorio, ni generador de logos.
¿Cómo creo una paleta de colores que de verdad combine?
Para eso está Color Matchmaker — encuentra colores que combinan y le da a cada uno un rol claro (fondo, texto, botón, acento, estado), comprueba el contraste con cifras reales y muestra la paleta en una maqueta, en vez de soltar códigos hexadecimales bonitos.
Ya tengo un color de marca — ¿puede Color Matchmaker construir una paleta alrededor?
Sí. En el modo «One Color In», Color Matchmaker respeta tu color fijo, deriva neutros, colores de texto y de acento a juego más una aplicación clara y una oscura, y añade una variante segura para UI (botones/enlaces) cuando hace falta — sin reemplazar tu color.
¿El skill comprueba la accesibilidad y el contraste?
Sí, de forma determinista. Color Matchmaker calcula los ratios de contraste WCAG (más APCA como segunda opinión) con scripts incluidos y te dice no solo «pasa/no pasa» sino para qué sirve un color — texto de cuerpo, solo texto grande, o solo superficies/bordes.
¿Puede Color Matchmaker extraer una paleta de un logo o una foto?
Sí, en el modo «Image Match» lee la imagen y separa los colores estructurales portantes de sombras, brillos, tonos de piel y dominantes de color. Devuelve una paleta de ambiente y una paleta de aplicación depurada con roles — y avisa con honestidad cuándo la extracción es incierta.
¿Qué formatos de exportación admite?
Color Matchmaker da el HEX como referencia y, si lo pides, custom properties de CSS, OKLCH, variables SCSS, design tokens en JSON o una config de Tailwind — cada token nombrado por rol (`--color-accent`), no por tono (`--orange`).
¿Sustituye a un generador de gráficos o logos?
No. Color Matchmaker diseña el sistema de color, no el gráfico. Para componentes de UI/frontend terminados está Frontend Design, y para imágenes sociales/OG el Social Preview Architect — Color Matchmaker aporta los colores sobre los que se construyen esas piezas.
¿Con qué herramientas de IA funciona Color Matchmaker?
Claude · ChatGPT/Codex · Cursor · Copilot · Gemini CLI · Windsurf · Cline
¿Cómo uso Color Matchmaker?
Color Matchmaker es un SKILL.md en el estándar abierto agentskills.io: instálalo con un comando (npx) o descárgalo y añádelo a tu herramienta de IA — Claude (Projects), ChatGPT (Custom GPT), Cursor, Copilot, Gemini CLI y más. Sin código.