How to Choose Website Colors and Fonts (and Change Them)

Choosing website colors and fonts comes down to a few simple rules: start from one colour, keep to two fonts, and make sure text is easy to read. This guide covers those rules first. Then it shows three ways to change the colours and fonts on a Sitelas site, which applies them everywhere at once: buttons, headings, forms, the header and the footer.

How to choose your website colors

• Start from one colour. Pick your brand colour and build the rest around it. If you have a logo, take it from there.
• Use two or three colours at most: a main colour, a neutral background and, if you want, one accent.
• Save the main colour for things to click. Use it on buttons and links, so they stand out. Covering every section in it makes nothing stand out.
• Check the contrast. Light grey text on a white background is a common mistake. If it's hard to read on a phone in daylight, it's too light.

How to choose your website fonts

• Safest: one font for everything, in two or three weights.
• Classic: a serif for headings and a clean sans-serif for body text.
• Avoid: more than two fonts, or decorative fonts for paragraphs.
• Match the mood. A serif feels calm and established. A rounded sans-serif feels friendly. A tight, plain sans-serif feels modern.

How to change colors and fonts on your site

Every Sitelas template comes with its own colours and fonts. There are three ways to change them.

Option 1: Ask your AI agent

If you've added Sitelas to Claude or another agent, describe the look you want:

Make the colours warmer: cream background, deep green buttons, and a serif font for headings.

The agent updates the whole theme and sends you a preview. If a colour change makes some text hard to read, Sitelas picks a readable colour for that text and the agent tells you what changed. Nothing changes on your live site until you say publish. Building from your own agent doesn't use any Sitelas credits.

Option 2: The editor's built-in AI

Open your site in the editor and type the same request into the AI panel. It makes the change on the page as you watch. This chat uses AI credits; every account gets a starting balance, and you can top up any time.

Option 3: The Theme panel

Prefer to pick things yourself? Open the Theme panel in the editor. You can:

• set your main, secondary, accent, background and text colours,
• pick a heading font and a body font,
• adjust corner rounding, spacing and shadows.

Match your logo

If you have a logo, ask your agent: "Use the green from my logo as the main colour." It can build the rest of the colour set around that one colour.

Check it on a phone

Many visitors will see your site on a phone. After any change, switch the editor to its mobile view, or open the preview link on your phone. Check that headings aren't too big, text is easy to read and buttons still stand out.

Questions people ask

How do I decide on a colour and font style for my website? Start from one brand colour, often from your logo, and add a neutral background. Then pick one font, or a serif for headings with a sans-serif for body text. Check that the text is easy to read on a phone.

How do I change the font on my website? Ask your agent, or open the Theme panel in the editor and pick a heading and body font. The change applies to every page at once.

Can I use my own font? Not a font file of your own yet. An agent can choose from 90 supported Google Fonts, and the Theme panel lists a shorter set. Ask your agent for the closest match to your brand font.

Will my live site change straight away? No. Colour and font changes go to your draft and preview first. Your live site updates only when you publish.

Want a different structure, not just a new look?

If the colours are fine but the layout isn't, a different template may suit you better. See How to Choose the Right Template, or browse the template gallery. Start at sitelas.com.