Hopper color palette
TravelHopper uses a distinctive coral pink as its primary brand color, complemented by a clean white and soft gray UI palette. The color system is designed for digital clarity and a friendly, approachable feel across its travel booking platforms.
hopper.comHopper colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Hopper CoralPrimary255, 109, 110
- Hopper Light CoralSecondary255, 179, 179
- Hopper BlushAccent255, 214, 214
Surfaces
Page, cards and dividers.- Hopper WhiteBackground255, 255, 255
- Hopper Surface GraySurface245, 245, 247
- Hopper Border GrayBorder229, 229, 234
Text
Three tiers of copy.- Hopper CharcoalText34, 34, 34
- Hopper Medium GraySecondary text118, 118, 118
- Hopper Light GrayMuted text179, 179, 179
Semantic
Feedback and state colors.- Hopper Success GreenSuccess76, 217, 100
- Hopper Warning YellowWarning255, 204, 0
- Hopper Error RedError255, 59, 48
- Hopper Info BlueInfo90, 200, 250
Use Hopper's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
hopper-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #5AC8FA;
--error: #FF3B30;
--accent: #FFD6D6;
--border: #E5E5EA;
--primary: #FF6D6E;
--success: #4CD964;
--surface: #F5F5F7;
--warning: #FFCC00;
--secondary: #FFB3B3;
--text-muted: #B3B3B3;
--background: #FFFFFF;
--text-primary: #222222;
--text-secondary: #767676;
}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.6:1
Pass
Secondary text on background
Needs 4.5:1 for body text
4.5:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
4.2:1
Fail
Muted text on background
Needs 3:1 for large text
2.1:1
Fail
Muted text on surface
Needs 3:1 for large text
1.9:1
Fail
Hopper gray and neutral colors
The quiet part of the Hopper palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Hopper WhiteBackground
- HEX
- RGB
- HSL
- Hopper Surface GraySurface
- HEX
- RGB
- HSL
- Hopper Border GrayBorder
- HEX
- RGB
- HSL
- Hopper CharcoalText
- HEX
- RGB
- HSL
- Hopper Medium GraySecondary text
- HEX
- RGB
- HSL
- Hopper Light GrayMuted text
- HEX
- RGB
- HSL
About Hopper's colors
Hopper’s palette centers on a vibrant coral, evoking energy and friendliness, balanced by soft neutrals for clarity. The supporting colors provide clear visual cues for actions and statuses.
Primary coral is complemented by lighter pinks for depth.
Neutral grays support readability and focus.
Accent colors signal status and guide user attention.
Psychology
Coral pink suggests warmth, approachability, and excitement, making travel planning feel inviting. The soft neutrals create a sense of trust and ease for users.
Evolution
Hopper’s core coral color has remained consistent since its early branding, with the UI palette evolving to add more nuanced grays and status colors. The palette has been stable, focusing on digital clarity and accessibility.
Where Hopper uses each color
- Primary
Hopper Coral is used for main action buttons, highlights, and the app logo.
- Secondary
Hopper Light Coral appears in backgrounds, secondary buttons, and hover states.
- Accent
Hopper Blush is used for subtle backgrounds and decorative UI elements.
- Backgrounds
Hopper White and Surface Gray serve as the main app and website backgrounds.
- Text
Charcoal and Medium Gray are used for primary and secondary text throughout the app and site.
- Semantic
Success Green, Warning Yellow, Error Red, and Info Blue indicate booking statuses, alerts, and notifications.
Hopper color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Hopper brand color is Hopper Coral, hex code #FF6D6E.
Hopper Coral (#FF6D6E) in RGB is (255, 109, 110); in CMYK it is approximately (0, 57, 57, 0).
Hopper uses Surface Gray (#F5F5F7), Border Gray (#E5E5EA), Charcoal (#222222), Medium Gray (#767676), and Light Gray (#B3B3B3) for backgrounds, borders, and text.
Use Hopper Coral (#FF6D6E) for primary actions and highlights, with supporting grays for backgrounds and text. Accent and semantic colors are reserved for status indicators and alerts.
The secondary color is Hopper Light Coral, #FFB3B3, and the accent is Hopper Blush, #FFD6D6. Together with the primary they make up the three brand colors at the top of this page.
3 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 Hopper's colors consistently when it generates UI.
Make something in the spirit of Hopper
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.