bricks_create_color

Phase 2BeginnerComplexity: 3/10
Add a single color to the Bricks color palette

Overview

Adds a single color to a Bricks color palette. Creates the color entry with a hex value, optional dark mode hex (Bricks 2.2+), CSS variable name, and utility class generation. For setting up multiple colors at once, prefer bricks_create_color_palette or bricks_create_colors_batch which are significantly faster.

After creating colors, call bricks_regenerate_assets to compile the CSS so the new color variables and utility classes take effect on the frontend.

Key Features

Utility class generation
Automatically generates CSS utility classes (bg, text, border, outline, fill, stroke) for the color
Dark mode support
Optional dark_hex parameter for Bricks 2.2+ dark mode toggle
Auto CSS variable
Generates a CSS variable name automatically if not provided

When to Use

Adding a single color to an existing palette (e.g., a new accent color)
Phase 2 (Design System) when building the color foundation
When you need fine-grained control over individual color properties
Adding a dark mode variant to an existing color
Prerequisites
Run bricks_get_color_palette first to check existing colors and avoid duplicates
Know the target palette name (defaults to "Default")

When NOT to Use

When creating multiple colors at once — use bricks_create_color_palette or bricks_create_colors_batch instead (fewer API calls)
When you want to update an existing color — use bricks_update_color instead

Parameters

7 Total Parameters2 Required5 Optional
palette_namestringoptional
Name of the palette to add the color to. Defaults to "Default"
Default: Default
palette_idstringoptional
ID of the palette (if known, takes precedence over name)
namestringREQUIRED
Display name for the color (e.g., "Primary Blue")
hexstringREQUIRED
Hex color value (e.g., "#1a3a5c") — used as light mode value
dark_hexstringoptional
Dark mode hex value (Bricks 2.2+). Enables dark mode for this color.
css_variablestringoptional
CSS variable name (e.g., "primary-blue"). Auto-generated if not provided.
utility_classesarrayoptional
Utility class types to generate for this color
Values: bg, text, border, outline, fill, stroke

Code Examples

Create a primary color with utility classes

Add a primary brand color with bg, text, and border utility classes

JSON
{
    "name": "Primary",
    "hex": "#4361ee",
    "css_variable": "primary",
    "utility_classes": [
        "bg",
        "text",
        "border"
    ]
}
Response
{"success": true, "color_id": "abc123", "css_variable": "primary"}

Common Mistakes

Creating colors one by one when setting up the full palette
Use bricks_create_color_palette or bricks_create_colors_batch for multiple colors — much faster
Forgetting to call bricks_regenerate_assets after creating colors
Always regenerate assets after color changes to compile CSS

Tips & Warnings

Tips & Warnings
  • For the initial color setup, prefer bricks_create_color_palette which creates a palette with all colors in one call
  • Enable utility_classes: ["bg", "text", "border"] for primary/secondary colors so you can use classes like .bricks-bg-primary
  • Always call bricks_regenerate_assets afterward to compile CSS

Return Values

FieldTypeDescription
successbooleanWhether the color was created successfully
color_idstringID of the newly created color
css_variablestringThe CSS variable name assigned to this color

Related Tools

Technical Details

Tool ID
bricks_create_color
API Endpoint
/bricks-mcp/v1/design-system/colors
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