The information in this article is relevant only for Pro users at this time. For information about booking websites for Lite users, refer to the Guesty Booking Engine
The color picker is a function of your editor that lets you manage color scheme of text, background, overlays and more. You can choose a color from the color palette, input a HEX or RGB value or even create a custom gradient. The recent colors feature help in keeping your color scheme consistent and maintaining a professional look and feel on your site.
When working with the color picker, you have the following options:
Color style
Before you pick the color scheme, choose where you want to use a single color or a gradient.
If you are using the single color option, you can pick a color from the "Recent colors" tab or jump to "Choose another color".
Gradient background will be an available option for rows, column and widget backgrounds, and image overlays. To apply a gradient, make sure to:
- Pick 2 colors of the gradient stops. You can reverse the colors to adjust the stop's positioning.
- Choose a gradient direction.
- The center option will generate radial gradient.
- Side options will create linear gradient.
Global colors
Global colors allow you to define a color palette and link the individual colors to any or all widgets with color settings. The color of any element that is linked to the global colors will automatically be updated when the linked color is changed in the global colors settings. This allows you to quickly make color changes, which helps reduce design time and ensures your site's style is consistent across pages. To learn how to configure global colors, see Global Colors.
Saved colors
Save colors that are frequently used across your site by adding them to the "Saved colors" list in the color picker. To add a color to the saved colors, click the Saved colors tab on the color picker and click +. To remove a color from the saved colors list, right-click the color and select Remove.
Note:
You can save up to 48 colors and gradients in the saved colors list.
Recent colors
When picking a color, the recent colors menu shows a sample of colors that were recently used in your site. This allows you to quickly pick colors that are already on your site.
Choose another color
Select a color's hue using the color palette on the right or the color panel. Alternatively, you can enter the HEX or RGB value of the color you want in text box below the vertical color gradient.
To match a color perfectly from anywhere on your site (images, texts, and so on), click the eyedropper tool and select the color from your site that you want to use. No need to spend any time trying to figure out a color’s exact name or value.
Opacity
The opacity slider determines the transparency of an element. Keep in mind that as you reduce an element's opacity, whatever is behind it (background image or color) will begin to blend with that element.
Contrast checker for text colors
The contrast checker for text colors helps improve the accessibility of sites by indicating The contrast between the text and the background meets the AA or AAA standard*. The contrast checker appears in the color picker whenever the color picker is being used for text.
Following is the criteria that determines The AA or AAA standard is met:
| Type of text | Standards* | Font size | Minimum contrast ratio |
|---|---|---|---|
| Regular text | AAA | Under 18pt | 7:1 |
| Large text | AAA | 18pt or 14pt | 4.5:1 |
| Regular text | AA | Under 18pt | 4.5:1 |
| Large text | AA | 18pt bold or 24pt and larger | 3:1 |
*In accessibility standards, "AA" and "AAA" represent different levels of color contrast requirements.
- AA level means your colors have enough contrast to be readable, but may still present problems for some users.
- AAA level means you have high contrast that should be readable for the vast majority of users.
Following is an example of the contrast color checker indicating that the text and background contrast meets AAA standard:
The contrast checker is disabled in the following circumstances:
- The selected text has multiple colors. For example, if several words in the text are blue and several others are pink.
- The text is on a gradient background.
- The text is on an image background.
Considerations
Gradient is not available for text elements, so you will not see it in a color picker for text elements in widgets design editor of "Global design" tab.
When working with backgrounds, switching between "Color" and "Image" sets the settings on the previous option to null. For example, if you were using a color and changed the setting to "Image", any color or gradient settings will be removed.
Gradients override individual button backgrounds. To change them back, reselect the background for individual buttons.