How to Use Color Pickers for Mybookings


As of February 2020, the process of customizing the colors of your booking engine has become easier.

This article explains how to set your custom colors for the mybookings page. For further information about customization codes, refer to this article: Customize mybookings - HTML and CSS Custom Meta Tags

Cloudbeds is offering 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

Access Manage (1) -> Customize mybookings (2) -> and choose the needed color for each part of the mybookings page (3):

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

How does it work?

Navigate to the Customize Mybookings page and type in specific color codes (please, check the next section for further information) or choose a color by clicking on the sample color.
When selecting a color, you can see a preview on the right-hand side:

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

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

The colors chosen will apply to both the List Design and Gallery Design when you save changes.

Matching Mybookings colors with your website palette

Using web services

If you want to use the sample colors offered, you can enter the code of the desired color.

There are multiple services on the internet which can help you with the color codes, and is one of them. Here is how it works:

Using Google Extension

You can also 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