¿Qué hace color-palette?
Genera paletas de colores completas y accesibles a partir de un solo color hexadecimal de marca. Produce una escala de 11 tonos (50-950), tokens semánticos, variantes de modo oscuro, salida CSS de Tailwind v4 y comprobaciones de contraste WCAG. Úsalo siempre que el usuario proporcione un color hexadecimal de marca y solicite una paleta, mencione la creación de un sistema de diseño, quiera colores de tema de Tailwind a partir de un color de marca, o pida verificar la accesibilidad/contraste de colores.
Capacidades principales
- Escala de 11 tonos: Genera una gradación completa desde 50 (el más claro) hasta 950 (el más oscuro).
- Tokens semánticos: Crea colores semánticos como
primary,secondary,success,erroryneutral. - Variantes de modo oscuro: Produce automáticamente versiones adaptadas para modo oscuro de cada token semántico.
- Salida Tailwind v4: Formatea los colores como configuración de tema de Tailwind v4 (
@theme) y clases utilitarias. - Verificación WCAG: Calcula ratios de contraste entre pares de colores y sugiere ajustes para cumplir con los niveles AA o AAA.
Modo de uso
El usuario proporciona un color hexadecimal (por ejemplo, #3B82F6 o #1a1a2e) y el skill genera automáticamente todo lo necesario:
- Escala de tonos para el color base.
- Paletas semánticas (primario, secundario, éxito, error, neutro).
- Variantes para modo oscuro.
- Fragmento CSS listo para Tailwind v4.
- Informe de contraste WCAG.
Ejemplo de entrada
Hex: #3B82F6
Ejemplo de salida (Tailwind v4 CSS)
@theme {
--color-primary-50: #EFF6FF;
--color-primary-100: #DBEAFE;
--color-primary-200: #BFDBFE;
--color-primary-300: #93C5FD;
--color-primary-400: #60A5FA;
--color-primary-500: #3B82F6;
--color-primary-600: #2563EB;
--color-primary-700: #1D4ED8;
--color-primary-800: #1E40AF;
--color-primary-900: #1E3A8A;
--color-primary-950: #172554;
}
Funcionamiento técnico
- El skill utiliza manipulación de color en el espacio HSL para generar la escala de tonos.
- Calcula la luminancia relativa según la especificación WCAG 2.1 para determinar ratios de contraste.
- Aplica una corrección gamma automática para preservar la saturación en tonos claros y oscuros.
- Las variantes de modo oscuro se generan invirtiendo la luminancia manteniendo el tono y la saturación.
Limitaciones
- El color de entrada debe ser un valor hexadecimal válido de 6 dígitos (con o sin
#). - La escala generada puede no coincidir exactamente con escalas predefinidas de Tailwind (como
blue-500original), ya que se calcula algorítmicamente. - Para verificación de contraste WCAG, se asume un fondo blanco (
#FFFFFF) y negro (#000000) por defecto, a menos que el usuario especifique otros colores.
Compatibilidad
- Plataformas: Claude Code, Cursor, Codex, Cline, y otros asistentes de codificación con soporte para skills.
- Frameworks: Tailwind CSS v4+ (salida nativa), utilizable también en cualquier proyecto CSS/SCSS.
- Navegadores: Todos los navegadores modernos (los colores generados usan sintaxis CSS estándar).
Activación automática
El skill se activa automáticamente ante las siguientes frases clave o intenciones del usuario:
- "Genera una paleta a partir de este color:
#..." - "Necesito colores de tema para Tailwind desde este azul"
- "¿Este color cumple con WCAG AA sobre blanco?"
- "Configura un sistema de diseño con este color de marca"
- "Quiero variantes de modo oscuro para mi paleta"
Notas adicionales
- Los nombres de los tokens semánticos son los estándar de la industria (
primary,secondary,success,error,warning,info,neutral). - Se recomienda usar los colores generados en combinación con valores de opacidad Tailwind (ej.
bg-primary-500/50) para máxima flexibilidad. - Para una integración perfecta con diseño existente, el skill puede aceptar parámetros adicionales como
--backgroundy--textpara personalizar los cálculos de contraste.