How to Customize Your Website Colors with Zibster
Make your website match your brand with just a few clicks! Zibster makes it easy to update your global color scheme so your site feels polished, cohesive, and completely “you.”
Tips For Creating The Perfect Color Scheme
- Use accent colors sparingly to make key elements pop.
- Choose soft background colors that don’t overpower your text or images.
- Always prioritize readability—make sure your text contrasts clearly against your background.
👉 Want more help with choosing the right colors?
Click the button below for our in-depth guide:
Tips on Creating The Perfect Color Scheme
STEP ONE
Log in to your Zibster account, then click on WEBSITE in the left-side menu.
STEP TWO
At the top of your control panel, click on DESIGN to access your global design settings.
STEP THREE
Click the EDIT DESIGN SETTINGS button.
STEP FOUR
In the right-hand menu that appears, click on COLORS. This will open your Global Color Picker.
Your colors are organized into five groups:
- Accent Colors
- Button Colors
- Background Colors
- Icon Colors
- Text Colors
Here’s what each section controls:
ACCENT COLORS
These are the standout colors used across your site.
- Accent Color #1 – Controls hover effects, page titles, and highlighted text.
- Accent Color #2 – Sets the background for the last item link and some item/caption titles.
- Accent Color #3 – Controls backgrounds for site links, social icons, your checkout area, and your menu block.
Note: These may appear differently depending on your template.
BUTTON COLORS
Customize the text and background of your buttons.
BACKGROUND COLORS
Set background colors for different parts of your site:
- Content Background
- Footer Background
- Form Background (used on forms and ecommerce quantity selectors)
- Site Background (overall page background)
Choose subtle tones that support your accent colors without distracting from your content.
ICON COLORS
These colors apply to the various icons on your site:
- Icon Color – Controls the color of social media icons.
- Icon Background – Sets the background behind your icons.
- Content Icons – Affects icons like external links, gift cards, and video play buttons.
TEXT COLORS
- Menu Text – Adjusts the color of your main website navigation menu.
- Site Text – Controls paragraph text, form labels, and ecommerce item descriptions.
- Contrast Text – Used in areas like gallery controls, checkout text, and scheduling tools.
- Footer Content Text – Sets the text color in your website footer.
STEP FIVE
Choose Your Colors
- Click the color square next to any item to open the color wheel.
- Select your new color, enter a specific color code, or choose from your Accent Colors or Recently Used Colors.
- Click OK to apply that color.
FINAL STEP
Once you’ve finished making your changes, scroll to the bottom and click SAVE CHANGES.
Your updated colors will now appear on your live website!
