bricks_get_color_palette
Phase 1BeginnerRead OnlyComplexity: 2/10
Read all colors and CSS variables from the Bricks color palette
Overview
Retrieves all color palettes from the Bricks site, including palette names, individual color entries with their hex values, CSS variable references, dark mode hex values (Bricks 2.2+), and utility class configurations. This is the essential first step in understanding a site’s existing color system before making any design decisions.
Returns structured data for each palette showing color IDs, display names, hex codes, associated CSS variables (e.g., var(--bricks-color-primary)), and which utility classes (bg, text, border) are enabled.
Key Features
Complete palette data
Returns all palettes with every color entry including hex, dark mode hex, CSS variable name, and utility class configuration
CSS variable references
Each color includes its CSS variable reference for use in element settings: var(--bricks-color-{name})
Dark mode support
Shows dark mode hex values for Bricks 2.2+ sites that use the toggle-mode element
When to Use
At the very start of any project — Phase 1 (Site Context) to understand existing colors
Before creating new colors to avoid duplicates
When you need to reference color CSS variables in elements or classes
To verify color palette changes after running bricks_create_color or bricks_create_color_palette
When debugging color-related styling issues
Before creating new colors to avoid duplicates
When you need to reference color CSS variables in elements or classes
To verify color palette changes after running bricks_create_color or bricks_create_color_palette
When debugging color-related styling issues
Prerequisites
No prerequisites — this is a read-only tool that can be called at any time
Typically called as step 3 of Phase 1 (after bricks_get_site_context and bricks_list_pages)
Typically called as step 3 of Phase 1 (after bricks_get_site_context and bricks_list_pages)
When NOT to Use
Don't use this to create or modify colors — use bricks_create_color or bricks_create_color_palette instead
Don't call repeatedly in a loop — one call returns ALL palettes
Don't call repeatedly in a loop — one call returns ALL palettes
Parameters
1 Total Parameters1 Optional
(none)noneoptionalThis tool takes no input parameters. It returns all color palettes from the site.
Code Examples
Read all colors
Get the complete color palette to understand the site color system
JSON
bricks_get_color_palette({})Response
{
"palettes": [
{
"name": "Brand Colors",
"id": "abc123",
"colors": [
{
"id": "c1",
"name": "Primary",
"hex": "#4361ee",
"css_variable": "primary",
"utility_classes": [
"bg",
"text",
"border"
]
},
{
"id": "c2",
"name": "Secondary",
"hex": "#7209b7",
"css_variable": "secondary",
"utility_classes": [
"bg",
"text"
]
}
]
}
]
}Common Mistakes
Skipping color palette check before creating colors
Always call bricks_get_color_palette first to avoid duplicate colors
Tips & Warnings
Tips & Warnings
- Call this tool in Phase 1 before any design system changes
- Use the returned CSS variable names (e.g.,
var(--bricks-color-primary)) in element settings for consistent theming - The
utility_classesarray shows which utility classes are auto-generated (e.g.,.bricks-bg-primary)
Return Values
Related Tools
Technical Details
Changelog
v1.0
Initial release
20250101