Color Schemes

Overview

Horizon uses a powerful color scheme system that allows you to define multiple color palettes and apply them to different sections of your store. Each color scheme contains 30+ color definitions for comprehensive theming.

Color Scheme Structure

Each color scheme is defined in settings_schema.json with the following properties:

Core Colors

color

default:"#FFFFFF"

Main background color for the section

Supports alpha transparency
Used for page and section backgrounds

color

default:"#000000"

Primary text color

Used for body text and paragraphs
CSS variable: --color-foreground

color

default:"#000000"

Heading text color

Used for H1-H6 elements
CSS variable: --color-foreground-heading

color

default:"#000F9F"

Primary accent color

Used for links and interactive elements
CSS variable: --color-primary

color

default:"#000000"

Hover state for primary color

CSS variable: --color-primary-hover

color

default:"#E6E6E6"

Border color for elements

CSS variable: --color-border

color

default:"#000000"

Shadow color for depth effects

Used with opacity for drop shadows
CSS variable: --color-shadow

Button Colors

Primary Button

color

default:"#000F9F"

Primary button background color

color

default:"#FFFFFF"

Primary button text color

color

default:"#000F9F"

Primary button border color

color

default:"#000F9F"

Primary button background on hover

color

default:"#FFFFFF"

Primary button text color on hover

color

default:"#000F9F"

Primary button border on hover

Secondary Button

color

default:"#FFFFFF"

Secondary button background color

color

default:"#000000"

Secondary button text color

color

default:"#000000"

Secondary button border color

color

default:"#FFFFFF"

Secondary button background on hover

color

default:"#000000"

Secondary button text color on hover

color

default:"#000000"

Secondary button border on hover

Form Input Colors

color

default:"#FFFFFF"

Input field background color

color

default:"#000000"

Input field text color

color

default:"#000000"

Input field border color

color

default:"#F5F5F5"

Input field background on hover/focus

Variant Picker Colors

Default State

color

default:"#FFFFFF"

Variant button background

color

default:"#000000"

Variant button text

color

default:"#E6E6E6"

Variant button border

Hover State

color

default:"#F5F5F5"

Variant button background on hover

color

default:"#000000"

Variant button text on hover

color

default:"#E6E6E6"

Variant button border on hover

Selected State

color

default:"#000000"

Selected variant button background

color

default:"#FFFFFF"

Selected variant button text

color

default:"#000000"

Selected variant button border

color

default:"#1A1A1A"

Selected variant button background on hover

color

default:"#FFFFFF"

Selected variant button text on hover

color

default:"#1A1A1A"

Selected variant button border on hover

Default Color Schemes

Horizon includes 6 pre-configured color schemes:

Scheme 1 - Clean White

Background: #ffffff (White)Text: #000000 (Black)Primary: #000000 (Black)Perfect for clean, minimal designs with high contrast.

Scheme 2 - Soft Gray

Background: #f5f5f5 (Light Gray)Text: #000000 (Black)Primary: #000000 (Black)Subtle background for sections that need slight separation.

Scheme 3 - Natural Green

Background: #eef1ea (Light Green)Text: #000000 (Black)Primary: #000000 (Black)Organic, nature-inspired palette.

Scheme 4 - Sky Blue

Background: #e1edf5 (Light Blue)Text: #000000 (Black)Primary: #1d3686 (Deep Blue)Calm, trustworthy palette with blue accents.

Scheme 5 - Dark Mode

Background: #333333 (Dark Gray)Text: #ffffff (White)Primary: #ffffff (White)High-contrast dark theme for modern designs.

Scheme 6 - Transparent Overlay

Background: rgba(0,0,0,0) (Transparent)Text: #ffffff (White)Primary: #ffffff (White)For overlaying content on images or videos.

CSS Variables

Color schemes are converted to CSS custom properties at runtime:

CSS Variables

.color-scheme-1 {
  /* Core Colors */
  --color-background: rgb(255, 255, 255);
  --color-background-rgb: 255, 255, 255;
  --color-foreground: rgb(0, 0, 0);
  --color-foreground-rgb: 0, 0, 0;
  --color-foreground-heading: rgb(0, 0, 0);
  --color-primary: rgb(0, 15, 159);
  --color-primary-hover: rgb(0, 0, 0);
  --color-border: rgb(230, 230, 230);
  --color-shadow: rgb(0, 0, 0);
  
  /* Button Colors */
  --color-primary-button-background: rgb(0, 15, 159);
  --color-primary-button-text: rgb(255, 255, 255);
  --color-primary-button-border: rgb(0, 15, 159);
  
  /* Input Colors */
  --color-input-background: rgb(255, 255, 255);
  --color-input-text: rgb(0, 0, 0);
  --color-input-border: rgb(0, 0, 0);
  
  /* Variant Colors */
  --color-variant-background: rgb(255, 255, 255);
  --color-variant-text: rgb(0, 0, 0);
  --color-variant-border: rgb(230, 230, 230);
}

Using Color Schemes

In Sections

Apply color schemes to sections using the color_scheme setting:

Section Schema

{
  "name": "My Section",
  "settings": [
    {
      "type": "color_scheme",
      "id": "color_scheme",
      "label": "Color scheme",
      "default": "scheme-1"
    }
  ]
}

In Liquid

Apply the color scheme class to your section:

Apply Color Scheme

<div class="color-{{ section.settings.color_scheme }}">
  <h2>This heading uses the color scheme's foreground_heading color</h2>
  <p>This text uses the color scheme's foreground color</p>
  <button class="button button--primary">Primary Button</button>
</div>

Access Specific Colors

You can also access color scheme values directly:

Access Colors

{% assign scheme = settings.color_schemes['scheme-1'] %}
<div style="background-color: rgb({{ scheme.settings.background.rgba }})">
  <!-- Content -->
</div>

Creating Custom Color Schemes

Open Theme Editor

Navigate to Online Store > Themes > Customize in your Shopify admin

Access Color Settings

Click Theme settings > Colors in the sidebar

Add New Scheme

Click Add color scheme to create a new palette

Configure Colors

Customize all 30+ color values to match your brand

Start with core colors (background, foreground)
Define button states (normal and hover)
Set input field colors
Configure variant picker colors

Apply to Sections

Use your new color scheme in any section with a color scheme picker

Adaptive Opacity

Horizon automatically adjusts opacity values based on background brightness:

Adaptive Opacity

{% assign background_brightness = scheme.settings.background | color_brightness %}
{% if background_brightness < 64 %}
  {% comment %} Dark background - use higher opacity {% endcomment %}
  {% assign opacity_5_15 = 0.15 %}
  {% assign opacity_10_25 = 0.25 %}
{% else %}
  {% comment %} Light background - use lower opacity {% endcomment %}
  {% assign opacity_5_15 = 0.05 %}
  {% assign opacity_10_25 = 0.1 %}
{% endif %}

This ensures consistent visual contrast regardless of color scheme.

Best Practices

Maintain Contrast

Ensure sufficient contrast between text and background colors:

WCAG AA: Minimum 4.5:1 for body text
WCAG AAA: Minimum 7:1 for body text
Test with tools like WebAIM Contrast Checker

Test Interactive States

Always define hover states for interactive elements:

Buttons should have visible hover effects
Links should change on hover
Inputs should indicate focus state

Consider Transparency

Use alpha transparency strategically:

Overlay text needs solid backgrounds or sufficient contrast
Transparent backgrounds work well for overlays
Test on various image backgrounds

Brand Consistency

Align color schemes with your brand:

Use your brand’s primary color for primary buttons
Match background colors to your brand aesthetic
Maintain consistency across all schemes

Example Configuration

Custom Color Scheme

{
  "name": "My Brand Scheme",
  "settings": {
    "background": "#f8f9fa",
    "foreground_heading": "#212529",
    "foreground": "#495057",
    "primary": "#0d6efd",
    "primary_hover": "#0a58ca",
    "border": "#dee2e6",
    "shadow": "#000000",
    "primary_button_background": "#0d6efd",
    "primary_button_text": "#ffffff",
    "primary_button_border": "#0d6efd",
    "primary_button_hover_background": "#0a58ca",
    "primary_button_hover_text": "#ffffff",
    "primary_button_hover_border": "#0a58ca"
  }
}

Theme Settings

Configure global theme settings

Typography

Customize fonts and text styles

Overview

Core Concepts

Development

Customization

Features

Overview

Color Scheme Structure

Core Colors

Button Colors

Primary Button

Secondary Button

Form Input Colors

Variant Picker Colors

Default State

Hover State

Selected State

Default Color Schemes

CSS Variables

Using Color Schemes

In Sections

In Liquid

Access Specific Colors

Creating Custom Color Schemes

Adaptive Opacity

Best Practices

Example Configuration

Theme Settings

Typography

​Overview

​Color Scheme Structure

​Core Colors

​Button Colors

​Primary Button

​Secondary Button

​Form Input Colors

​Variant Picker Colors

​Default State

​Hover State

​Selected State

​Default Color Schemes

​CSS Variables

​Using Color Schemes

​In Sections

​In Liquid

​Access Specific Colors

​Creating Custom Color Schemes

​Adaptive Opacity

​Best Practices

​Example Configuration

​Related Pages

Theme Settings

Typography

Overview

Color Scheme Structure

Core Colors

Button Colors

Primary Button

Secondary Button

Form Input Colors

Variant Picker Colors

Default State

Hover State

Selected State

Default Color Schemes

CSS Variables

Using Color Schemes

In Sections

In Liquid

Access Specific Colors

Creating Custom Color Schemes

Adaptive Opacity

Best Practices

Example Configuration

Related Pages