Changing the color scheme

Changing your website color scheme is very simple with many preset colors that might work for you. That said, you might need to match your logo with a very specific highlight color. We have built in the functionality for that as well with even more color scheme functionality coming in future iterations of the app.

To change color schemes, just log into your website admin panel and then click "Edit" to launch the Page Builder.

You will notice there is a "Color Scheme" button at the top left of the app. Click the button to view the available preset color schemes.

There are a mixture of color schemes with either a dark or light background that you can simply click on to try. Don't worry about trying to match your logo at this stage, just find the closest color scheme that suits you. Also, don't worry if the highlight color is not an exact match to your logo as that can be adjusted as well. 

Once you have a color scheme that you like, just be sure to Save your page and then Publish on the top right of the app.

Customizing the color scheme further

You can also set the highlight color to an exact hex color. You can do this by using a color picker app that you can run on your computer. Or you can use a Chrome extension and use the Eyedropper tool to select the color from your logo. Once selected, you want to copy the 6 character hex color beginning with the "#" symbol such as #006DD9, which is a medium blue.

Once you have the hex code, just click the Color Scheme button again and then click the "Customize" button adjacent to the highlight color of the current color scheme. This will open up the current colors of the theme. To start, simply swap out all of the hex codes / colors except for any that appear to be white or black (more on that below). Once you have the hex codes added, click "Generate custom theme". Please note that it can take a few minutes to generate the color scheme.

You will then see that the new color is added. If you are satisfied, please be sure to Save your page and then Publish on the top right of the app.

If you find there is not enough color contrast for your text and icons to be legible, you will likely need to start with the opposite page background color. If the difference in contrast is not too bad but could be improved, you can further edit the color scheme hex variables individually.

color highlight: This is the main highlight color through the them. You might need to try a slightly lighter or darker version of the color. We are happy to help with that if you need a hex code.
footer highlight color: Try a lighter or darker color, or try #000000 (black) or #FFFFFF (white)
header highlight icon color: Try a lighter or darker color, or try #000000 (black) or #FFFFFF (white)
header highlight text color: Try a lighter or darker color, or try #000000 (black) or #FFFFFF (white)
highlight text color:Try a lighter or darker color, or try #000000 (black) or #FFFFFF (white)
We want you to get your website looking the way you want so please feel free to reach out to us for help, regardless whether you are on a trial or paid account.

Still need help? Contact Us Contact Us