bricks_create_color_palette

Phase 2IntermediateBatchComplexity: 5/10
Create a full color palette with multiple colors in one call

Overview

Creates a new color palette in Bricks with an initial set of colors in a single API call. This is the preferred method for setting up all site colors during Phase 2 (Design System). One call replaces multiple bricks_create_color calls, saving time and reducing API overhead.

After creating the palette, call bricks_regenerate_assets to compile the CSS variables and utility classes.

Key Features

Batch creation
Creates an entire palette with all colors in a single API call — much faster than individual bricks_create_color calls
Full color system
Set up primary, secondary, neutrals, and semantic colors all at once
Utility classes
Each color can have utility classes (bg, text, border) auto-generated

When to Use

Phase 2 (Design System) when setting up the initial color foundation
Creating a brand-new palette with multiple colors in one operation
Setting up the full color system: primary, secondary, neutrals, and semantic colors
Prerequisites
Run bricks_get_color_palette to check for existing palettes
Have a defined color scheme ready (hex values for primary, secondary, neutrals, semantic colors)

When NOT to Use

When adding a single color to an existing palette — use bricks_create_color instead
When updating existing colors — use bricks_update_color instead

Parameters

2 Total Parameters1 Required1 Optional
namestringREQUIRED
Palette name (e.g., "Brand Colors", "Neutrals")
colorsarrayoptional
Array of color objects with name, hex, optional dark_hex, css_variable, and utility_classes

Code Examples

Create a complete brand palette

Set up primary, secondary, and neutral colors in one call

JSON
{
    "name": "Brand Colors",
    "colors": [
        {
            "name": "Primary",
            "hex": "#4361ee",
            "utility_classes": [
                "bg",
                "text",
                "border"
            ]
        },
        {
            "name": "Primary Light",
            "hex": "#6b82f5"
        },
        {
            "name": "Primary Dark",
            "hex": "#2b47d4"
        },
        {
            "name": "Secondary",
            "hex": "#7209b7",
            "utility_classes": [
                "bg",
                "text"
            ]
        },
        {
            "name": "White",
            "hex": "#ffffff"
        },
        {
            "name": "Off White",
            "hex": "#f8f9fa"
        },
        {
            "name": "Grey",
            "hex": "#6c757d"
        },
        {
            "name": "Dark",
            "hex": "#1a1a2e"
        },
        {
            "name": "Success",
            "hex": "#10b981"
        },
        {
            "name": "Error",
            "hex": "#ef4444"
        }
    ]
}
Response
{"success": true, "palette_id": "xyz789", "colors_created": 10}

Common Mistakes

Forgetting to include neutrals and semantic colors
Always include: primary + variants, secondary + variants, neutrals (white through black), and semantic (success, warning, error, info)

Tips & Warnings

Tips & Warnings
  • This is the preferred method for Phase 2 color setup — one call instead of many
  • Include at minimum: primary, secondary, white, off-white, grey, dark, success, error colors
  • Enable utility_classes: ["bg", "text", "border"] for root colors (primary, secondary) to auto-generate CSS utility classes
  • Always follow with bricks_regenerate_assets

Return Values

FieldTypeDescription
successbooleanWhether the palette was created successfully
palette_idstringID of the newly created palette
colors_creatednumberNumber of colors added to the palette

Related Tools

Technical Details

Tool ID
bricks_create_color_palette
API Endpoint
/bricks-mcp/v1/design-system/color-palettes
HTTP Method
POST
Namespace
design-system
Source File
design-system/colors.ts
Version
1.0
Min Bricks Version
1.9
Requires Auth
Yes

Changelog

v1.0
Initial release
20250101