> ## Documentation Index
> Fetch the complete documentation index at: https://cal.id/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Managing Custom Brand Colors in Cal ID for Team

> Set primary brand colors for the light and dark themes of your team's Cal ID public booking page so it matches your company's visual identity.

Set specific primary colors for your team booking page so it matches your company's visual identity. You can define different colors for light and dark themes, giving your page a custom, polished feel regardless of your guest's system settings.

## Step-by-step configuration

<Steps>
  <Step title="Log in to Cal ID">
    Access your account dashboard.
  </Step>

  <Step title="Go to Teams">
    Click on the **Teams** icon in the left-hand sidebar.
  </Step>

  <Step title="Access the team menu">
    Locate the team, click the **three horizontal dots**, and select **Edit team**.

    <Frame>
      <img src="https://mintcdn.com/cal-id-docs/3fu9CIn5wG7tNW3N/images/branding/brand-colors-team-1.png?fit=max&auto=format&n=3fu9CIn5wG7tNW3N&q=85&s=67af0fcea52b339dc456840ab6eb4728" alt="Edit team menu" width="1433" height="759" data-path="images/branding/brand-colors-team-1.png" />
    </Frame>
  </Step>

  <Step title="Go to the Custom Branding tab">
    Click on the **Custom Branding** tab at the top of the page.

    <Frame>
      <img src="https://mintcdn.com/cal-id-docs/3fu9CIn5wG7tNW3N/images/branding/brand-colors-team-2.png?fit=max&auto=format&n=3fu9CIn5wG7tNW3N&q=85&s=4492549f02b7df6fe833653e4a0626be" alt="Custom Branding tab" width="1600" height="857" data-path="images/branding/brand-colors-team-2.png" />
    </Frame>
  </Step>

  <Step title="Enable the feature">
    Scroll to **Custom brand colors** and switch the section toggle to **ON**.

    <Frame>
      <img src="https://mintcdn.com/cal-id-docs/3fu9CIn5wG7tNW3N/images/branding/brand-colors-team-3.png?fit=max&auto=format&n=3fu9CIn5wG7tNW3N&q=85&s=345eea82b8166ada463a12e6385844d0" alt="Enable custom brand colors" width="1430" height="758" data-path="images/branding/brand-colors-team-3.png" />
    </Frame>
  </Step>

  <Step title="Set the light theme color">
    Click on the **Brand color (light theme)** field, then enter your brand's Hex code or use the color picker to select the primary color for light mode.

    <Frame>
      <img src="https://mintcdn.com/cal-id-docs/3fu9CIn5wG7tNW3N/images/branding/brand-colors-team-4.png?fit=max&auto=format&n=3fu9CIn5wG7tNW3N&q=85&s=0888740e8153d8c5844f452107e97166" alt="Set light theme brand color" width="1438" height="761" data-path="images/branding/brand-colors-team-4.png" />
    </Frame>
  </Step>

  <Step title="Set the dark theme color">
    Click on the **Brand color (dark theme)** field, then select the color that will represent your brand when a guest views your page in dark mode.

    <Frame>
      <img src="https://mintcdn.com/cal-id-docs/3fu9CIn5wG7tNW3N/images/branding/brand-colors-team-5.png?fit=max&auto=format&n=3fu9CIn5wG7tNW3N&q=85&s=0ed32d83b06f8f0fb1204968f36df045" alt="Set dark theme brand color" width="1435" height="768" data-path="images/branding/brand-colors-team-5.png" />
    </Frame>
  </Step>

  <Step title="Save your changes">
    Click the blue **Update** button at the bottom of the section to apply these colors to your public booking page.
  </Step>
</Steps>

<Tip>
  Choose colors that remain readable in their respective themes—for example, a darker shade for light mode and a slightly brighter or more vibrant shade for dark mode.
</Tip>

## What this changes on your 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.

<Frame>
  <img src="https://mintcdn.com/cal-id-docs/3fu9CIn5wG7tNW3N/images/branding/brand-colors-team-6.png?fit=max&auto=format&n=3fu9CIn5wG7tNW3N&q=85&s=fbca8da908c79b5a49bf985df530f114" alt="Brand colors applied to team booking page" width="1600" height="835" data-path="images/branding/brand-colors-team-6.png" />
</Frame>

<Frame>
  <img src="https://mintcdn.com/cal-id-docs/3fu9CIn5wG7tNW3N/images/branding/brand-colors-team-7.png?fit=max&auto=format&n=3fu9CIn5wG7tNW3N&q=85&s=ac3a28d77980eef40aca4cc0438b34ad" alt="Brand colors applied in dark mode" width="1600" height="835" data-path="images/branding/brand-colors-team-7.png" />
</Frame>

<Warning>
  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.
</Warning>

## Next steps

<CardGroup cols={2}>
  <Card title="Personal brand colors" icon="palette" href="/docs/branding/brand-colors">
    Apply the same color controls to your own personal booking page.
  </Card>

  <Card title="Team Custom Branding" icon="users-gear" href="/docs/branding/teams">
    Add a banner and logo to complete the team page.
  </Card>
</CardGroup>


## Related topics

- [Managing Custom Brand Colors in Cal ID](/docs/branding/brand-colors.md)
- [Custom Branding For Teams](/docs/branding/teams.md)
- [Customize Your Brand Logo and Favicon in Cal ID for Team](/docs/branding/logo-favicon-team.md)
- [Team Appearance Settings](/docs/appearance/team-appearance.md)
