SScale Themedocs
FR

Understand Scale Theme's color palette system and learn to create visual contrast between your sections.

Color Palettes

Scale Theme uses Shopify's native Color Schemes system. Each section chooses a palette, and all of the section's colors (text, background, buttons, accents) adapt automatically.

How It Works

The Principle

Each palette defines a coherent set of 6 colors + 1 optional gradient. When you assign a palette to a section, it inherits all colors without additional configuration.

"Light" Palette                     "Dark" Palette
┌─────────────────────┐            ┌─────────────────────┐
│ Background: #FFFFFF  │            │ Background: #1A1A1A  │
│ Background 2: #F5F5F5│            │ Background 2: #2D2D2D│
│ Text: #121212        │            │ Text: #F5F5F5        │
│ Text 2: #666666      │            │ Text 2: #AAAAAA      │
│ Accent 1: #E63946    │            │ Accent 1: #FF6B6B    │
│ Accent 2: #457B9D    │            │ Accent 2: #64DFDF    │
└─────────────────────┘            └─────────────────────┘

The 6 Colors in a Palette

ColorRoleTypical Usage
TextPrimary textHeadings, paragraphs, labels
Text secondarySecondary textDescriptions, metadata, lighter text
BackgroundPrimary backgroundSection background color
Background secondaryAlternate backgroundCards, highlights, secondary areas
Accent 1Primary accentMain buttons, links, active elements
Accent 2Secondary accentSecondary buttons, badges, complementary elements

Each palette also supports an optional background gradient that replaces the solid background.

Generated CSS Variables

For each palette, Scale Theme automatically generates CSS variables and derived variants:

VariableFormatDescription
--color-backgroundr,g,bPrimary background
--color-background-secondaryr,g,bSecondary background
--color-background-darkr,g,bDarkened background (-8% brightness)
--color-foregroundr,g,bPrimary text
--color-foreground-secondaryr,g,bSecondary text
--color-foreground-darkr,g,bDarkened text
--color-accent-1r,g,bPrimary accent
--color-accent-1-darkr,g,bDarkened primary accent
--color-accent-2r,g,bSecondary accent
--color-accent-2-darkr,g,bDarkened secondary accent
--gradient-backgroundgradientOptional gradient
⚠️Variables are in r,g,b format (without rgb()). You must always use them with rgb() or rgba() in CSS: ``css /* Correct */ background: rgb(var(--color-background)); color: rgba(var(--color-foreground), 0.5); /* Incorrect */ background: var(--color-background); ``

Usage in Sections

Every Scale Theme section has a Color palette setting in the editor. Select the desired palette and the section automatically inherits all colors.

In the code, the palette is applied via the CSS class:

<div class="color-{{ section.settings.color_palette }}">
  <!-- All content inherits the colors -->
</div>

Creating Visual Rhythm

The power of the palette system lies in alternating between sections. By varying palettes, you create visual rhythm that guides the eye and maintains attention.

SectionSuggested PaletteEffect
Banner (Hero)Dark or AccentStrong impact, first impression
Featured CollectionLightBreathing room, focus on products
Rich text / TestimonialsDarkContrast, visual separation
Product gridLightReadability, catalog focus
CTA / NewsletterAccentDraws attention, encourages action
FooterDarkCloses the page
💡Alternate palettes between sections to create visual rhythm. For example: light > dark > accent > light. Avoid two consecutive sections with the same dark palette, as the boundary between them becomes invisible.

Creating Effective Palettes

Light palette (main scheme)

  • Background: White or very light (#FFFFFF, #FAFAFA)
  • Text: Dark (#121212, #1A1A1A)
  • Accent 1: Vivid brand color
  • High contrast, ideal for main content

Dark palette (emphasis)

  • Background: Dark (#1A1A1A, #111111)
  • Text: Light (#F5F5F5, #EEEEEE)
  • Accent 1: Same accent as the light palette (or a more vivid version)
  • Creates strong contrast with light sections

Accent palette (CTAs, promos)

  • Background: Your accent color
  • Text: White (#FFFFFF)
  • Accent 1: White or contrasting color
  • Draws attention, ideal for calls to action

Secondary palette (subtle variation)

  • Background: Very light gray (#F5F5F5, #F0F0F0)
  • Text: Same as the light palette
  • Accent: Same as the light palette
  • Subtle difference, ideal for alternating without a strong break
ℹ️Shopify allows creating up to 21 color palettes. In practice, 3 to 5 palettes cover the majority of needs: one light, one dark, one or two accent, and one subtle variation.

Automatic Variants

The -dark variants are automatically calculated by Scale Theme (-8% brightness). They are used for:

  • Hover states of buttons and links
  • Subtle borders
  • Shadows and depth
  • Active states of interactive elements

You don't need to configure these variants manually. The css-variables.liquid system generates them from your base colors.

PreviousCoupon CodeNextAnimation System