generate_color_palette
Create custom color palettes with multiple shades from a base color for TailwindCSS projects. Input a base color and name to generate consistent shading scales.
Instructions
Generate a custom color palette with multiple shades from a base color
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| baseColor | Yes | Base color in hex, rgb, or hsl format (e.g., '#3B82F6', 'rgb(59, 130, 246)') | |
| name | Yes | Name for the color palette (e.g., 'brand', 'accent') | |
| shades | No | Array of shade values to generate (default: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950]) |
Implementation Reference
- src/services/template-service.ts:58-79 (handler)The core business logic that generates the color palette using base colors and shade generation utilities.
async generateColorPalette(params: GeneratePaletteParams): Promise<ColorPalette> { try { const { baseColor, name, shades = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950] } = params; if (!this.isValidColor(baseColor)) { throw new ServiceError( `Invalid color format: ${baseColor}. Use hex, rgb, or hsl format.`, 'TemplateService', 'generateColorPalette' ); } const colors = this.generateColorShades(baseColor, shades); const cssVariables = this.generateCSSVariables(name, colors); const tailwindConfig = this.generateTailwindColorConfig(name, colors); return { name, colors, cssVariables, tailwindConfig }; - src/index.ts:491-499 (handler)The MCP handler method in the main server class that validates request arguments and calls the template service.
private async handleGenerateColorPalette(args: any): Promise<any> { try { const params = this.validateGeneratePaletteParams(args); const palette = await this.templateService.generateColorPalette(params); return this.createSuccessResponse(palette); } catch (error) { this.handleServiceError(error, "Failed to generate color palette"); } } - src/index.ts:218-235 (registration)The MCP tool definition for 'generate_color_palette' in the server registration block.
name: "generate_color_palette", description: "Generate a custom color palette with multiple shades from a base color", inputSchema: { type: "object", properties: { baseColor: { type: "string", description: "Base color in hex, rgb, or hsl format (e.g., '#3B82F6', 'rgb(59, 130, 246)')", }, name: { type: "string", description: "Name for the color palette (e.g., 'brand', 'accent')", }, shades: { type: "array", items: { type: "number" }, description: "Array of shade values to generate (default: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950])", },