SiteSmith

How to choose a color scheme for your new business website

The best color scheme for a small business website usually already exists: it is on your logo, your truck, your storefront sign and your uniforms. Start there, pick one main color and one accent for buttons, keep the background light and the text dark, and check that every word is easy to read on a phone in daylight. Customers should recognize your business from the colors, and never have to squint at them.

Start from what customers already see

Your customers have seen your colors long before they visit your website. The van parked on their street, the sign over your door, the shirt your technician wore, the business card on their fridge. When the website uses the same colors, it feels like the same business, and that recognition builds trust before they read a word.

Collect your existing colors:

  • Logo. The main source in most cases.
  • Truck or van wrap.
  • Storefront sign and awning.
  • Uniforms, hats, aprons.
  • Business cards, invoices, yard signs, menus, packaging.

If these all agree, your choice is made. If they do not, pick the colors on the things customers see most often, which for a home-service business is usually the truck, and for a shop is usually the sign.

Get the exact color, not a guess

Colors look different in photos, on screens and in print, so ask for the actual values rather than matching by eye:

  • Your logo designer can tell you the colors as hex codes (a six-character code like #1F4E79 that websites use), and often Pantone or CMYK codes for print.
  • Your sign shop, wrap company or printer keeps the color codes on file from the job.
  • The logo file itself. If you have an SVG or a high-quality PNG, any designer can pick the exact color from it in seconds.

Avoid picking colors from a photo of your truck. The light, the camera and the paint fading in the sun all shift the color.

Build a simple scheme: four roles

Most good small business websites use only a few colors, each with a job:

  1. Main brand color. From your logo. Used for the header or footer background, headings, or a band across the page. It says "this is us".
  2. Accent color. Used for buttons and links, especially the "Call now" and "Get a quote" buttons. It must stand out from everything else on the page, so a customer's eye goes straight to the action. Often a second logo color, or a brighter or darker version of the main one.
  3. Background. White or a very light warm or cool off-white for most of the page. A pale tint of your brand color works well for alternating sections.
  4. Text. Near-black or very dark gray. Not mid-gray, which looks stylish on a designer's large monitor and fades on a phone.

If your logo has three or four colors, you do not have to use them all on the site. Using the extra ones sparingly, for small details, keeps the page calm.

Contrast: the part that matters most

A color scheme that looks good but makes text hard to read is a bad color scheme. Contrast is how different the text color is from the background behind it. Low contrast is the most common color mistake on small business sites, and it hits older customers hardest.

Practical rules:

  • Dark text on a light background for anything longer than a few words.
  • Light text on dark backgrounds only for short things: a header, a banner, a button.
  • Bright brand colors like yellow, orange or light green rarely work as text on white. Use them as a background behind dark text, or use a deeper shade for text.
  • Never put text over a busy photo without a dark or light band behind it.
  • Do not rely on color alone to show something, like red for "closed". Some customers cannot tell red from green. Add the word.

The web's accessibility guidelines, published by the W3C, set a minimum contrast ratio for normal text of 4.5 to 1. You do not need to calculate it yourself: free online contrast checkers tell you whether two colors pass when you enter their codes. Making your website easy to read for everyone covers this alongside text size.

When you have no brand colors

If you have no logo, or your logo is black and white, choose colors that suit your trade and your town, not this year's trends:

  • Look at your premises or your work. The wood of your workshop, the green of the lawns you cut, the brick of your storefront.
  • Think about the feeling customers need. A pest control company wants calm and competent, not alarming. A bakery can be warm. A law office can be steady and quiet.
  • Choose one color you like and can live with for years, and build the rest with white, dark text and one accent.

Avoid copying the exact colors of a well-known competitor in your area; customers may confuse you. And if a new logo is on your mind, read whether you need a new logo before a new website before you commit to colors.

Common color mistakes

  • Too many colors, so nothing stands out, including the call button.
  • Gray text on white, or white text on pastel.
  • A dark background for the whole site, which is tiring for longer reading.
  • Buttons the same color as the headings, so they do not look clickable.
  • Colors that change from page to page.
  • A logo that disappears against the header color. Using your logo well explains how to avoid that.

What to do this week

  • Photograph your truck, sign, uniform and cards side by side and see which colors repeat.
  • Ask your logo designer, sign shop or printer for the color codes.
  • Choose a main color, an accent for buttons, a light background and dark text.
  • Check your text and button colors in a free contrast checker.
  • Do the black-and-white phone test on any draft.

Colors work together with type, so look at choosing fonts for a small business website too. If you have a site already, you can see your site rebuilt first in your own brand colors and judge them on your phone.