How to Change Your Colors (AI Site Builder)

Your site’s colors can be one of the ready-made sets, or your own brand color. Either way, the builder works out every shade it needs (buttons, text, light backgrounds) so that words stay easy to read. Changing colors is free and changes no words or photos.

Before you start

Open your site in the editor (Tools > Website > Edit website).
If you want your logo’s colors, upload your logo first and tag it Logo in Photos.

Steps

Pick a ready-made set

Choose Change the look, then look at Colors.
The first set belongs to your style. The others are sets that suit it. Each circle shows the main color with the highlight color as a small dot.
Choose one. The preview shows your site in those colors right away.
Choose Apply look to keep it, or Cancel to leave your site as it was.

Use your own color

In Colors, choose Custom. Your colors opens.
Set Your main color in one of three ways:
- choose one of the colors under From your logo (up to three, read from your logo),
- type its code, for example #2f6b3a,
- or choose Pick a color to use your device’s color picker.
Optional: set a Highlight color the same way, or leave Let AI choose on and the builder picks one that goes with your main color.
Check the sample card. It shows a dark band like your header, your page with its text, a button and a link, in the colors visitors will see.
Choose Use these colors to keep the change, or Cancel to go back without it.

Fine-tune colors: page, text, dark parts and buttons

Your main color sets every other color for you. If you want one part in a color of your own, you can pick it here. Each one is Automatic until you pick it.

In Your colors, open Fine-tune colors.
Pick a color for any of these:
- Page: the background of your pages.
- Text: the color of your paragraphs.
- Dark parts: the dark header, the footer and the dark bands across a page.
- Buttons: the fill of your buttons. Links and headings keep your main color.
For each one, tap the color square to use your device’s color picker, or type its code, for example #f5f0e1.
Watch the preview and the sample card. If a color would be hard to read, the builder changes it just enough so it reads well, the row says Adjusted for readability, and a note says what it did, for example “I made the text a bit darker so it’s easy to read.”
Choose Use these colors to keep it.

To undo one color, choose Automatic next to it. To undo them all, choose Reset fine-tuning. Picking a ready-made set or a new style starts again without fine-tuning; picking a new main color keeps it.

Ask for it in your own words

Type a request in the box, for example “use my logo colors”, “make it blue” or “make the buttons orange”. The assistant makes the change for you to keep or undo. Requests about colors are free.

Why a color can look a little different on buttons

White words on a light color are hard to read. When your main color is too light for that, buttons use a deeper shade of the same color, and a note says so with the two side by side (“Your green” and “Used for buttons”). Your exact color is still used for lines, icons and large headings where it is easy to see. There is no switch to turn this off: every visitor should be able to read your buttons.

Tips

Use the color your customers know. If your trucks and shirts are green, use that green.
One strong color is enough. Let the highlight color be quiet, or let the builder choose it.
Change your mind any time. Choose a ready-made set again to go back.
Fine-tune only what you need. Most sites look best with everything on Automatic. A page color that matches your trucks or a button color from your logo is plenty.

Troubleshooting

No colors under From your logo: your site has no photo tagged Logo, or the logo is only black, white and grey. Tag your logo in Photos, or type your color.
The code is not accepted: use a # followed by three or six letters and numbers, for example #2f6b3a. The # is optional.
My color looks a little different on the site: it was hard to read, so the builder moved it just enough to read well. The note in Your colors says what changed. Try a slightly lighter or darker color if you want it exact.