Why Consistent Brand Colors Make Your Website More Professional

Visitors form an impression of your business within seconds of landing on your website. A site that uses inconsistent or off-brand colors undermines trust and makes your business look unpolished. The Colors Menu in the Website Builder gives you a centralized place to apply and maintain your exact brand colors across every element of your site — from backgrounds to buttons to text — so your website always matches your logo and other marketing materials.

You can enter precise HEX or RGB color values to match your brand exactly, use the Recent Colors feature to reapply colors you have already used on your site with a single click, and use the opacity slider to adjust the transparency of any element. This article covers how to use each of these tools inside the Colors Menu.

How to Reuse Colors Already on Your Website with Recent Colors

Every time you pick a color for an element on your website, the Colors Menu saves that color to the Recent Colors section. When you are styling a new element, open the Colors Menu and look at the Recent Colors row at the top of the panel. Click any color in the Recent Colors row to instantly apply that color to the element you are editing, without needing to re-enter a HEX or RGB value. This keeps your brand colors consistent across your site without extra work.

The screenshot below shows the Colors Menu panel with the Recent Colors row visible at the top. The Recent Colors row displays color swatches for each color that has been used on the site. Clicking any swatch in the Recent Colors row immediately applies that color to the currently selected element.

How to Select a Custom Color Using HEX or RGB Values

To choose a color that is not in your Recent Colors, use the color picker inside the Colors Menu. You can select a color in two ways. The first option is to click and drag within the color panel or use the vertical color gradient bar on the right side of the panel to select the hue and shade you want. The second option is to type a HEX color code directly into the text field below the vertical color gradient bar. Entering a HEX value is the most precise method and ensures your website color matches your brand's exact color specifications.

The screenshot below shows the color picker inside the Colors Menu. The panel displays the color selection gradient, the vertical hue bar on the right side, and the HEX value text field below the gradient. The currently selected color is shown as a preview swatch above the HEX field.

How to Adjust the Transparency of an Element Using the Opacity Slider

The opacity slider inside the Colors Menu controls how transparent the selected element appears on the page. A value of 100% means the element is fully opaque and blocks everything behind it. As you reduce the opacity value, the element becomes increasingly transparent, allowing the background color or background image behind the element to show through and blend with the element's color. Use the opacity slider when you want a color overlay or background element to appear subtle rather than solid.

The screenshot below shows the Colors Menu panel with the opacity slider visible below the color picker. The slider displays the current opacity percentage and can be dragged left to reduce transparency or right to increase it. The opacity slider appears below the HEX value field in the Colors Menu panel.

Frequently Asked Questions

What does this article cover?

This article covers how to use the Colors Menu in the Website Builder, including how to reuse saved colors with the Recent Colors feature, how to select a custom color using the color picker or a HEX value, and how to adjust element transparency using the opacity slider. This article does not cover how to apply colors to specific widget types or how to set a site-wide color palette. For help with overall site design settings, see [link to site design settings article].

Can I enter RGB values instead of HEX values?

Yes. The Colors Menu supports both HEX and RGB color values. To enter an RGB value, click the RGB label next to the color value input field inside the Colors Menu to switch the input mode from HEX to RGB. Enter the Red, Green, and Blue values in the fields provided to set your exact color.

The screenshot below shows the Colors Menu panel with the RGB input fields active. The RGB input mode displays three separate number fields for the Red, Green, and Blue values. The toggle between HEX and RGB input modes appears next to the color value fields at the bottom of the color picker.

What happens to the content behind an element when I reduce its opacity?

When you reduce the opacity of an element, the background color or background image behind that element begins to show through and blend visually with the element's color. The lower the opacity value, the more visible the background becomes. This effect applies to the element itself — it does not affect the opacity of other elements on the page or the background behind the element.