Managing Custom Brand Colors in Cal ID

In Cal ID, you can set specific primary colors for your booking page to ensure it matches your company's visual identity. You have the flexibility to define different colors for both light and dark themes, giving your page a custom, polished feel regardless of your guest's system settings.

To make your brand colors appear correctly, follow these steps:

1. Log in to Cal ID: Sign in to your account.
2. Navigate to Settings: Click the Settings icon in the sidebar.
3. Go to Custom Branding: Select the Custom Branding tab.
4. Enable the Feature: Scroll to Custom brand colors and switch the section toggle to ON.

5. Theme Specifics: You should select colors that remain readable in their respective themes (e.g., a darker shade for light mode and a slightly brighter or more vibrant shade for dark mode)
6. Set Light Theme Color:

• Click on the Brand color (light theme) field.
• Enter your brand's Hex code or use the color picker to select the primary color for light mode.

6. Set Dark Theme Color:

• Click on the Brand color (dark theme) field.
• Select the color that will represent your brand when a guest views your page in dark mode.

7. Save Your Changes: Click the blue Update button at the bottom of the section to apply these colors to your public booking page.

Once saved, your custom colors will override the default Cal ID branding in several key areas:

• Buttons: Your primary action buttons (like "Confirm") will use your selected brand color.
• Highlights: Selected dates and active time slots in the calendar will be highlighted in your brand color.
• Navigation Elements: Progress bars and specific icons will adopt your custom color scheme.

To ensure accessibility, avoid using very pale colors (like white or light yellow) as your primary brand color, as they can be difficult to read on light backgrounds. Aim for a contrast ratio that makes your buttons easy to see for all users.

Updated on: 06/02/2026