Bricks Color Framework Builder

Build your own Bricks framework with custom color systems that sync to Gutenberg. Automatically generate variables, tints, shades, transparencies, and neutral colors — all with ease.

Create Color Palette

+ Add Color+ Neutral ColorReset All

Generated PHP Snippet

Paste the code into functions.php or use a snippet plugin. Remove <?php if it's already there.

📋 Copy to Clipboard

Export Bricks Color Profile

🧱 Download JSON file

How to Use the Bricks Color Framework Builder:

  1. Add Your Color Variables

    • Enter your color variable name (common names: primary, secondary, etc.) without spaces.

    • Input the HEX code for your base color.

  2. Configure Shades & Options

    • Choose how many shades (lighter/darker variants) to generate.

    • Toggle transparency variants (10%–90%) if needed.

    • Opt to include the colors in Gutenberg (WordPress block editor).

  3. Manage Colors

    • Click “Add Color” to include more variables.

    • Click “+Neutral Color” to include a neutral color set.

    • Use “Reset All” to start fresh.

  4. Copy the PHP Snippet

    • Switch to the right tab to view the generated PHP code.

    • Copy and paste it into your theme’s functions.php or a code snippet plugin.

  5. Activate the Snippet

    • Ensure <?php is added at the top if your plugin doesn’t auto-include it.

    • Save and activate.

  6. Export & Import to Bricks

    • Name your color profile (this becomes the JSON filename).

    • Download the JSON file.

    • In Bricks, go to Colors > Select Color Palette (bottom of panel).

    • Click + → Import (download icon) → Upload your JSON file.

    • Refresh the page to see your palette.

  7. Enjoy! 🎨
    Your custom color framework is now ready to use in Bricks Builder & Gutenberg!

Made with ❤️ by Webdivo