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
`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])",
    },

TailwindCSS MCP Server