How to Customize Calendar Colors in Sparkforge

By Sparkforge Support Team ·Last reviewed May 3, 2026

Open the calendar in Sparkforge, switch to the NEO calendar style, go to the Customizations tab, and set Primary Color and Background Color using HEX codes or the color slider. Color customization only works on NEO calendars.

Calendar color customization in Sparkforge lets you match booking widgets to your brand. The catch: it only works with the NEO calendar style. Older styles ignore the color settings.

Why brand-match your calendar

Your logo, website, and ads use a defined color palette. A blue calendar embedded on a red-branded page looks like a third-party widget — and erodes trust at the moment of conversion. Two color fields fix it.

Step-by-step: change calendar colors

Open Calendar Settings. From the main nav, click Calendars, then Calendar Settings in the secondary nav.
Edit the calendar. In the table, click the three-dot icon in the Action Dropdown column and select Edit.
Open the Customizations tab. In the left-side nav of the calendar editor, click Customizations at the bottom.
Confirm NEO is selected. Color pickers only appear when the calendar style is set to NEO.
Set Primary Color. Use a HEX code (e.g. #c3d95e) or drag the color slider. Primary controls buttons, selected dates, and accent elements.
Set Background Color. Same input. Background controls the calendar canvas behind the date grid.
Save. Changes appear immediately in any embed using this calendar.

What each color controls

Primary Color

Affects: selected date highlight, time-slot buttons, the confirm button, accent borders, and active-state outlines.

Background Color

Affects: the canvas behind the date grid and the surrounding panel. Set this to your page's background to make the calendar feel embedded rather than dropped on top.

Tips for clean brand matching

Pull HEX codes directly from your brand guide. Eyeballing a slider gets close but not exact.
Test contrast — light primary on light background makes buttons unreadable.
Preview in an actual embed, not just the editor. Page CSS can affect rendering.

Frequently Asked Questions

Why don't the color pickers appear in my calendar?

You're using a non-NEO calendar style. Switch the calendar style to NEO under Customizations, then the Primary Color and Background Color fields will show.

Can I use any HEX code?

Yes. Any standard 6-character HEX code (like #c3d95e) or 3-character shorthand works. The color slider is also available if you don't have an exact code.

Will color changes apply to existing embeds?

Yes. Embedded calendars pull their style from your saved settings, so the new colors appear the next time the embed loads.

Can different calendars have different colors?

Yes. Color settings are per-calendar, so each booking calendar can use its own brand palette.

Does color customization affect email reminders?

No. Calendar colors only apply to the booking widget itself. Email reminders use your email template branding.