Away color palette
TravelAway's brand color system is built around a distinctive deep navy, paired with clean neutrals and subtle accents for a modern, travel-focused identity. The palette emphasizes simplicity, clarity, and a premium feel across all touchpoints.
awaytravel.comAway colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Away NavyPrimary0, 24, 51
- Away Light GraySecondary245, 245, 245
- Away TealAccent0, 132, 142
Surfaces
Page, cards and dividers.- Away WhiteBackground255, 255, 255
- Away Surface GraySurface245, 245, 245
- Away Border GrayBorder229, 229, 229
Text
Three tiers of copy.- Away Navy TextText0, 24, 51
- Away Dark Gray TextSecondary text74, 74, 74
- Away Muted GrayMuted text142, 142, 147
Semantic
Feedback and state colors.- Away Success GreenSuccess29, 185, 84
- Away Warning YellowWarning255, 199, 0
- Away Error RedError255, 79, 79
- Away Info TealInfo0, 132, 142
Use Away's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
away-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #00848E;
--error: #FF4F4F;
--accent: #00848E;
--border: #E5E5E5;
--primary: #001833;
--success: #1DB954;
--surface: #F5F5F5;
--warning: #FFC700;
--secondary: #F5F5F5;
--text-muted: #8E8E93;
--background: #FFFFFF;
--text-primary: #001833;
--text-secondary: #4A4A4A;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
17.8:1
Pass
Text on surface
Needs 4.5:1 for body text
16.3:1
Pass
Secondary text on background
Needs 4.5:1 for body text
8.9:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
8.1:1
Pass
Muted text on background
Needs 3:1 for large text
3.3:1
Pass
Muted text on surface
Needs 3:1 for large text
3.0:1
Fail
Away background, border and text colors
The quiet part of the Away palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Away WhiteBackground
- HEX
- RGB
- HSL
- Away Surface GraySurface
- HEX
- RGB
- HSL
- Away Border GrayBorder
- HEX
- RGB
- HSL
- Away Navy TextText
- HEX
- RGB
- HSL
- Away Dark Gray TextSecondary text
- HEX
- RGB
- HSL
- Away Muted GrayMuted text
- HEX
- RGB
- HSL
About Away's colors
Away's palette is anchored by a deep navy, conveying trust and sophistication, complemented by crisp neutrals and a teal accent for freshness. The color system is minimal and functional, supporting a premium travel brand experience.
Primary navy contrasts with white and light gray backgrounds.
Teal accent is used sparingly for highlights and calls to action.
Neutral grays balance the boldness of navy and teal.
Psychology
Navy suggests reliability and calm, ideal for a travel brand. Teal adds a sense of adventure and modernity without overwhelming the core identity.
Evolution
The Away palette has remained largely consistent since launch, with navy always at its core. Minor adjustments to accent and neutral tones have refined the UI for clarity and accessibility.
Where Away uses each color
- Primary
Used for the logo, navigation bar, and primary buttons.
- Secondary
Appears in backgrounds, cards, and product photography backdrops.
- Accent
Highlights links, active states, and select call-to-action buttons.
- Backgrounds
White and light gray are used for main page backgrounds and content areas.
- Text
Navy and dark gray are used for headings and body text, with muted gray for secondary information.
- Semantic
Green, yellow, and red are used for status indicators such as success messages, warnings, and errors.
Away color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Away brand color is Away Navy, hex code #001833.
Away Navy (#001833) in RGB is (0, 24, 51). For CMYK, it is approximately (100, 53, 0, 80).
Away uses Away Light Gray (#F5F5F5) and Away Border Gray (#E5E5E5) for backgrounds and borders, with Away Muted Gray (#8E8E93) for secondary text.
Use Away Navy (#001833) for primary elements, Away Teal (#00848E) for accents, and neutrals for backgrounds and surfaces. Always maintain high contrast for accessibility and a clean, modern look.
The secondary color is Away Light Gray, #F5F5F5, and the accent is Away Teal, #00848E. 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 Away's colors consistently when it generates UI.
Make something in the spirit of Away
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.