Configure Scale Theme's color palettes to create your store's visual identity. Complete system with 6 colors per palette, gradients, and automatic propagation.
Colors & palettes
Colors are the foundation of your store's visual identity. Scale Theme uses a Color Schemes (color palettes) system that lets you define consistent sets of reusable colors across every section of your site. Change a color in the palette, and it automatically propagates everywhere that palette is used: buttons, text, backgrounds, links, icons, borders...
How the palette system works
The principle
Rather than defining colors section by section (which would quickly become inconsistent), Scale Theme lets you create up to 6 global color palettes. Each section of your site then uses one of these palettes. The result: a perfectly consistent visual identity, changeable in a single click.
The 6 colors in each palette
Each palette contains exactly 6 colors + an optional gradient. Here is the precise role of each one:
| Color | Role | Where it appears concretely |
|---|---|---|
| Text | Primary text | Headings (h1, h2, h3...), paragraphs, form labels, menu text |
| Text secondary | Secondary / muted text | Product descriptions, metadata (SKU, tags), help text, icons |
| Background | Section main background | Full background color of the section |
| Background secondary | Secondary / alternate background | Product card backgrounds, button hover backgrounds, framed areas, form fields |
| Accent 1 | Primary action color | "Add to cart" button (Style 1), links, promotion badges, sale prices, active indicators |
| Accent 2 | Secondary action color | Secondary buttons (Style 2), "New" badges, labels, supporting elements |
rgb() prefix to easily handle opacity. For example, for a semi-transparent background, the theme automatically applies rgba(var(--color-background), 0.5).The background gradient (Gradient)
In addition to the solid Background color, each palette offers an optional Gradient field. If a gradient is defined, it replaces the solid background color in sections that use that palette.
. Show the same content with a solid background alongside for comparison.)
How colors propagate
This is the real power of the palette system: when you modify a color, it automatically propagates throughout the entire theme. Here is how each color feeds into the different elements:
Buttons
| Button element | Color used |
|---|---|
| Style 1 button background | Accent 1 (default, configurable) |
| Style 1 button text | Background (default, configurable) |
| Style 2 button background | Accent 2 (default, configurable) |
| Style 2 button text | Background (default, configurable) |
| Style 3 button background | Transparent (default, configurable) |
| Style 3 button text | Background (default, configurable) |
| Button borders | Darker variant of the background color |
on a light palette (white background, orange accent 1, red accent 2) and the same 3 buttons on a dark palette (black background, gold accent 1, burgundy accent 2). Arrows indicate which palette color feeds which button element.)
Links and interactive elements
| Element | Color used |
|---|---|
| Text links | Accent 1 |
| Links on hover | Accent 1 (auto-generated darker variant) |
| Active indicator (tab, filter) | Accent 1 |
| Checked checkbox / radio | Accent 1 |
| Progress bar | Accent 1 |
Cards and surfaces
| Element | Color used |
|---|---|
| Product card background | Background secondary |
| Form field background | Background secondary |
| Element hover background | Background secondary |
| Subtle borders | Text at 15% opacity |
| Shadows | Text at 10% opacity |
Text and icons
| Element | Color used |
|---|---|
| Headings | Text |
| Body text | Text |
| Secondary text | Text secondary |
| Icons | Text secondary |
| Strikethrough price | Text secondary |
| Sale price | Accent 1 |
Automatically generated variants
Scale Theme automatically generates variants for each color in the palette, without you needing to define them:
| Variant | How it's calculated | Usage |
|---|---|---|
--color-background-dark | Background -8% brightness | Hover background, active backgrounds |
--color-accent-1-dark | Accent 1 -10% brightness | Style 1 button on hover |
--color-accent-2-dark | Accent 2 -10% brightness | Style 2 button on hover |
--color-foreground-secondary | Text at reduced opacity | Light text, placeholders |
and in its hover state (Accent 1 Dark color, automatically generated). Show the subtle difference in shade.)
Creating effective palettes
Palette 1: Light (the base)
This is the palette that the majority of your sections will use. It should be light, readable, and professional.
Recommended values:
- Background:
#FFFFFF(pure white) or#FAFAFA(off-white) - Background secondary:
#F6F6F6(very light gray) - Text:
#121212(near-black, softer than pure black) - Text secondary:
#777777(medium gray) - Accent 1: Your brand's primary color (e.g.,
#EB9F11orange,#2563EBblue,#10B981green) - Accent 2: A complementary color (e.g.,
#AE2F11red,#7C3AEDpurple)
, red "New" badge (Accent 2). Show the header, a hero section, and a product grid.)
#000000. A near-black like #121212 or #1A1A2E is easier on the eyes and gives a more premium look.Palette 2: Dark (for contrast)
A dark palette creates strong contrast with the light palette. Ideal for highlight sections, the header, or the footer.
Recommended values:
- Background:
#1A1A1Aor#0F172A(very dark blue) - Background secondary:
#2D2D2Dor#1E293B - Text:
#F5F5F5(off-white) - Text secondary:
#A0A0A0(light gray) - Accent 1: Same accent as the light palette (or a more vivid version to compensate for the dark background)
- Accent 2: More vivid version of accent 2
using the dark palette: dark background, light text, buttons with accents that stand out. The contrast with the surrounding light sections should be visible.)
Palette 3: Accent (for "wow" sections)
A palette where the background IS the accent color. Very impactful for promotion sections, special offer banners, or CTAs.
Recommended values:
- Background: Your main accent color (e.g.,
#EB9F11) - Background secondary: Slightly darker version of the accent
- Text:
#FFFFFF(white) - Text secondary:
#FFFFFFat reduced opacity - Accent 1:
#FFFFFF(white, for buttons on colored background) - Accent 2:
#1A1A1A(dark, for secondary buttons)
, white text, white button. The effect is a section that "jumps out" among light and dark sections.)
Palettes 4, 5, 6: Additional variations
Use them for specific sections:
- Testimonials palette: soft cream/beige background
- Promotions palette: red/pink background with white text
- Eco sections palette: pale green background
Alternating palettes to create rhythm
The secret to a visually dynamic page: alternate palettes between sections. This creates visual breaks that guide the eye and prevent monotony.
in dark palette, Section 2 (Featured Collection) in light palette, Section 3 (Promotion) in accent palette, Section 4 (Testimonials) in light palette, Section 5 (Newsletter) in dark palette. The alternation creates a clear visual rhythm.)
Examples of effective sequences
For a fashion store:
Hero (dark) → Featured collection (light) → Promo banner (accent) →
New arrivals (light) → Testimonials (dark) → Newsletter (accent)For a tech store:
Hero (dark) → Popular products (light) → Features (dark) →
Comparison (light) → FAQ (light) → Final CTA (accent)For a food store:
Hero (light) → Categories (light) → Chef's selection (accent/warm) →
Testimonials (light) → Subscription (dark) → Footer (dark)Usage in sections
Every Scale Theme section has a Color palette setting in its configuration.
How to change a section's palette
- Open the Shopify editor (Customizer)
- Click on the section you want to modify
- In the side panel, look for the Color palette setting (in the "Colors" group)
- Click on the desired palette
- The section instantly updates all its colors
. Right: dark palette (black background, white text, orange button). The content is identical, only the colors change.)
Modifying an existing palette
To modify a palette's colors:
- Go to Theme settings (gear icon at the bottom left of the Customizer)
- Click on Colors
- Select the palette to modify
- Modify the colors with the pickers
- All sections using that palette update in real time
Tips for choosing colors
Contrast and accessibility
The contrast between text and background is crucial for readability and accessibility (WCAG). Here are the minimum ratios to follow:
| Elements | Minimum ratio | Recommended |
|---|---|---|
| Body text | 4.5:1 | 7:1 |
| Headings (large text) | 3:1 | 4.5:1 |
| Text on buttons | 4.5:1 | 7:1 |
| Secondary text | 3:1 | 4.5:1 |
Consistency with your brand
- Your Accent 1 should be your logo/brand's primary color
- Your Accent 2 should be a complementary color that works well with Accent 1
- Background and text colors should remain neutral to showcase your products
How many palettes to use?
| Number | For whom | Why |
|---|---|---|
| 2 palettes | Most stores | Light + dark covers 90% of needs |
| 3 palettes | Stores with frequent promotions | Light + dark + accent for promotions |
| 4-6 palettes | Premium / storytelling stores | Each section has its own ambiance |
, product sections in light palette (white background), and a promotion banner in the middle in accent palette (vivid colored background). The whole is harmonious and consistent.)
Summary
| Concept | Key takeaway |
|---|---|
| 6 colors per palette | Text, Text secondary, Background, Background secondary, Accent 1, Accent 2 |
| Automatic propagation | Modify a color, it propagates everywhere |
| Auto variants | The "dark" and "secondary" variants are generated automatically |
| Optional gradient | Replaces the solid background if defined |
| Alternation | Alternate palettes between sections to create rhythm |
| Up to 6 palettes | But 2-3 are enough for most stores |