Lonely Planet color palette
TravelLonely Planet's color identity is defined by its iconic blue, conveying trust and adventure. The palette is clean, minimal, and travel-focused, with blue as the dominant brand color.
lonelyplanet.comLonely Planet colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Lonely Planet BluePrimary0, 87, 168
- Lonely Planet WhiteSecondary255, 255, 255
- Explorer CyanAccent0, 173, 239
Surfaces
Page, cards and dividers.- Travel Light GrayBackground247, 247, 247
- Guidebook GraySurface229, 229, 229
- Map Border GrayBorder209, 213, 219
Text
Three tiers of copy.- Journey BlackText34, 34, 34
- Itinerary GraySecondary text75, 85, 99
- Muted Landmark GrayMuted text138, 138, 138
Semantic
Feedback and state colors.- Discovery GreenSuccess47, 191, 113
- Caution AmberWarning255, 168, 0
- Alert RedError231, 76, 60
- Explorer CyanInfo0, 173, 239
Use Lonely Planet's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
lonely-planet-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #00ADEF;
--error: #E74C3C;
--accent: #00ADEF;
--border: #D1D5DB;
--primary: #0057A8;
--success: #2FBF71;
--surface: #E5E5E5;
--warning: #FFA800;
--secondary: #FFFFFF;
--text-muted: #8A8A8A;
--background: #F7F7F7;
--text-primary: #222222;
--text-secondary: #4B5563;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
14.9:1
Pass
Text on surface
Needs 4.5:1 for body text
12.6:1
Pass
Secondary text on background
Needs 4.5:1 for body text
7.1:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
6.0:1
Pass
Muted text on background
Needs 3:1 for large text
3.2:1
Pass
Muted text on surface
Needs 3:1 for large text
2.7:1
Fail
Lonely Planet gray and neutral colors
The quiet part of the Lonely Planet palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Travel Light GrayBackground
- HEX
- RGB
- HSL
- Guidebook GraySurface
- HEX
- RGB
- HSL
- Map Border GrayBorder
- HEX
- RGB
- HSL
- Journey BlackText
- HEX
- RGB
- HSL
- Itinerary GraySecondary text
- HEX
- RGB
- HSL
- Muted Landmark GrayMuted text
- HEX
- RGB
- HSL
About Lonely Planet's colors
The Lonely Planet palette is built around a strong, trustworthy blue, complemented by clean whites and subtle grays. Accent colors provide clarity for UI states and wayfinding.
Primary blue dominates navigation and branding.
Accent cyan is used for highlights and interactive elements.
Grays and whites support readability and hierarchy.
Psychology
Blue evokes trust, reliability, and a sense of exploration, aligning with the brand's travel ethos. The palette's minimalism supports clarity and focus on content.
Evolution
Lonely Planet's palette has remained consistent, with blue as the anchor since its inception. Minor adjustments have modernized the supporting grays and accent tones for digital use.
Where Lonely Planet uses each color
- Primary
Used in the logo, navigation bar, and key call-to-action buttons.
- Secondary
Applied as background and text color for contrast and readability.
- Accent
Highlights links, icons, and interactive UI elements.
- Backgrounds
Light gray backgrounds are used for content areas and cards.
- Text
Primary and secondary grays are used for headings, body text, and metadata.
- Semantic
Green, amber, and red are used for success, warning, and error states in forms and notifications.
Lonely Planet color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Lonely Planet brand blue is #0057A8. This color is used in the logo and primary navigation.
Lonely Planet Blue (#0057A8) in RGB is (0, 87, 168). In CMYK, it is approximately (100, 48, 0, 34).
Lonely Planet uses Travel Light Gray (#F7F7F7), Guidebook Gray (#E5E5E5), and Map Border Gray (#D1D5DB) for backgrounds and UI surfaces. These support readability and a clean interface.
Primary blue (#0057A8) should be reserved for branding and key actions, while accent cyan (#00ADEF) is for highlights. Grays and whites structure backgrounds and text for clarity.
The secondary color is Lonely Planet White, #FFFFFF, and the accent is Explorer Cyan, #00ADEF. Together with the primary they make up the three brand colors at the top of this page.
5 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 Lonely Planet's colors consistently when it generates UI.
Make something in the spirit of Lonely Planet
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.