Booking.com Color Psychology & Meaning
Booking.com blue signals maximum trust during a high-anxiety purchase decision. The yellow accent adds the urgency of a limited-time deal without feeling alarming.
#FFFFFF
#003580
#FEBA02
#333333
Background
Primary Accent
Secondary
Body Text
Booking.com
professionaltrustedtravel all brandingtravelapp
AAA
WCAG Grade
12.6:1
Contrast Ratio
2,700
Saves
7,200
AI Copies
Use #FFFFFF as the background. Use #003580 as the primary accent. Use #FEBA02 as secondary. Use #333333 as body text. Palette: Booking.com — professional, trusted, travel.
Hex Codes, RGB & CMYK Color Values
Technical breakdown for the Booking.com color scheme. Use these values for web design (HEX/RGB), print projects (CMYK), or specialized design software (HSL).
| Swatch | Design Role | HEX | RGB | CMYK | HSL |
|---|---|---|---|---|---|
| Background Luminance: 100.0% | 255, 255, 255 | 0%, 0%, 0%, 0% | 0°, 0%, 100% | ||
| Primary Accent Luminance: 4.1% | 0, 53, 128 | 100%, 59%, 0%, 50% | 215°, 100%, 25% | ||
| Secondary Luminance: 56.2% | 254, 186, 2 | 0%, 27%, 99%, 0% | 44°, 99%, 50% | ||
| Body Text Luminance: 3.3% | 51, 51, 51 | 0%, 0%, 0%, 80% | 0°, 0%, 20% |
Color Harmony: Split-Complementary Scheme
The Booking.com palette is built using a split-complementary relationship between its hues. This ensures that even with high-contrast accents, the overall scheme feels balanced and intentional.
Hue Wheel
A split-complementary palette is often preferred by professional designers because it balances visual interest with cohesion.
History & Design Context
Booking.com has operated since 1996. The blue-and-yellow system is one of the most tested brand combinations in travel ecommerce, refined through billions of A/B experiments.
Best Design Use Cases
White for all hotel and search surfaces. Deep navy for navigation and brand moments. Yellow for pricing callouts and urgency elements. Dark for text.
Industries This Palette Suits
Online travel agencies, hotel booking, tourism, vacation planning.
How to Implement the Booking.com Color Scheme
To use this Booking.com color palette in your web project, you can copy the following CSS variables or Tailwind CSS configuration. These roles ensure your UI maintains accessibility and visual hierarchy.
Option 1: CSS Variables
:root {
/* {name} Palette - ihatecolors.com */{'
'} --color-bg: {colors[0]};{'
'} --color-primary: {colors[1]};{'
'} --color-secondary: {colors[2]};{'
'} --color-text: {colors[3]};{'
'} {'}'}Web Design Tip
Use #FFFFFF for the main background and #003580 for primary buttons. This creates a high-contrast focal point.
Accessibility Note
The contrast ratio between #333333 and #FFFFFF is 12.63:1 (AAA). Ensure your body text remains legible.