Color Presets

Transform your site’s appearance instantly with pre-designed color schemes. BuddyX Pro includes professional color combinations that you can apply with a single click, then customize to match your exact brand.

The Ocean Blue preset applies blue accent colors throughout the site header, buttons, and links

What You Can Do

With color presets, you can:

Apply professionally designed color schemes instantly
Switch between different site moods (professional, creative, energetic)
Find the perfect starting point for your brand
Preview colors before applying them
Fine-tune preset colors to match your exact brand guidelines

Accessing Color Presets

Step 1: Open the Customizer

Go to Appearance > Customize
Click on Skin
Select Color Presets

You’ll see thumbnail previews of all available color schemes.

Step 2: Apply a Preset

Click on any preset thumbnail to preview it
Your site updates instantly in the preview
Try different presets to find the right fit
Click Publish when you find one you like

That’s it! Your entire site now uses the new color scheme.

Available Color Presets

Default Blue – Professional & Trustworthy

Best for corporate sites, business platforms, and professional communities.

Color	Hex Code	Usage
Primary	#4267B2	Buttons, links, accents
Secondary	#03A9F4	Secondary buttons, badges
Background	#f5f5f5	Page background
Content	#ffffff	Post/card backgrounds

Where this works well: Business websites, corporate blogs, professional networks, finance sites

Fresh Green – Natural & Growth-Oriented

Fresh Green preset with natural color palette

Perfect for wellness, environmental, education, and community sites.

Color	Hex Code	Usage
Primary	#28a745	Buttons, links, accents
Secondary	#20c997	Secondary buttons, badges
Background	#f8f9fa	Page background
Content	#ffffff	Post/card backgrounds

Where this works well: Health/wellness sites, environmental organizations, eco-friendly brands, learning platforms

Warm Orange – Energetic & Engaging

Great for creative communities, social platforms, and event sites.

Color	Hex Code	Usage
Primary	#fd7e14	Buttons, links, accents
Secondary	#ffc107	Secondary buttons, badges
Background	#fefefe	Page background
Content	#ffffff	Post/card backgrounds

Where this works well: Creative agencies, social networks, event platforms, food/lifestyle blogs

Royal Purple – Creative & Sophisticated

Ideal for creative industries, design agencies, and artistic communities.

Color	Hex Code	Usage
Primary	#6f42c1	Buttons, links, accents
Secondary	#e83e8c	Secondary buttons, badges
Background	#f8f7fb	Page background
Content	#ffffff	Post/card backgrounds

Where this works well: Design studios, creative portfolios, artistic communities, beauty/fashion sites

Modern Teal – Contemporary & Fresh

Teal and Coral color combination for a contemporary look

Perfect for tech companies, startups, and modern digital platforms.

Color	Hex Code	Usage
Primary	#20c997	Buttons, links, accents
Secondary	#17a2b8	Secondary buttons, badges
Background	#f0f8ff	Page background
Content	#ffffff	Post/card backgrounds

Where this works well: Tech startups, SaaS platforms, digital agencies, modern businesses

Classic Red – Bold & Attention-Grabbing

Great for media sites, news platforms, and action-oriented communities.

Color	Hex Code	Usage
Primary	#dc3545	Buttons, links, accents
Secondary	#fd7e14	Secondary buttons, badges
Background	#f8f9fa	Page background
Content	#ffffff	Post/card backgrounds

Where this works well: News sites, media platforms, sports communities, urgent/action sites

Dark Theme – Professional & Modern

Dark theme with professional dark color palette

Excellent for tech communities, gaming platforms, and modern businesses.

Color	Hex Code	Usage
Primary	#2c3e50	Buttons, links, accents
Secondary	#3498db	Secondary buttons, badges
Background	#1a1a2e	Page background
Content	#16213e	Post/card backgrounds

Where this works well: Tech forums, gaming communities, developer platforms, modern businesses

Electric – Bold & Energetic

Electric preset with vibrant, high-energy color palette

Perfect for creative agencies, startups, and sites wanting bold visual impact.

Where this works well: Creative agencies, tech startups, entertainment sites, youth-focused brands

Mocha – Warm & Inviting

Mocha preset with warm earth tones for a cozy feel

Ideal for lifestyle, food, hospitality, and comfort-focused brands.

Where this works well: Cafes, restaurants, lifestyle blogs, hospitality sites, wellness brands

Light Minimal – Clean & Simple

Perfect for minimalist brands, portfolios, and content-focused sites.

Color	Hex Code	Usage
Primary	#333333	Buttons, links, accents
Secondary	#666666	Secondary buttons, badges
Background	#ffffff	Page background
Content	#fafafa	Post/card backgrounds

Where this works well: Minimalist blogs, portfolios, photography sites, content publishers

Recommended Color Schemes by Site Type

Corporate & Business Sites

Best presets:

Default Blue – Traditional and trustworthy
Dark Theme – Modern professional look
Light Minimal – Clean corporate style

Why: These colors convey professionalism, stability, and trust. Blue is universally associated with reliability and business.

Creative & Design Agencies

Best presets:

Royal Purple – Artistic and unique
Warm Orange – Energetic and creative
Modern Teal – Contemporary design

Why: These colors stand out and express creativity while remaining sophisticated.

Wellness & Health Communities

Best presets:

Fresh Green – Associated with health and growth
Modern Teal – Calm and peaceful
Light Minimal – Clean and pure

Why: Green represents health, nature, and wellness. Teal is calming and trustworthy for healthcare.

Tech & Startup Platforms

Best presets:

Modern Teal – Tech-forward and fresh
Dark Theme – Developer-friendly
Default Blue – Professional tech

Why: Teal and blue are popular in tech industries, while dark themes appeal to developers.

Community & Social Networks

Best presets:

Warm Orange – Engaging and social
Royal Purple – Unique and memorable
Fresh Green – Friendly and welcoming

Why: Warm colors encourage interaction and create a friendly, inviting atmosphere.

Customizing After Applying a Preset

Presets are starting points. You can customize any color after applying:

Step 1: Apply Your Base Preset

Choose the preset closest to your vision.

Step 2: Fine-Tune Individual Colors

Go to Skin > Color Scheme
Adjust any color to match your exact brand
Change primary color to your brand color
Adjust secondary color to complement
Modify background colors if needed

Step 3: Test Across Your Site

Check how colors look on:

Homepage
Blog posts
BuddyPress profiles and activity
Shop pages (if using WooCommerce)
Forms and buttons

Step 4: Save Your Changes

Click Publish to make your customized color scheme live.

Color Combinations That Work

High-Energy Combinations

Primary: #ff6b6b (Coral Red)
Secondary: #ffd93d (Golden Yellow)
Effect: Energetic, playful, attention-grabbing

Professional Combinations

Primary: #2c3e50 (Dark Blue-Gray)
Secondary: #3498db (Light Blue)
Effect: Professional, trustworthy, corporate

Natural Combinations

Primary: #27ae60 (Forest Green)
Secondary: #f39c12 (Warm Orange)
Effect: Organic, earthy, balanced

Creative Combinations

Primary: #9b59b6 (Purple)
Secondary: #e74c3c (Red)
Effect: Bold, creative, memorable

Accessibility Considerations

When choosing or customizing color presets, ensure good contrast:

Text Readability

For normal text (16px and smaller):

Need 4.5:1 contrast ratio minimum
7:1 for optimal readability

For large text (18px+ or bold 14px+):

Need 3:1 contrast ratio minimum
4.5:1 for optimal readability

Testing Contrast

All BuddyX Pro presets meet WCAG 2.1 AA standards, but if you customize:

Use WebAIM Contrast Checker
Enter your text color and background color
Verify the ratio meets minimum standards
Adjust if needed for better accessibility

Color Blindness Considerations

Don’t rely only on color to convey information
Use icons alongside colored buttons
Ensure sufficient contrast for all users
Test with color blindness simulators

Common Questions

Can I save my own custom preset?

Currently, you can customize colors but not save them as a named preset. Write down your hex codes to reuse them later.

Will changing presets affect my dark mode colors?

No, dark mode has separate color settings. Apply your preset, then customize dark mode colors separately if needed.

What happens to my old colors when I apply a preset?

They’re replaced with the preset colors. If you want to go back, write down your current colors before applying a new preset.

Can I apply a preset to only part of my site?

No, presets apply site-wide. For section-specific colors, you’ll need custom CSS or a child theme.

Do presets work with all WordPress plugins?

BuddyX Pro presets style the theme and compatible plugins (BuddyPress, WooCommerce, LearnDash). Some third-party plugins may need additional customization.

How do I know which preset matches my brand?

Look at your logo and existing branding materials. Choose the preset with primary colors closest to your brand colors, then fine-tune.

Tips for Choosing Colors

Match Your Industry

Different industries have color expectations:

Finance/Legal: Blues, grays (trust, stability)
Health/Wellness: Greens, teals (nature, calm)
Food/Hospitality: Reds, oranges (appetite, energy)
Tech/Innovation: Blues, purples (innovation, intelligence)
Creative/Arts: Purples, oranges (creativity, expression)

Consider Your Audience

Young audiences: Bright, bold colors
Professional audiences: Muted, sophisticated colors
Global audiences: Consider cultural color meanings
Accessibility needs: High contrast, clear combinations

Think About Emotion

Colors evoke feelings:

Blue: Trust, calm, professional
Green: Growth, health, natural
Red: Energy, urgency, excitement
Orange: Friendly, creative, fun
Purple: Luxury, creative, unique
Yellow: Optimistic, cheerful, warm
Gray: Neutral, professional, modern

Related Settings

Color Scheme Settings – Customize individual colors
Dark Mode – Set up dark color scheme
Border Radius & Styling – Match your design style
Typography Settings – Complete your brand identity

Need Help?

Visit our Documentation Portal
Contact Support at support@wbcomdesigns.com