Auware gives you precise control over the colors used in your landing pages through the color picker in the editor toolbar. Your primary brand color is the most impactful visual setting on the page - it affects the hero background, call-to-action buttons, discount badges, section accents, and other elements throughout the template.
The Color Picker
When you open the color picker in the editor toolbar, you have four ways to choose your brand color:
Brand Swatches are colors automatically detected from your connected store’s theme during brand detection. If Auware found your brand colors (from your Shopify theme’s CSS variables, for example), they appear here as quick-select swatches. This is the fastest way to stay on-brand - one click and your landing page matches your storefront.
Color Presets offer a curated set of popular DTC brand colors. These are useful if you want to experiment with alternatives or if your brand does not have a strong established color.
Color Wheel provides a visual saturation and brightness area combined with a hue slider. Click and drag across the main color area to adjust saturation (left to right) and brightness (top to bottom). Use the vertical hue slider to change the base color (red, orange, yellow, green, blue, purple). This gives you pixel-level control over exactly the color you want. The color wheel is especially useful when you need a specific shade that does not appear in swatches or presets.
Hex Input lets you type an exact hex color code (like #2A5BD7 or #FF6B35) if you already know the specific color you need. This is the fastest way to match a precise brand color when you have the hex value from your brand guidelines.
Where the Color Applies
Your primary color cascades throughout the entire landing page:
- Hero section - Background color or overlay tint on the hero image
- CTA buttons - Primary call-to-action button background
- Discount badges - Badge background color
- Section accents - Borders, dividers, and accent elements
- Icons - Feature icons and decorative elements
- Links - Text link colors
This means a single color change transforms the feel of the entire page, which is why getting the right primary color matters.
Smart Contrast Detection
Auware includes automatic smart contrast detection that prevents readability problems when you choose light colors. If you select a very light or white primary color, the system automatically adjusts the page styling:
The hero background switches to a clean white with hidden overlays, since light text on a light background would be unreadable. CTA buttons flip to a dark background with white text, ensuring they remain prominent and clickable. Discount badges adapt to a dark-on-light scheme. All these adjustments happen automatically and update live in the editor as you choose colors, so you can see the effect immediately.
This prevents the most common design mistake in DIY landing pages - choosing a brand color that works on a dark background but breaks on a light one, or vice versa. Auware handles the contrast logic so you can focus on choosing the color that represents your brand, and the template adapts the presentation to ensure it always looks professional.
Colors and Audience Pages
Like other editor settings, your color choice follows the baseline-to-audience inheritance pattern. The color set on the baseline applies to all audience pages. You generally want consistent brand colors across all audiences, so this default behavior is usually what you want.