Skip to main content

Colors & Branding

Your colors are the visual foundation of your website's identity. AI Section Builder provides powerful color and branding tools that ensure consistency across all your content while maintaining professional accessibility standards. This guide shows you how to create a cohesive brand experience.

Understanding the Color System​

Primary Brand Colors​

Your primary color is the main color that represents your brand. It's used for:

  • Call-to-action buttons - Your most important buttons
  • Interactive elements - Links, form highlights, active states
  • Brand accents - Strategic highlights throughout your content

Choose a color that:

  • Represents your brand personality
  • Works well across different contexts
  • Has good contrast for accessibility
  • Complements your industry expectations

Text Colors​

Main Text Color

  • Used for all body content, descriptions, and paragraphs
  • Should provide excellent readability on your background
  • Typically a dark color for light backgrounds

Muted Text Color

  • Used for secondary information like captions, metadata, dates
  • Slightly lighter than main text for visual hierarchy
  • Still maintains good readability while being less prominent

Background Colors​

Main Background

  • The primary background color for your website sections
  • Usually white, light gray, or another neutral color
  • Creates the canvas for all your content

Surface Color

  • Used for cards, panels, and elevated content areas
  • Slightly different from main background to create depth
  • Often white on light themes, or a lighter shade

Border Color

  • Defines edges and separations between content areas
  • Subtle color that adds structure without being distracting
  • Usually a light gray or neutral tone

Working with Dark Mode​

Automatic Dark Mode Colors​

AI Section Builder automatically manages dark mode versions of your colors:

When you set light mode colors, the system creates:

  • Dark background - Appropriate dark version of your background
  • Dark surface - Elevated areas in dark theme
  • Dark text - Light text colors that work on dark backgrounds
  • Dark muted text - Secondary text for dark backgrounds
  • Dark borders - Subtle borders for dark theme structure

You can customize these if the automatic versions don't match your brand.

Dark Mode Best Practices​

Contrast Considerations:

  • Dark themes need lighter text colors for readability
  • Borders should be more subtle in dark mode
  • Primary colors may need adjustment for dark backgrounds

Brand Consistency:

  • Your primary brand color should work in both light and dark themes
  • Test all combinations to ensure your brand remains recognizable
  • Consider how your logo and imagery work with dark backgrounds

Smart Accessibility Colors​

What They Do​

Smart Accessibility Colors is an intelligent system that automatically adjusts colors for optimal readability and accessibility compliance.

When enabled, the system:

  • Analyzes contrast ratios between text and background colors
  • Automatically adjusts colors that don't meet accessibility standards
  • Maintains your brand identity while ensuring readability
  • Works across all sections and content types

How They Work​

Intelligent Color Calculations:

Your original color + Background context = Optimized accessible color

Example: If your primary blue doesn't have enough contrast on a light background, the system automatically darkens it just enough to meet accessibility standards while keeping it recognizably blue.

Benefits:

  • WCAG 2.1 AA compliance automatically maintained
  • No manual color testing required
  • Consistent accessibility across all content
  • Brand colors preserved as much as possible

When to Enable Smart Colors​

Recommended for:

  • Government or institutional websites requiring accessibility compliance
  • E-commerce sites serving diverse audiences
  • Educational platforms needing inclusive design
  • Any public-facing website wanting to ensure accessibility

Consider carefully for:

  • Highly specific brand guidelines that can't be adjusted
  • Creative projects where exact colors are critical
  • Brand-sensitive industries where color precision is essential

Using Color Presets with Visual Preview​

One of the fastest ways to set up your brand colors is using the color preset system, which now includes a visual preview pane.

How Visual Preview Works​

When you open the color presets modal:

  • Browse color schemes organized by category
  • See live preview of each scheme showing buttons, cards, and text
  • Compare options easily before committing
  • Apply with confidence knowing exactly how colors will look

Using Presets Effectively​

  1. Start with a preset that matches your industry or brand personality
  2. Review the visual preview to see colors in context
  3. Apply the preset as a starting point
  4. Customize individual colors if needed to match your exact brand

This workflow saves time compared to building a color scheme from scratch, while still giving you full control over the final result.

See Global Settings for detailed instructions on accessing and applying color presets.

Favorites: Curating Your Shortlist​

Promptless WP ships with around 100 built-in color presets plus any custom presets you save. The full list is great for browsing, but most of the time you only reach for one or two on a given site. The favorites system keeps your day-to-day choices small and intentional.

How favorites work:

  • Custom presets default to favorited. When you save a new preset from Global Settings, it's automatically added to your favorites — the assumption is that if you bothered to save it, you want quick access to it.
  • Built-in presets are favorited manually. Each preset card in the Global Settings color preset modal has a star icon. Click it to promote a built-in into your favorites.
  • Favorites are site-level. Anyone with editor access on the site sees the same favorites list. (The "recent" list shown in the per-section picker is per-user; favorites are shared.)
  • You can unstar from either modal. Removing a preset from favorites doesn't delete it — it just hides it from the per-Section palette picker's Favorites tab.

The recommended pattern is to favorite one or two presets per project — typically the brand palette plus an accent palette for emphasis sections. The Favorites tab in the per-Section picker (covered below) reads from this same shortlist.

Per-Section Color Palettes​

Sometimes a single global palette isn't enough. You might want a feature section to stand out with a contrasting accent, a CTA section to feel warmer than the rest of the page, or a testimonial block to read against a different background tone. Per-section palettes let you override the global palette on individual sections without touching site-wide settings.

What Per-Section Palettes Do​

  • Override only the section you set them on. Other sections continue using the global palette.
  • Carry the full 12-color palette — primary, secondary, text, muted text, background, surface, border, plus their dark-mode counterparts.
  • Recompute smart accessibility colors automatically. Links, buttons, ghost buttons, and icons all derive WCAG-compliant contrast against the section's effective background — same algorithm that powers the global palette, just running per-section.
  • Survive preset deletion. Each section keeps a snapshot of the colors it was assigned, so deleting the source preset doesn't break the page.

Applying a Palette to a Section​

  1. Open any section in the editor. Click on the section in the canvas, or pick it from the section list.
  2. Switch to the Layout tab in the right sidebar.
  3. Look for "Section Palette." It sits near Theme Variant — both controls govern "how does this section look?"
  4. Click the section palette button. A modal opens showing three tabs: Recent, Favorites, Browse all.
  5. Pick a palette. The section preview updates immediately.
  6. Click "Apply Palette" to commit. Save the page when you're ready.

To remove a palette and revert the section to globals, open the same picker and click "Clear palette" in the bottom-left.

The Three Picker Tabs​

Favorites (default tab) — your curated shortlist. Combines:

  • Custom presets you've saved (default-favorited)
  • Built-in presets you've starred from Global Settings

This is the typical 1–5 item list you'll work from on most sections.

Recent — the last few presets you applied to any section, per user. Useful when you're cycling through a couple of palettes while designing a long page.

Browse all — the full library, customs first then built-ins. Each card has a star icon; click to favorite or unfavorite without leaving the modal. This is the discovery surface — use it when you want a fresh palette beyond your current shortlist.

Linked Palettes and Drift Detection​

When you apply a saved preset to a section, the section remembers which preset it came from. Two things follow from that:

Drift indicator. If you later edit the source preset (changing one of its 12 colors), sections that were given that preset don't automatically update — the snapshot they took at apply time keeps rendering. The Section Palette field shows an "Out of date" indicator when a section's snapshot has diverged from its source preset.

Refresh button. Click the "Refresh from source" button next to the indicator to pull the source preset's current colors into the section's snapshot. This is a one-click resync.

Link broken. If you delete a preset that's linked to a section, the section keeps rendering with its snapshot (no broken page), but the field shows a "Source preset deleted" message so you know the link is no longer recoverable. The section still works; it just won't refresh.

This snapshot-with-link model is intentional. Live propagation would mean editing one preset could silently change colors on every section that ever used it — surprising and risky. Manual refresh keeps you in control.

Smart Accessibility Colors and Per-Section Palettes​

The smart accessibility system runs per-section automatically. When a section has its own palette, contrast calculations use the section's effective background and surface colors, not the global ones. This means:

  • Links inside a section adjust to that section's primary color, not the global primary.
  • Button text contrast is recomputed against the section's button background.
  • Ghost buttons and icons pick visible colors against the section's surface.

You don't need to think about any of this — it just works. The audits that ship with Promptless WP verify this on every release across all 12 section types and both light/dark variants.

Strategy: When to Use Per-Section Palettes​

Good fits:

  • A primary brand palette for hero/CTA/featured sections plus an accent palette for content sections to create visual rhythm.
  • Different palettes per logical group on a long page — for example, "About" sections in your brand colors and "Resources" sections in a calmer neutral.
  • Standout sections like price comparisons, testimonials, or a "limited time" banner that benefit from a distinct visual identity.

Avoid:

  • Using a different palette on every section — visual variety becomes visual chaos. Two or three palettes across a page is usually plenty.
  • Per-section palettes as a substitute for proper section variants. Theme Variant (Light/Dark) and section-level layout options solve different problems.

How AI-Generated Pages Use Per-Section Palettes​

When you ask Claude (via the Promptless connector) to generate a page, it can apply different palettes per section automatically. The connector preflight payload includes your favorited customs and built-in slugs, so Claude has visibility into the curated shortlist and can pick from it intentionally — for example, alternating two complementary palettes across the page or pinning the brand palette to hero/CTA sections only.

You can guide this in your prompt: "use my brand palette for the hero and CTA, and the accent palette for the supporting sections." Claude reads the contract and constructs the deploy accordingly.

Setting Up Your Brand Colors​

Step 1: Choose Your Primary Color​

Consider your brand personality:

  • Tech/Modern: Blues, greens, purples
  • Creative/Artistic: Bright colors, unique combinations
  • Professional/Corporate: Deep blues, grays, subdued tones
  • Health/Wellness: Greens, soft blues, earth tones
  • Finance/Legal: Deep blues, grays, conservative choices

Test your primary color:

  • Does it work for buttons on both light and dark backgrounds?
  • Is it distinctive enough to stand out?
  • Does it represent your brand appropriately?

Step 2: Set Text Colors​

Main text color guidelines:

  • Dark gray rather than pure black for better readability
  • High contrast with your background color
  • Consistent with your brand tone (warmer or cooler grays)

Muted text guidelines:

  • Lighter than main text but still readable
  • Used for less important information
  • Maintains hierarchy without being too faint

Step 3: Configure Backgrounds​

Background color strategy:

  • Light backgrounds work well for most content
  • Neutral colors provide good base for varied content
  • Consider your imagery - does your background complement photos/graphics?

Surface color approach:

  • Slightly different from main background
  • Creates depth for cards and panels
  • Usually white on light themes for maximum contrast

Step 4: Test and Refine​

Testing checklist:

  • Check readability of all text combinations
  • Test on mobile devices for small screen visibility
  • Review with actual content including images and videos
  • Verify accessibility with contrast checking tools
  • Test dark mode if you plan to use it

Common Color Schemes​

Conservative Professional​

Perfect for: Law firms, financial services, healthcare, consulting

Primary Color: #1e40af (Deep Blue)
Text Color: #374151 (Dark Gray)
Muted Text: #6b7280 (Medium Gray)
Background: #ffffff (White)
Surface: #f9fafb (Light Gray)
Border: #e5e7eb (Light Gray)

Why it works: Trustworthy, professional, highly readable

Modern Tech​

Perfect for: Software companies, startups, tech services

Primary Color: #3b82f6 (Bright Blue)
Text Color: #1f2937 (Very Dark Gray)
Muted Text: #6b7280 (Medium Gray)
Background: #ffffff (White)
Surface: #f8fafc (Cool Light Gray)
Border: #e2e8f0 (Cool Gray)

Why it works: Modern, innovative, approachable

Creative Agency​

Perfect for: Design studios, marketing agencies, creative services

Primary Color: #7c3aed (Purple)
Text Color: #1f2937 (Dark Gray)
Muted Text: #6b7280 (Medium Gray)
Background: #fefefe (Off White)
Surface: #ffffff (Pure White)
Border: #f3f4f6 (Warm Gray)

Why it works: Creative, distinctive, energetic

Health & Wellness​

Perfect for: Medical practices, wellness centers, fitness

Primary Color: #059669 (Green)
Text Color: #374151 (Dark Gray)
Muted Text: #6b7280 (Medium Gray)
Background: #ffffff (White)
Surface: #f0fdf4 (Light Green Tint)
Border: #d1fae5 (Green Border)

Why it works: Calming, healthy, trustworthy

Advanced Color Techniques​

Color Psychology in Branding​

Blue: Trust, reliability, professionalism

  • Financial services, healthcare, technology
  • Conservative, trustworthy, stable

Green: Growth, health, nature

  • Environmental, wellness, financial growth
  • Calming, fresh, positive

Red: Energy, urgency, passion

  • Sales, entertainment, food
  • Attention-grabbing, energetic, bold

Purple: Luxury, creativity, innovation

  • Creative services, premium brands, tech
  • Unique, sophisticated, creative

Orange: Friendly, energetic, approachable

  • Retail, entertainment, casual services
  • Warm, friendly, optimistic

Creating Color Harmony​

Complementary Colors:

  • Use colors opposite on the color wheel
  • Creates high contrast and visual interest
  • Good for call-to-action buttons

Analogous Colors:

  • Use colors next to each other on the color wheel
  • Creates harmony and calm feeling
  • Good for background and surface colors

Monochromatic Scheme:

  • Use different shades of the same color
  • Creates sophisticated, unified look
  • Good for minimalist or professional brands

Brand Color Consistency​

Establish color rules:

  • Primary color for main actions and brand elements
  • Secondary colors for supporting elements
  • Neutral colors for backgrounds and text
  • Accent colors for highlights and special elements

Document your choices:

  • Save hex codes for future reference
  • Test combinations before finalizing
  • Consider how colors work with your logo and existing materials

Troubleshooting Color Issues​

Common Problems​

Poor Readability:

  • Text color too similar to background
  • Low contrast ratios
  • Colors that don't work for colorblind users

Solutions:

  • Use darker text on light backgrounds
  • Enable Smart Accessibility Colors
  • Test with contrast checking tools

Brand Inconsistency:

  • Colors don't match existing brand materials
  • Primary color doesn't work across different contexts
  • Dark mode colors don't align with brand

Solutions:

  • Start with your existing brand colors
  • Test colors in different contexts
  • Adjust gradually rather than completely changing

Accessibility Failures:

  • Colors don't meet WCAG standards
  • Poor contrast for users with visual impairments
  • Colorblind accessibility issues

Solutions:

  • Enable Smart Accessibility Colors
  • Use tools like WebAIM Contrast Checker
  • Test with colorblind simulation tools

Testing Your Colors​

Manual Testing:

  • View your site on different devices
  • Check in various lighting conditions
  • Test with different browsers
  • Review printed materials if applicable

Automated Testing:

  • Use browser accessibility tools
  • Check contrast ratios with online tools
  • Test with colorblind simulation
  • Use accessibility audit extensions

User Testing:

  • Ask team members for feedback
  • Test with your target audience
  • Check with users who have visual impairments
  • Gather feedback on brand perception

Next Steps​

Now that you understand colors and branding:

  1. Define your brand color palette based on your business goals
  2. Learn about Typography to complement your colors
  3. Explore Spacing & Layout for structure
  4. Review Theme Variants for mood and tone

Need More Help?​

Remember: Great color choices create emotional connections with your visitors while ensuring everyone can read and use your website effectively!