Improving the Bricks Builder Color Palette

The color palette is a fundamental tool in web design; however, the native palette in Bricks Builder presents some challenges when working with dark or transparent tones. White transparencies, for example, often appear gray, while darker colors can nearly disappear, making them hard to identify.

While this solution may not be ideal for everyone, it has solved several visibility issues for me, making it much easier and more accurate to work with colors.

Activating the editor’s custom mode

Before getting started, go to Bricks settings and enable “Custom” mode. After selecting it, save and reload the page to make the code box appear.

Adding CSS

With CSS, we’ll tackle the three main issues I’ve identified in Bricks Builder’s color palette, addressing each one separately. This way, you can choose which changes to implement based on your needs.

Improving the Display of Transparencies and Dark Colors

With this code, we add a subtle chessboard pattern and a border to make it easier to identify dark colors and transparencies. I’ve adjusted the contrast of the chessboard so it doesn’t interfere too much with the appearance of transparent colors.

[data-control=color] .bricks-control-popup .color-palette li.color{
    --dot-color: rgba(255,255,255,0.1);
    --border-color: #4c5d6e;
    background-color: transparent;
    background-image: linear-gradient(45deg, var(--dot-color) 25%, transparent 25%),
    linear-gradient(-45deg, var(--dot-color) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--dot-color) 75%),
    linear-gradient(-45deg, transparent 75%, var(--dot-color) 75%);
    background-size: 10px 10px;
    background-position: 0 0, 0 5px, 5px -5px, -5px 0px;
    border-radius: 100vw;
    border: 1px solid var(--border-color);
    border-radius: 5px;
}

[data-control=color] .bricks-control-popup .color-palette li.color div.color-button{
    border-radius: 5px;
}

Columns and max-width

With the following CSS lines, we can set the number of columns and define a max-width, preventing the palette from becoming oversized when resizing the sidebar. For my color palette, 7 columns work well, as they organize the shades into two neat rows.

[data-control=color] .bricks-control-popup.bottom{
    left: auto;
    right: 0;
    width: 100%;
    max-width: 300px;
}

[data-control=color] .bricks-control-popup .color-palette {
    grid-template-columns: repeat(7, 1fr);
}