Use color pickers to customize your Booking Engine look and branding

Juss Reyes

Updated November 20, 2025 15:52

A color picker is a tool that allows you to select and identify the specific color code you need, use it to apply your colors and maintain your brand identity consistently across the web.

This article explains how to apply custom colors to your Cloudbeds Booking Engine page with the color picker tool in Cloudbeds PMS.

Looking for more information about customization codes for your Booking Engine? See how to add HTML and CSS code to customize your Cloudbeds Booking Engine.

Overview

The color picker tool allows you to select the colors you would like to apply to customize your Booking Engine. Find easy-to-use color pickers for the following five sections of the booking engine:

Primary color
Background color
Header color
Booking page background

1. Primary color

The Primary Color is the color that appears for all the CTA (Call to Action) buttons in your Booking Engine page, the Date Picker, and the Read More hyperlinks. See some examples below:

Color of the “View offers / Hide offers” drawer (Booking Engine Plus only)

The “View offers” and “Hide offers” drawer appears only in the Cloudbeds Booking Engine Plus. This drawer automatically uses a variation of your Primary color. Because this color is dynamically generated, it may appear slightly lighter or darker than the Header color.

If you want the drawer to visually match the Header color exactly, update the Primary color in the color picker so both elements use the same base color.

2. Background color

This is the color that appears in the background of the property information section (light gray in the following example), right below the date picker and the booking page:

3. Header color

The header is the top section of your Booking Engine page. The header color tool allows you to edit/select the color that will be applied to this section. See the example below (navy blue):

4. Booking page background

This is the background color that will appear on the booking engine landing page (light blue in the example below) if there is no image selected for the feature image:

The Cloudbeds Booking Engine is being upgraded to a new version. Learn more: Transition to Booking Engine Plus - Checklist and FAQ.

Learn more about the different options to Customize the Cloudbeds Booking Engine.

How to use color pickers to customize your Booking Engine

Go to the Settings page of your Account menu, and click on the Booking Engine section
Click on the Customize tab
Choose a color by clicking on the sample color. When selecting a color, see the preview on the right-hand side. You can also type-in specific color codes.
Save. The selected colors will be applied to the corresponding Booking Engine page area.

To match the Cloudbeds Booking Engine colors with your website palette, we suggest you use a color picker tool online (such as Image Color Picker, or try Google's Color Picker to identify the code of your brand colors.

To include your own customized header and footer on your booking page, enter the information as shown above. If nothing is entered into the fields, the default hotel header and footer will be applied.

Click Reset all to Default to change back to the Cloudbeds’ default color scheme for any individual section or for all sections.

To make the Header and Navigation arrows (for example) the same color, copy and paste the code (including the "#" symbol) from one entry field to the next one.