Skip to content
  • There are no suggestions because the search field is empty.

Manually overriding your website's colors

Learn how to manually override your website's colors.

 

maddy-modified

Written by: Madeline B.

Last updated: 29 Sep., 2025

If you have a specific color palette in mind, you can apply it to your website by following these steps:

Note: This article covers steps to manually override your website's light, dark, and accent colors sitewide. If you would like to update your website's colors, font, or theme without customization, refer to this article.

Customizing your website's color palette

1. In the left sidebar, click website Website > website Style > Colors.

2. Click Override colors.


​3. Under the Color palette section, adjust settings for Light, Dark, Accent, Text, and Miscellaneous.

Click on the color you want to edit, then use the color picker, hex code, or RGB values to match your exact brand colors.

You can select a color using the gradient tool provided or by copying and pasting the hex code of the exact color you'd like to utilize

Tip: Before changing your palette, note your current color values so you can revert if needed.

4. When finished, click Generate color overrides.

5. Click Yes. Your site preview in the right-hand editor will update automatically. Continue refining until the colors align with your brand.


5. For even more customization, you can adjust color settings for individual sections of your site. Under Sections, you’ll see Light, Dark, and Accent options for the following areas:

  • General – Section background

  • Navigation – Logo text, navigation links, active navigation link

  • Hero – Title, subtitle, content box background

  • Content – Section title, section subtitle, text, secondary text, links (and hover states), social links (and hover states)

  • Collection items – Title, subtitle, note, date, description, summary

  • Forms – Labels, field background, borders, placeholders, text

  • Scheduling form – Title, title background, current date, weekdays, day buttons, daytime labels, empty day message, timezone dropdown

  • Contact details – Title, links (and hover states)

  • Sliders – Arrows, arrow backgrounds, dots, testimonial quotes, names, positions

  • Footer – Group/column titles, links (and hover states)

  • Miscellaneous – Borders, decorative elements, alternating backgrounds, danger color

6. To make your changes live, click Publish in the top-right corner.

Note: Overriding colors changes them sitewide. If you want to revert later, you can either: