Choosing colours for your ecommerce store is not just about appearance. Colours affect readability, usability, and how clearly customers can navigate your store.
The eCommerce Builder allows you to define three colours for your shop:
Primary colour
Secondary colour
Accent colour
Each colour is used throughout the site for elements such as buttons, links, banners, and highlights.
Choosing colours with good contrast will keep your shop clear and professional.
The Three Colour Roles
Primary Colour
Your primary colour is the strongest colour in your palette.
It is commonly used for:
• primary buttons
• call-to-action areas
• banners
• important highlights
Because this colour often appears behind text, it should usually be a darker colour. Dark colours maintain contrast with white text and make buttons easy to read.
Secondary Colour
The secondary colour supports the primary colour.
It is commonly used for:
• links
• hover states
• secondary buttons
• small highlights
This colour should be slightly lighter than the primary colour but still strong enough to remain visible against a white background.
Accent Colour
The accent colour is used sparingly to add visual interest.
It may appear in:
• small highlights
• decorative elements
• badges or subtle UI elements
Accent colours are usually the lightest colour in the palette.
Soft colours such as blush tones or pale pastels work well here because they are used in small areas rather than as buttons or text.
Example accent colour that works well:
#E6A8B5
Why Very Light Colours Can Cause Problems
Many people choose very light colours because they look elegant on a colour picker.
However, colours such as pale pink, soft beige, or pastel peach can become difficult to see when used as links or buttons.
If a colour is too light:
• links may look disabled
• text may be difficult to read
• buttons may appear faded
• visitors may not realise something is clickable
For this reason, it is best to keep your colour palette structured like this:
Primary colour
dark
Secondary colour
medium tone
Accent colour
light
How To Enter Colours
The colour selector in the eCommerce Builder allows three different ways to choose a colour.
Colour Picker
The easiest option is to use the visual colour picker. You simply click the colour box and choose a colour using the palette.
This is the quickest method if you are experimenting with colours.
Hex Colour Codes
You can also enter colours using hex colour codes.
These look like this:
#7A2E4D
Hex colours are the most common format used in website design.
If you already know your brand colours, you can paste them directly into the field.
RGB or HSL Values
Advanced users may also enter colours using RGB or HSL values.
Examples:
RGBrgb(122, 46, 77)
HSLhsl(340, 45%, 33%)
Most store owners will never need to use these formats, but they are available if you already have them from a design system.
Where To Find Good Colour Combinations
If you do not yet have brand colours, there are many free tools that can help you generate palettes.
Popular options include:
Google search
“colour palette generator”
Adobe Color
color.adobe.com
Coolors
coolors.co
These tools generate palettes that already work well together.
You can simply copy the hex colour codes and paste them into your shop settings.
Using AI To Generate Brand Colours
If you do not have a brand colour yet, you can also use AI to help you generate one. The AI will often provide a small palette with hex colour codes that you can copy directly into the colour fields. This is one of the easiest ways to quickly create a consistent colour scheme if you don't already have one.
To get the best brand colours for your niche from an AI, you need a prompt that defines your brand identity, target audience, and the emotional vibe you want to evoke.
Make sure you change this to fit your needs. You may not want all of that information so remove what you don't want and add anything you do.
AI Prompt Example
---
"Act as a professional brand strategist and designer. I am launching a digital eCommerce store selling digital templates and PDFs in the [Insert Niche here, e.g. Fitness Industry] niche. My role is [ Insert role, e.g. A Personal trainer].
My brand is in the [Insert Sub-Niche, e.g., women over 40] niche. The brand personality is [Insert Traits, e.g., rustic, modern-minimalist, playful, or high energy].
Please generate 3 distinct color palettes (Primary, Secondary, and Accent colors) including HEX codes.
Also explain: The Target Audience Appeal: How these colors will resonate with [Insert Audience, e.g., urban millennials / retiree hobbyists]. Any colour combinations I should avoid
Accessibility: How the palette maintains good contrast for website readability. Ensure high contrast for text readability on website backgrounds."
---
The above is enough but if you want to you can also include these key details:
The Color Psychology: Why these colors fit a [niche/industry brand] with our specific personality.
Sub-Niche Specifics: If you are a gardener, mentioning if you focus on "luxury landscaping" vs. "budget DIY seed starting" will drastically change the suggested tones from "deep emerald/gold" to "bright, energetic orange/terracotta". So it is worth adding sub-niche specifics.
Emotional Impact: Decide if you want to convey calm and trust (cool blues/greens) or energy and growth (warm reds/oranges/yellows).
Visual Inspiration: Upload a photo of a garden or a plant to tools like Adobe Color or Recraft to extract a natural palette.
Specialized AI tools for color include:
Khroma: Learns color preferences to create personalized combinations.
Huemint: Shows how colors will look in website or graphic designs.
Colormind: Generates palettes based on photographs and art
Matching Colours To Your Logo
If you already have a logo, the best approach is to match your shop colours to the colours used in the logo.
If your logo was designed by a graphic designer, simply ask them for the HTML colour codes used in the design.
These will normally be provided as hex colour codes.
You can paste those codes directly into the colour fields in your shop settings.
Finding Colours Inside Canva
If your logo was created in Canva, you can easily find the colour codes there.
Open your design in Canva and click on the colour used in the logo. Canva will display the colour information and show the hex colour code.
You can copy that code and paste it directly into the colour field in your shop settings.
A Simple Colour Structure That Works
A safe and reliable colour structure looks like this:
Primary colour
deep or dark
Secondary colour
medium tone
Accent colour
light highlight
This structure keeps your site readable, ensures buttons stand out clearly, and prevents links from disappearing into the background.
Final Advice
The most common design problem in ecommerce sites is using colours that are too light.
A slightly darker primary colour combined with a medium secondary colour and a light accent colour almost always produces the best results.
If you keep that structure in mind when choosing your colours, your shop will remain clear, readable, and visually consistent across every page.