Hotels.com color palette
TravelHotels.com uses a bold red-centric palette with clean neutrals to create a recognizable and energetic brand identity across its digital and print platforms.
hotels.comHotels.com colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Hotels.com RedPrimary239, 51, 70
- Hotels.com WhiteSecondary255, 255, 255
- Hotels.com CharcoalAccent27, 27, 27
Surfaces
Page, cards and dividers.- Hotels.com Light GrayBackground246, 246, 247
- Hotels.com Surface WhiteSurface255, 255, 255
- Hotels.com Border GrayBorder224, 224, 224
Text
Three tiers of copy.- Hotels.com CharcoalText27, 27, 27
- Hotels.com Medium GraySecondary text110, 110, 115
- Hotels.com Muted GrayMuted text160, 160, 165
Semantic
Feedback and state colors.- Hotels.com Success GreenSuccess29, 185, 84
- Hotels.com Warning YellowWarning255, 180, 0
- Hotels.com Error RedError215, 38, 61
- Hotels.com Info BlueInfo0, 113, 194
Use Hotels.com's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
hotelscom-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0071C2;
--error: #D7263D;
--accent: #1B1B1B;
--border: #E0E0E0;
--primary: #EF3346;
--success: #1DB954;
--surface: #FFFFFF;
--warning: #FFB400;
--secondary: #FFFFFF;
--text-muted: #A0A0A5;
--background: #F6F6F7;
--text-primary: #1B1B1B;
--text-secondary: #6E6E73;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
15.9:1
Pass
Text on surface
Needs 4.5:1 for body text
17.2:1
Pass
Secondary text on background
Needs 4.5:1 for body text
4.7:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
5.1:1
Pass
Muted text on background
Needs 3:1 for large text
2.4:1
Fail
Muted text on surface
Needs 3:1 for large text
2.6:1
Fail
Hotels.com gray and neutral colors
The quiet part of the Hotels.com palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Hotels.com Light GrayBackground
- HEX
- RGB
- HSL
- Hotels.com Surface WhiteSurface
- HEX
- RGB
- HSL
- Hotels.com Border GrayBorder
- HEX
- RGB
- HSL
- Hotels.com CharcoalText
- HEX
- RGB
- HSL
- Hotels.com Medium GraySecondary text
- HEX
- RGB
- HSL
- Hotels.com Muted GrayMuted text
- HEX
- RGB
- HSL
About Hotels.com's colors
Hotels.com’s palette is anchored by a vibrant red, supported by clean whites and neutral grays for clarity and accessibility. Accent and semantic colors provide clear visual cues for user actions and statuses.
Primary red is contrasted with white for high-impact CTAs.
Charcoal and medium grays support readability and hierarchy.
Semantic colors (green, yellow, blue, red) provide status feedback.
Psychology
The primary red evokes excitement, urgency, and confidence, encouraging users to take action. Neutral tones balance the vibrancy, ensuring a trustworthy and approachable feel.
Evolution
Hotels.com has consistently used red as its signature color, with only minor adjustments in shade and supporting neutrals over the years. The palette has remained stable, focusing on clarity and strong brand recognition.
Where Hotels.com uses each color
- Primary
Hotels.com Red is used for main buttons, highlights, and key navigation elements.
- Secondary
Hotels.com White is used for backgrounds, cards, and modal surfaces.
- Accent
Hotels.com Charcoal appears in headers, footers, and primary text.
- Backgrounds
Hotels.com Light Gray is the main background for app screens and web pages.
- Text
Charcoal and medium gray are used for headings and body text, with muted gray for secondary information.
- Semantic
Success green, warning yellow, error red, and info blue are used for alerts, notifications, and status indicators.
Hotels.com color questions
Hex codes, RGB values, neutrals and how to use the palette.
The Hotels.com primary color is #EF3346, known as Hotels.com Red.
Hotels.com Red (#EF3346) is RGB(239, 51, 70) and approximately CMYK(0, 79, 71, 6).
Hotels.com uses several grays: Charcoal (#1B1B1B), Medium Gray (#6E6E73), Muted Gray (#A0A0A5), and Light Gray (#F6F6F7) for backgrounds and text.
Use Hotels.com Red (#EF3346) for primary actions, neutrals for backgrounds and text, and semantic colors for status and feedback. Always maintain sufficient contrast for accessibility.
The secondary color is Hotels.com White, #FFFFFF, and the accent is Hotels.com Charcoal, #1B1B1B. Together with the primary they make up the three brand colors at the top of this page.
4 of 6 text and background pairings meet WCAG 2.1 AA contrast. The contrast section above shows every pairing with its exact ratio.
Use the export block on this page. It gives you CSS custom properties, a Tailwind config, W3C design tokens or a shadcn/ui theme built from these exact hex values, with copy and download buttons.
Yes. Export the Claude Code skill, Cursor rules or Codex prompt from the same block. The agent then applies Hotels.com's colors consistently when it generates UI.
Make something in the spirit of Hotels.com
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.