Colors

Elle uses a color scheme system that lets you create multiple palettes and apply them to different sections.

Accessing Color Settings

1. Open the theme editor
2. Click Theme settings (gear icon)
3. Click Colors

Understanding Color Schemes

Elle comes with multiple color schemes. Each scheme includes:

• Background - Main background color (supports gradients)
• Text - Primary text color
• Button - Primary button background
• Button label - Text on primary buttons
• Secondary button label - Link and outline button color
• Shadow - Depth and shadow color

Editing a Color Scheme

1. Click on a color scheme to expand it
2. Click any color swatch to open the color picker
3. Enter a hex code or use the picker
4. Preview changes in real-time

Adding Gradient Backgrounds

1. Find the Background gradient option in a color scheme
2. Click Select gradient
3. Choose colors and direction
4. The gradient will overlay the solid background

Semantic Colors

These colors appear consistently across the theme:

• Sale color - Used for sale badges and discounted prices (default: #8B4049)
• Error color - Form errors and warnings (default: #8B4049)
• Success color - Success messages (default: #4A6B52)

Applying Color Schemes to Sections

Each section has a Color scheme dropdown:

1. Click any section in the editor
2. Find the Color scheme setting
3. Select which color scheme to use
4. Changes apply immediately

Color Scheme Best Practices

Contrast

Ensure sufficient contrast between:

• Text and background (minimum 4.5:1 ratio)
• Button text and button background
• Links and background

Consistency

• Use your primary scheme for most sections
• Reserve alternate schemes for emphasis sections
• Keep no more than 2-3 schemes in regular use

Brand Colors

• Match button colors to your brand
• Use neutral backgrounds for product-heavy sections
• Save bold colors for hero sections and CTAs