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

# Colors

> Customize color schemes and individual color settings across your store.

Color settings control background colors, text colors, button colors, and accent colors throughout your store. Once you define your color scheme, sections automatically apply these colors consistently, while still allowing section-specific overrides when needed.

## What these settings control

* Color schemes (light, dark, custom variations)
* Background colors for sections
* Text colors (body, headings, links)
* Button colors (primary, secondary, outline)
* Accent and border colors
* Color scheme inheritance across sections

## How to access

<Steps>
  <Step title="Open the Theme Customizer">
    From your Shopify admin, go to **Online Store** → **Themes** → **Customize**.
  </Step>

  <Step title="Navigate to color settings">
    In the theme editor sidebar, select **Theme settings** → **Colors**.
  </Step>

  <Step title="Select or customize schemes">
    Choose from preset color schemes or customize individual colors within each scheme.
  </Step>

  <Step title="Save changes">
    Click **Save** to apply color changes across your store.
  </Step>
</Steps>

## Settings

<Tabs>
  <Tab title="Color Schemes">
    Color schemes are collections of related colors that work together harmoniously. The theme includes several pre-configured schemes.

    **Scheme 1**: Primary color scheme for most sections\
    **Scheme 2**: Alternative scheme for visual variety\
    **Scheme 3**: Additional variation for special emphasis\
    **Inverse**: High-contrast scheme, typically dark background

    <Note>Sections inherit color schemes from these global settings, but you can override them on a per-section basis.</Note>
  </Tab>

  <Tab title="Backgrounds">
    ### Background colors

    Each color scheme includes background color settings that define the foundation of your design.

    **Background**: Primary background color for sections. Ensure sufficient contrast with text (minimum 4.5:1 for body text).

    **Background gradient**: Optional gradient overlay applied on top of the background color.

    <Tip>Leave gradient empty for solid colors. Use subtle gradients (5-10% opacity) for best results.</Tip>
  </Tab>

  <Tab title="Text Colors">
    ### Typography colors

    Define text colors for different content types within each color scheme.

    **Body text**: Primary text color for content and descriptions. Requires minimum **4.5:1** contrast ratio against background.

    **Headings**: Color for headings (h1-h6). Can match body text or use brand color for emphasis. Requires minimum **3:1** contrast for large text.

    **Links**: Color for hyperlinks. Must be visually distinct from body text with sufficient contrast against background.
  </Tab>

  <Tab title="Buttons">
    ### Button colors

    Each color scheme includes settings for three button styles.

    **Solid buttons**: Primary action buttons with filled backgrounds. Requires minimum 4.5:1 contrast between label and background.

    **Outline buttons**: Secondary action buttons with borders instead of fills.

    **Secondary buttons**: Tertiary or alternative button style.
  </Tab>

  <Tab title="Accents">
    ### Accent colors

    Supporting colors for UI elements and emphasis.

    **Accent color**: Highlight color used for icons, badges, decorative elements, and focus states.

    **Border color**: Color for lines, dividers, and element borders. Use subtle colors with low contrast (10-20% opacity).
  </Tab>
</Tabs>

## Best practices

* Test contrast ratios: Body text requires minimum 4.5:1, large text requires minimum 3:1 contrast
* Limit to 2-3 color schemes throughout your store for consistency
* Build schemes around your brand colors while ensuring web readability
* Test colors on multiple devices and screen types
* Ensure images and icons work on all background colors
* Use subtle gradients (5-10% opacity) when needed

<Warning>Changing color schemes affects multiple sections simultaneously. Preview changes across different page types before saving.</Warning>

## Related guides

* [Buttons and inputs](/themes/release/theme-settings/buttons-and-inputs) - Configure button shapes and typography
* [Typography](/themes/release/theme-settings/typography) - Coordinate text styles with your color choices
* [Common settings](/themes/release/common-settings) - Apply color schemes to specific sections
* [Cards](/themes/release/theme-settings/cards) - Card appearance inherits from color schemes