Skip to content
Log inStart free

Brand Colors

Add your primary and secondary brand colors in Brand settings, choosing each one with a picker that pairs it with a contrasting color for readable text, so your store, social media, and marketing stay consistent.

Updated
Reading time
2 min
On this page

Your brand colors live on the Brand page in your store settings, under Colors. Tanqory keeps two groups: Primary for your main brand colors and Secondary for supporting accent colors. Setting them here keeps your colors consistent across your store, social media, and marketing, instead of being scattered through your theme.

Before you begin

  • Your role includes Edit online store.
  • Open Settings > Brand in the admin sidebar and scroll to Colors.

Add your brand colors

On the Brand page, scroll to Colors. Under Primary, click Add primary colors to open the Choose brand color picker.

The Choose brand color picker. The Primary and Contrasting tabs (1) are the two parts of one color, the color area and hue slider (2) pick a color visually, the HEX and RGB fields (3) accept an exact value such as 1E3A8A, and the Button Text Preview (4) shows the contrasting color on the primary so you can check it stays readable. (opens full size)

  1. Primary and Contrasting (1) are the two parts of one brand color. The Primary tab sets the color itself; the Contrasting tab sets the color shown on top of it, such as button text.
  2. The color area and hue slider (2) let you pick a color by dragging.
  3. HEX and RGB (3) let you type an exact value instead, for example 1E3A8A for a deep blue.
  4. Preview (4) shows a Button Text Preview, so you can confirm the contrasting color stays readable on the primary.

Click Confirm to add the color. Add more the same way, and use Add secondary colors under Secondary for your accent colors. When you are done, click Save on the bar at the top of the page.

Once saved, the Colors section lists what you set. Each color appears with its hex value and the paired Contrasting color for text, grouped under Primary (1) and Secondary (2). From here you can add more colors or Remove one. As the Primary section notes, these are the brand colors that appear on your store, social media, and more.

After saving, the Colors section lists each brand color with its hex value and a paired contrasting color, grouped under Primary (1) with the deep blue 1E3A8A and Secondary (2) with the amber D97706. Each color has a Remove option. (opens full size)

Note: Use the Contrasting color and the Button Text Preview together to keep text legible on each brand color. A primary that is too light behind white text, or too dark behind black, is hard to read on buttons and labels.

Best practices

  • Set colors once here, so every channel reads the same palette instead of colors hardcoded in the theme.
  • Pair each color with a readable contrasting color, and check it in the Button Text Preview before saving.
  • Keep the palette small, a primary plus a few secondary accents, so your brand stays recognizable.

Next steps

Still stuck?

More in Online Store

  • Create and Edit Pages

    Pages hold standalone content on your online store, such as an About us page or your store policies, separate from your products and collections. You create one from the Pages area, give it a title and content in a rich text editor, and set its web address, visibility, and theme template. This article walks through the page editor and how to create and edit a page.

  • Menus

    Build the navigation menus on your storefront. A menu is a named, ordered list of items that link to pages, collections, products, blogs, or custom URLs, and items can be nested for sub-menus.

  • Metafields and Metaobjects

    Metafields let you add your own custom data to a store resource, such as a product or a customer, for information that does not have a built-in field, while metaobjects let you build custom data structures of your own. You manage both from the Metafields and metaobjects page, where metafield definitions are grouped by the resource they belong to. This article explains the page, how definitions are organized by resource, and how metafields and metaobjects differ.

  • Upload and Manage Your Store Files

    The Files library is where every image, video, and document in your store is stored. Upload from your computer, from a URL, or from Canva, then search, copy links, and replace files from one place.

All 33 articles in Online Store

We use cookies

Necessary cookies keep the site working. With your permission we also use analytics and marketing cookies. Change your choice any time in Cookie settings.