> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/Shopify/horizon/llms.txt
> Use this file to discover all available pages before exploring further.

# Color Schemes

> Create and customize color schemes for the Horizon theme

## 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

<ParamField path="background" type="color" default="#FFFFFF">
  Main background color for the section

  * Supports alpha transparency
  * Used for page and section backgrounds
</ParamField>

<ParamField path="foreground" type="color" default="#000000">
  Primary text color

  * Used for body text and paragraphs
  * CSS variable: `--color-foreground`
</ParamField>

<ParamField path="foreground_heading" type="color" default="#000000">
  Heading text color

  * Used for H1-H6 elements
  * CSS variable: `--color-foreground-heading`
</ParamField>

<ParamField path="primary" type="color" default="#000F9F">
  Primary accent color

  * Used for links and interactive elements
  * CSS variable: `--color-primary`
</ParamField>

<ParamField path="primary_hover" type="color" default="#000000">
  Hover state for primary color

  * CSS variable: `--color-primary-hover`
</ParamField>

<ParamField path="border" type="color" default="#E6E6E6">
  Border color for elements

  * CSS variable: `--color-border`
</ParamField>

<ParamField path="shadow" type="color" default="#000000">
  Shadow color for depth effects

  * Used with opacity for drop shadows
  * CSS variable: `--color-shadow`
</ParamField>

## Button Colors

### Primary Button

<ParamField path="primary_button_background" type="color" default="#000F9F">
  Primary button background color
</ParamField>

<ParamField path="primary_button_text" type="color" default="#FFFFFF">
  Primary button text color
</ParamField>

<ParamField path="primary_button_border" type="color" default="#000F9F">
  Primary button border color
</ParamField>

<ParamField path="primary_button_hover_background" type="color" default="#000F9F">
  Primary button background on hover
</ParamField>

<ParamField path="primary_button_hover_text" type="color" default="#FFFFFF">
  Primary button text color on hover
</ParamField>

<ParamField path="primary_button_hover_border" type="color" default="#000F9F">
  Primary button border on hover
</ParamField>

### Secondary Button

<ParamField path="secondary_button_background" type="color" default="#FFFFFF">
  Secondary button background color
</ParamField>

<ParamField path="secondary_button_text" type="color" default="#000000">
  Secondary button text color
</ParamField>

<ParamField path="secondary_button_border" type="color" default="#000000">
  Secondary button border color
</ParamField>

<ParamField path="secondary_button_hover_background" type="color" default="#FFFFFF">
  Secondary button background on hover
</ParamField>

<ParamField path="secondary_button_hover_text" type="color" default="#000000">
  Secondary button text color on hover
</ParamField>

<ParamField path="secondary_button_hover_border" type="color" default="#000000">
  Secondary button border on hover
</ParamField>

## Form Input Colors

<ParamField path="input_background" type="color" default="#FFFFFF">
  Input field background color
</ParamField>

<ParamField path="input_text_color" type="color" default="#000000">
  Input field text color
</ParamField>

<ParamField path="input_border_color" type="color" default="#000000">
  Input field border color
</ParamField>

<ParamField path="input_hover_background" type="color" default="#F5F5F5">
  Input field background on hover/focus
</ParamField>

## Variant Picker Colors

### Default State

<ParamField path="variant_background_color" type="color" default="#FFFFFF">
  Variant button background
</ParamField>

<ParamField path="variant_text_color" type="color" default="#000000">
  Variant button text
</ParamField>

<ParamField path="variant_border_color" type="color" default="#E6E6E6">
  Variant button border
</ParamField>

### Hover State

<ParamField path="variant_hover_background_color" type="color" default="#F5F5F5">
  Variant button background on hover
</ParamField>

<ParamField path="variant_hover_text_color" type="color" default="#000000">
  Variant button text on hover
</ParamField>

<ParamField path="variant_hover_border_color" type="color" default="#E6E6E6">
  Variant button border on hover
</ParamField>

### Selected State

<ParamField path="selected_variant_background_color" type="color" default="#000000">
  Selected variant button background
</ParamField>

<ParamField path="selected_variant_text_color" type="color" default="#FFFFFF">
  Selected variant button text
</ParamField>

<ParamField path="selected_variant_border_color" type="color" default="#000000">
  Selected variant button border
</ParamField>

<ParamField path="selected_variant_hover_background_color" type="color" default="#1A1A1A">
  Selected variant button background on hover
</ParamField>

<ParamField path="selected_variant_hover_text_color" type="color" default="#FFFFFF">
  Selected variant button text on hover
</ParamField>

<ParamField path="selected_variant_hover_border_color" type="color" default="#1A1A1A">
  Selected variant button border on hover
</ParamField>

## Default Color Schemes

Horizon includes 6 pre-configured color schemes:

<AccordionGroup>
  <Accordion title="Scheme 1 - Clean White" icon="circle" iconType="solid">
    **Background:** `#ffffff` (White)

    **Text:** `#000000` (Black)

    **Primary:** `#000000` (Black)

    Perfect for clean, minimal designs with high contrast.
  </Accordion>

  <Accordion title="Scheme 2 - Soft Gray" icon="circle" iconType="solid">
    **Background:** `#f5f5f5` (Light Gray)

    **Text:** `#000000` (Black)

    **Primary:** `#000000` (Black)

    Subtle background for sections that need slight separation.
  </Accordion>

  <Accordion title="Scheme 3 - Natural Green" icon="circle" iconType="solid">
    **Background:** `#eef1ea` (Light Green)

    **Text:** `#000000` (Black)

    **Primary:** `#000000` (Black)

    Organic, nature-inspired palette.
  </Accordion>

  <Accordion title="Scheme 4 - Sky Blue" icon="circle" iconType="solid">
    **Background:** `#e1edf5` (Light Blue)

    **Text:** `#000000` (Black)

    **Primary:** `#1d3686` (Deep Blue)

    Calm, trustworthy palette with blue accents.
  </Accordion>

  <Accordion title="Scheme 5 - Dark Mode" icon="circle" iconType="solid">
    **Background:** `#333333` (Dark Gray)

    **Text:** `#ffffff` (White)

    **Primary:** `#ffffff` (White)

    High-contrast dark theme for modern designs.
  </Accordion>

  <Accordion title="Scheme 6 - Transparent Overlay" icon="circle" iconType="solid">
    **Background:** `rgba(0,0,0,0)` (Transparent)

    **Text:** `#ffffff` (White)

    **Primary:** `#ffffff` (White)

    For overlaying content on images or videos.
  </Accordion>
</AccordionGroup>

## CSS Variables

Color schemes are converted to CSS custom properties at runtime:

```css CSS Variables theme={null}
.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:

```json Section Schema theme={null}
{
  "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:

```liquid Apply Color Scheme theme={null}
<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:

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

## Creating Custom Color Schemes

<Steps>
  <Step title="Open Theme Editor">
    Navigate to **Online Store > Themes > Customize** in your Shopify admin
  </Step>

  <Step title="Access Color Settings">
    Click **Theme settings > Colors** in the sidebar
  </Step>

  <Step title="Add New Scheme">
    Click **Add color scheme** to create a new palette
  </Step>

  <Step title="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
  </Step>

  <Step title="Apply to Sections">
    Use your new color scheme in any section with a color scheme picker
  </Step>
</Steps>

## Adaptive Opacity

Horizon automatically adjusts opacity values based on background brightness:

```liquid Adaptive Opacity theme={null}
{% 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

<AccordionGroup>
  <Accordion title="Maintain Contrast" icon="eye">
    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](https://webaim.org/resources/contrastchecker/)
  </Accordion>

  <Accordion title="Test Interactive States" icon="hand-pointer">
    Always define hover states for interactive elements:

    * Buttons should have visible hover effects
    * Links should change on hover
    * Inputs should indicate focus state
  </Accordion>

  <Accordion title="Consider Transparency" icon="droplet">
    Use alpha transparency strategically:

    * Overlay text needs solid backgrounds or sufficient contrast
    * Transparent backgrounds work well for overlays
    * Test on various image backgrounds
  </Accordion>

  <Accordion title="Brand Consistency" icon="palette">
    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
  </Accordion>
</AccordionGroup>

## Example Configuration

```json Custom Color Scheme theme={null}
{
  "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"
  }
}
```

## Related Pages

<CardGroup cols={2}>
  <Card title="Theme Settings" icon="gear" href="/customization/settings">
    Configure global theme settings
  </Card>

  <Card title="Typography" icon="font" href="/customization/typography">
    Customize fonts and text styles
  </Card>
</CardGroup>