Color Palette Generator for Bricks Builder & Gutenberg

Easily create a full-featured color palette for Bricks Builder. Includes tints, shades, transparency, and neutral tones, with optional Gutenberg sync.for uniform styling.

Create Color Palette

Add colorAdd neutral setReset all

Export Bricks ColorKit

Download the color profile and CSS variables in separate JSON file formats for import into Bricks Builder.

Download color profileDownload css variables
☕ Buy me coffee

Add to Gutenberg

To sync the colors in Bricks Builder and Gutenberg, copy and paste this code into your child theme's functions.php or use a code snippet plugin.

Copy to Clipboard

 

🧱 How to Use the Bricks ColorKit

Follow these simple steps to create and use your custom color kit with Bricks Builder.

 

1. Add Your Color Variables

  • Enter a color name : Type in a name for your color (like primary, secondary, etc.). No spaces allowed.
  • Input HEX code : Add the base color you want to use in HEX format (e.g., #4A90E2).
 

2. Configure Shades & Options

  • Choose how many shades you want (lighter/darker variations).
  • Toggle on transparency variants if you need colors with opacity (from 10% to 90%).
  • Check the box to include colors in Gutenberg , if you’re using the WordPress block editor.
 

3. Manage Colors

  • Click “Add Color” to add more color variables.
  • Click “Add neutral set” to include neutral tones like grays.
  • Use “Reset All” if you want to start over.
 

4. Download CSS Variables

  • Click the Download CSS Variables button to get the .json file (bricks-colorkit-css-variables.json).
  • In Bricks Builder:
    • Click the Classes/Variables icon (second icon from the left at the top).
    • Go to the Variables tab .
    • Click the Import icon (top-right corner).
    • Select the downloaded .json file.
  • Your variables will now appear under the category “Bricks ColorKit” .
 

5. Download Color Profile

  • Click Download Color Profile to get the second .json file (bricks-colorkit-color-profile.json).
  • In Bricks:
    • Open any color picker in the builder.
    • Scroll down to “Select color palette” .
    • Click the plus (+) icon > Import .
    • Upload the downloaded .json file.
  • Close the popup and select your new color profile .
  • Click Set as default so it applies site-wide.
 

6. Add Colors to Gutenberg (Optional)

  • Copy the generated PHP code snippet.
  • Paste it into:
    • Your child theme’s functions.php file , or
    • A code snippet plugin like “Code Snippets”.
  • Make sure to activate the snippet .
 

✅ You’re all set! Your custom Bricks ColorKit is now ready to use across your site.