Choosing Your Colors

Color is the fastest way to make your website feel like your business. Set your brand colors once and they flow to every button, link, heading accent, and highlighted section across your whole site, no need to color anything page by page. This guide covers all the color choices on the Identity tab, where to find them, and how to pick a combination that looks sharp and stays easy to read.

You'll find these settings in Site Settings → Branding → Identity. Branding and Site Settings are available to Site Admins; if you're signed in as a Site Editor, you won't see them. As you change any color, the live preview updates so you can see the effect before saving.

Your three brand colors

Every site has three core colors. Each one is a hex color (a standard color code like #1A73E8), and each has a swatch picker: click the color square to open a visual picker, or paste an exact hex code if your brand has one.

ColorWhat it controls
PrimaryYour main brand color. This is the star. It's used for buttons, key accents, and the most important on-screen actions. If you only get one color right, make it this one.
SecondaryA supporting color that pairs with your primary. Used for secondary elements and accents that need to stand apart from the main color without competing with it.
AccentA highlight color for small pops of emphasis, things like link highlights and accents on buttons. Best used sparingly to draw the eye to one thing at a time.

To set a color:

  1. Go to Site Settings → Branding → Identity.
  2. Click the swatch next to Primary (or Secondary / Accent).
  3. Pick a color visually, or paste your exact hex code.
  4. Check the live preview. Notice how buttons and accents update instantly.
  5. Repeat for the other colors, then save.

Text colors (optional)

Below your brand colors is a Text colors section. It's collapsed by default, and for good reason: the defaults are already tuned to match the standard, professional look, so most businesses never need to touch these. Expand this section only if you want precise control over the color of your words.

You can set three kinds of text color, and each one has two versions:

  • Heading text: the color of your titles and section headings.
  • Body text: the color of your regular paragraphs.
  • Small "meta" text: the color of smaller supporting details like dates, captions, and labels.

For each of the three, you'll set a normal color (used on white and light backgrounds) and an "on dark" color (used automatically on dark or brand-colored sections, so your text stays readable when a section's background is dark). You don't have to decide which one to use where. Your site picks the right version based on each section's background.

The eyebrow tag

An eyebrow is the small label that sits just above a section heading, a little kicker like "OUR SERVICES" or "WHY CHOOSE US" that introduces what's below. On the Identity tab you set the eyebrow's look once, site-wide, so every section that uses one is consistent.

There are three eyebrow settings:

  • Eyebrow text color: the color of the eyebrow label itself. Choose Main text, Body text, or Meta text to match one of your text colors, or Primary, Secondary, or Accent to tie it to a brand color. It defaults to your main heading text color (a quiet, readable look), but the text color is fully adjustable if you want the label to stand out more.
  • Marker shape: the small shape that appears before the eyebrow label. Choose from:
    • Use brand default: keep the standard marker for your site
    • None (text only): no marker at all, just the label text
    • Dot: a small filled circle
    • Short line: a brief horizontal dash
    • Vertical bar: an upright line
    • Left indent bar: a bar to the left that indents the label
    • Slash: a forward slash
    • Plus: a small plus sign
    • Brackets: the label framed in brackets
    • Pill: the label inside a rounded pill shape
    • Underline: a line beneath the label
    • Index number: a small numbered marker
  • Marker color: the color of the marker shape. Choose Primary, Secondary, or Accent to tint it with a brand color, or No marker to hide the marker everywhere.

Setting this here means you decide the eyebrow style for the whole site in one place, and every section that shows an eyebrow follows it automatically.

Tips for choosing colors

  • Stick to 2 to 3 colors. A tight palette looks intentional and professional. More than three brand colors and a site starts to feel busy and hard to follow. Your Primary does most of the work; Secondary and Accent are supporting players.
  • Make sure there's enough contrast. Text needs to stand out clearly from its background so it's easy to read for everyone. Avoid light-on-light or dark-on-dark combinations. A common pitfall is a pale primary color used for a button with white text. The text can wash out. When in doubt, check the live preview and squint: if anything's hard to read, adjust.
  • Reserve Accent for emphasis. If everything is highlighted, nothing is. Use your accent color for the one thing you most want visitors to notice.
  • Match your existing brand. If you already have a logo or printed materials, paste those exact hex codes so your website matches everything else customers see.

Good to know

Was this helpful?