Setting Brand Colors

Brand Colors

Colors set the mood and reinforce your church's identity throughout PrayerConnect.

Accessing Color Settings

Go to Settings → Branding and scroll to the Colors section.

Primary Color

Your main brand color, used for:

• Buttons and calls-to-action
• Links
• Active navigation states
• Highlights and accents

How to Choose

• Use your official church brand color
• Should have good contrast with white text
• Avoid very light colors

Secondary Color

A supporting color for:

• Secondary buttons
• Hover states
• Background accents
• Icons

Tips

• Choose a color that complements your primary
• Can be a lighter/darker shade of primary
• Or an intentional accent color

Color Picker

Using the Picker

1. Click the color square
2. Use the picker to select a color
3. Or enter a hex code directly
4. See the preview update

Entering Hex Codes

If you have specific brand colors, enter them exactly:

• Format: #RRGGBB (e.g., #3B82F6)
• Don't include alpha values

Accessibility

PrayerConnect includes a contrast checker:

• ✓ Green checkmark = Good contrast
• ⚠️ Warning = May be hard to read
• ✗ Error = Poor accessibility

Why It Matters

• People with vision impairments need sufficient contrast
• Good contrast helps everyone, especially on phones
• It's required for WCAG accessibility compliance

Testing Your Colors

After setting colors:

1. Preview in the settings panel
2. Toggle between light and dark mode
3. Check the public prayer wall
4. Test on mobile

Color Palettes That Work

Safe Choices

• Deep blue + white
• Forest green + cream
• Burgundy + gold
• Purple + silver

Avoid

• Yellow on white (low contrast)
• Light gray on white
• Bright neon colors
• Colors that clash

Resetting Colors

If you want to start over:

1. Click "Reset to Default"
2. PrayerConnect defaults will be restored
3. You can then customize from there