The Cloudbeds PMS has a new look! As we work to update our knowledgebase some steps in our articles might not match our new design. Click here for more details.

Cloudbeds Booking Engine - How to Use Color Pickers


This article explains how to apply custom colors to your booking engine page.

For more information about customization codes, see How to add HTML and CSS Code to Custom Meta Tags Fields


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:

  1. Background Color
  2. Header Color
  3. Navigation Arrows
  4. Search Button
  5. General Button Color

Step 1 - Choose colors for your Booking Engine

  1. Click on Manage (gear icon)
  2. Click on Customize the Booking Engine
  3. 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.
  4. Save. The selected colors will apply to both the List Design and Gallery Design when saved.

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.

Step 2 - Match the Cloudbeds Booking Engine colors with your website palette

Using web services

To use the sample colors offered, enter the code of the desired color. There are multiple services on the internet which can help you with the color codes, is one of them. Here is how it works:

Using Google Extension

Install one of the Chrome color picker extensions. Example: ColorPick Eyedropper:

ColorPick Eyedropper - Chrome Web Store - Google Chrome

Once you add the extension, click on the icon in the top right corner of your browser and click on the screen to see the color code:

ColorPick Eyedropper - Chrome Web Store - Google Chrome
Powered by Zendesk