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
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:
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):
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.