Trivago color palette
TravelTrivago's color identity is defined by a vibrant red primary, complemented by blue and yellow accents, and a clean, neutral UI palette. The colors reflect clarity, approachability, and global travel energy.
trivago.comTrivago colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Trivago RedPrimary227, 40, 81
- Trivago BlueSecondary0, 127, 186
- Trivago YellowAccent247, 166, 0
Surfaces
Page, cards and dividers.- Trivago WhiteBackground255, 255, 255
- Trivago Light GraySurface245, 247, 250
- Trivago Border GrayBorder209, 213, 219
Text
Three tiers of copy.- Trivago CharcoalText34, 34, 34
- Trivago Secondary GraySecondary text107, 114, 128
- Trivago Muted GrayMuted text156, 163, 175
Semantic
Feedback and state colors.- Trivago Success GreenSuccess44, 182, 125
- Trivago Warning YellowWarning255, 184, 0
- Trivago Error RedError215, 38, 61
- Trivago Info BlueInfo0, 150, 214
Use Trivago's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
trivago-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0096D6;
--error: #D7263D;
--accent: #F7A600;
--border: #D1D5DB;
--primary: #E32851;
--success: #2CB67D;
--surface: #F5F7FA;
--warning: #FFB800;
--secondary: #007FBA;
--text-muted: #9CA3AF;
--background: #FFFFFF;
--text-primary: #222222;
--text-secondary: #6B7280;
}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
14.8:1
Pass
Secondary text on background
Needs 4.5:1 for body text
4.8:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
4.5:1
Pass
Muted text on background
Needs 3:1 for large text
2.5:1
Fail
Muted text on surface
Needs 3:1 for large text
2.4:1
Fail
Trivago background, border and text colors
The quiet part of the Trivago palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Trivago WhiteBackground
- HEX
- RGB
- HSL
- Trivago Light GraySurface
- HEX
- RGB
- HSL
- Trivago Border GrayBorder
- HEX
- RGB
- HSL
- Trivago CharcoalText
- HEX
- RGB
- HSL
- Trivago Secondary GraySecondary text
- HEX
- RGB
- HSL
- Trivago Muted GrayMuted text
- HEX
- RGB
- HSL
About Trivago's colors
Trivago's palette uses a triadic scheme with red, blue, and yellow, balanced by neutral grays and white for clarity. The colors are chosen for high visibility and a friendly, international feel.
Primary red is contrasted by blue and yellow for brand recognition.
Neutrals provide a clean, user-focused interface.
Accent colors highlight actions and important information.
Psychology
The red primary conveys energy and action, while blue and yellow add trust and optimism. The neutrals ensure the interface feels open and easy to navigate.
Evolution
Trivago's core palette has remained stable since its major rebrand, with minor adjustments to gray tones for improved accessibility. The primary red and blue have been consistent anchors of the brand identity.
Where Trivago uses each color
- Primary
Used in the Trivago logo, primary call-to-action buttons, and highlights.
- Secondary
Appears in navigation elements, secondary buttons, and some icons.
- Accent
Used for highlights, notifications, and to draw attention to offers.
- Backgrounds
White and light gray are used for page backgrounds and card surfaces.
- Text
Charcoal and gray tones are used for primary, secondary, and muted text throughout the UI.
- Semantic
Green, yellow, and red are used for success, warning, and error states in forms and notifications.
Trivago color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Trivago primary color is #E32851, known as Trivago Red. Use this exact hex for all primary brand applications.
Trivago Red (#E32851) is RGB(227, 40, 81) and approximately CMYK(0, 82, 64, 11). Always match the hex for digital use.
Trivago uses #F5F7FA (Light Gray), #D1D5DB (Border Gray), #6B7280 (Secondary Gray), and #9CA3AF (Muted Gray) for UI backgrounds and text. These ensure clarity and accessibility across the interface.
Use Trivago Red (#E32851) for primary actions and branding, with blue and yellow as supporting accents. Neutrals structure the UI, and semantic colors are reserved for status messaging.
The secondary color is Trivago Blue, #007FBA, and the accent is Trivago Yellow, #F7A600. 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 Trivago's colors consistently when it generates UI.
Make something in the spirit of Trivago
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.