Hostelworld color palette
TravelHostelworld's color identity is defined by a vibrant orange primary, supported by deep charcoal, white, and accent teal. The palette emphasizes energy, accessibility, and a youthful travel spirit.
hostelworld.comHostelworld colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Hostelworld OrangePrimary255, 90, 95
- Hostelworld CharcoalSecondary38, 38, 38
- Hostelworld TealAccent0, 166, 152
Surfaces
Page, cards and dividers.- Hostelworld WhiteBackground255, 255, 255
- Hostelworld Light GraySurface245, 245, 245
- Hostelworld Border GrayBorder229, 229, 229
Text
Three tiers of copy.- Hostelworld CharcoalText38, 38, 38
- Hostelworld Medium GraySecondary text107, 107, 107
- Hostelworld Muted GrayMuted text163, 163, 163
Semantic
Feedback and state colors.- Hostelworld Success GreenSuccess0, 179, 134
- Hostelworld Warning YellowWarning255, 180, 0
- Hostelworld Error RedError255, 58, 48
- Hostelworld Info BlueInfo0, 157, 220
Use Hostelworld's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
hostelworld-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #009DDC;
--error: #FF3A30;
--accent: #00A698;
--border: #E5E5E5;
--primary: #FF5A5F;
--success: #00B386;
--surface: #F5F5F5;
--warning: #FFB400;
--secondary: #262626;
--text-muted: #A3A3A3;
--background: #FFFFFF;
--text-primary: #262626;
--text-secondary: #6B6B6B;
}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.1:1
Pass
Text on surface
Needs 4.5:1 for body text
13.9:1
Pass
Secondary text on background
Needs 4.5:1 for body text
5.3:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
4.9: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.3:1
Fail
Hostelworld gray and neutral colors
The quiet part of the Hostelworld palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Hostelworld WhiteBackground
- HEX
- RGB
- HSL
- Hostelworld Light GraySurface
- HEX
- RGB
- HSL
- Hostelworld Border GrayBorder
- HEX
- RGB
- HSL
- Hostelworld CharcoalText
- HEX
- RGB
- HSL
- Hostelworld Medium GraySecondary text
- HEX
- RGB
- HSL
- Hostelworld Muted GrayMuted text
- HEX
- RGB
- HSL
About Hostelworld's colors
Hostelworld's palette centers on a bold orange, contrasted by deep neutrals and lively accents. This creates a dynamic, approachable, and modern visual language.
Primary orange is complemented by teal for energetic contrast.
Charcoal and white provide clarity and legibility.
Accent colors are used sparingly to highlight actions and statuses.
Psychology
Orange evokes enthusiasm, adventure, and friendliness, aligning with Hostelworld's youthful travel audience. The teal accent adds a sense of trust and freshness to the experience.
Evolution
The palette has remained consistent since the brand's 2015 rebrand, with orange as the anchor. Minor adjustments to supporting grays and accents have been made for digital accessibility.
Where Hostelworld uses each color
- Primary
Hostelworld Orange is used for the logo, primary buttons, and key highlights.
- Secondary
Hostelworld Charcoal appears in navigation bars, footers, and main text.
- Accent
Hostelworld Teal is reserved for links, icons, and interactive elements.
- Backgrounds
Hostelworld White and Light Gray are used for backgrounds and content surfaces.
- Text
Charcoal is the primary text color, with Medium and Muted Grays for secondary and disabled states.
- Semantic
Success Green, Warning Yellow, Error Red, and Info Blue are used for system messages and alerts.
Hostelworld color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Hostelworld brand color is #FF5A5F, known as Hostelworld Orange.
Hostelworld Orange (#FF5A5F) is RGB(255, 90, 95) and CMYK(0, 65, 63, 0).
Hostelworld uses Charcoal (#262626), Medium Gray (#6B6B6B), Muted Gray (#A3A3A3), Light Gray (#F5F5F5), and Border Gray (#E5E5E5) for UI and text elements.
Use Hostelworld Orange (#FF5A5F) for primary actions and branding, with Charcoal (#262626) for text and navigation. Accent and semantic colors should be used sparingly for emphasis and alerts.
The secondary color is Hostelworld Charcoal, #262626, and the accent is Hostelworld Teal, #00A698. 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 Hostelworld's colors consistently when it generates UI.
Make something in the spirit of Hostelworld
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.