Colors
Complete color customization for buttons, badges, and pricing.
Button Colors
Primary Button (Add to Cart)
| Color | Best For |
|---|---|
| Black (#000000) | Fashion, high contrast |
| Green (#4CAF50) | Eco-friendly, positive |
| Blue (#2196F3) | Tech, professional |
| Brand Color | Match your logo |
Hover State: 10-20% darker than primary for feedback
Secondary Button (Buy Now)
Options:
- Inverted - Outlined version of primary
- Lighter - Shade of primary color
- Accent - Complementary color
Pricing Colors
Sale Price
Default: Red (#F44336)
Alternatives:
- Orange (#FF9800) - Friendly urgency
- Dark Red (#C62828) - Sophisticated
Discount Badge
Shows savings (e.g., "-20%")
Popular:
- Red BG + White text
- Black BG + White text
- Brand color + Contrast text
Ready-Made Palettes
Classic Conversion
Primary: #000000 (Black)
Hover: #333333
Sale: #F44336 (Red)
Fresh & Modern
Primary: #4CAF50 (Green)
Hover: #45A049
Sale: #FF5722 (Orange)
Elegant Minimal
Primary: #424242 (Gray)
Hover: #212121
Sale: #D32F2F
Accessibility
WCAG AA Requirements:
- Normal text: 4.5:1 contrast
- Large text: 3:1 contrast
- Buttons: 3:1 vs background
Tools:
Color Blindness
- Don't rely only on color
- Pair with text/icons
- Test with simulation tools
Using Color Picker
- Click color swatch
- Choose method:
- Color wheel
- Hex code (#000000)
- RGB sliders
- Click outside to close
Getting brand colors:
- DevTools → Inspect → Computed styles
- Extract from logo with online tool
- Use brand guidelines
Common Mistakes
| ❌ Avoid | ✅ Instead |
|---|---|
| Too similar buttons | Clear contrast |
| Poor contrast | 4.5:1 minimum |
| Clashing with theme | Extract from theme |
| Too many colors | 2-3 max |
Next Steps
- Typography - Fonts and sizes
- Spacing - Layout
- Presets - Pre-made palettes