Skip to content
OutSmart Guide

Primary Color

Where Primary Color Appears

Your primary color is used for:

  • Header background - Top bar of the page
  • Buttons - “Book Appointment”, “Continue”, etc.
  • Active tabs - Selected sidebar tabs
  • Selected states - Chosen dates, times, and options
  • Links - Clickable text throughout the page
  • Accents - Progress indicators and highlights

Changing Your Primary Color

Step-by-Step

  1. Log in to OutSmart and visit your booking page

  2. Click the Settings icon (gear) in the header

  3. Find Primary Color in the dropdown

  4. Choose from preset colors or enter a custom color:

    • Click a preset color swatch
    • Or enter a hex code (e.g., #2B9ACE)
    • Or use the color picker tool

  5. The page updates immediately - no save button needed

    Changes are saved automatically when you select a new color.

Preset Colors

The color picker includes these preset options:

ColorHex CodeGood For
Blue#2B9ACEHealthcare, trust, calm
Green#10B981Wellness, nature, growth
Purple#8B5CF6Luxury, creativity
Red#EF4444Energy, urgency
Orange#F97316Friendly, energetic
Pink#EC4899Feminine, caring
Teal#14B8A6Modern, professional

Using a Custom Color

To match your exact brand color:

  1. Find your brand color’s hex code (e.g., #FF5733)
    • Check your brand guidelines
    • Use a color picker tool on your logo
  2. Click in the custom color field
  3. Enter the 6-digit hex code (with or without the #)
  4. Press Enter or click away to apply

Finding Your Brand Hex Code

If you don’t know your brand’s hex code:

  • Check any existing website or marketing materials
  • Ask your designer or marketing team
  • Use an online color picker tool on your logo image

Color Contrast TipsYour primary color must have enough contrast with white text.

Good Choices

  • Medium to dark blues
  • Forest greens
  • Deep purples
  • Warm reds and oranges

Poor Choices (Avoid)

  • Very light colors (white text won’t be visible)
  • Very bright yellows or light greens
  • Pastel colors with low contrast

Testing Contrast

After selecting a color:

  1. Look at the buttons on your page
  2. Ensure the white text is clearly readable
  3. Check on both desktop and mobile

Consistency Across Pages

Office vs. Practitioner Pages

  • Office pages use the office’s primary color
  • Practitioner pages use the practitioner’s primary color

If you want consistency:

  • Coordinate with your team on brand colors
  • Consider using the same color for everyone
  • Or allow practitioners personal color choices

Updating Multiple Pages

If you manage multiple booking pages:

  • Each page must be updated individually
  • Log in as the appropriate admin for each page
  • Apply the same color to maintain brand consistency

Troubleshooting

Color Not Saving

  • Ensure you’re logged in with edit permissions
  • Try refreshing the page
  • Check that JavaScript is enabled in your browser

Color Looks Different

  • Colors may appear slightly different on different screens
  • Always test on multiple devices
  • Use a calibrated monitor for color-critical work

Can’t Find Color Picker

  • Make sure you’re in edit mode (logged in as admin)
  • Click the Settings (gear) icon in the header
  • The color picker is in the dropdown menu

Next Steps

  • Secondary Color - Set colors for badges and tags
  • Hero Image - Upload your banner image