Viator color palette
TravelViator's color identity centers on a distinctive teal, complemented by a clean, modern palette of neutrals and accent colors. The brand's colors are used consistently across its digital platforms to convey trust and approachability in travel booking.
viator.comViator colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Viator TealPrimary0, 163, 161
- Viator YellowSecondary255, 183, 0
- Viator OrangeAccent242, 92, 5
Surfaces
Page, cards and dividers.- Viator WhiteBackground255, 255, 255
- Viator Light GraySurface245, 247, 250
- Viator Border GrayBorder224, 227, 232
Text
Three tiers of copy.- Viator NavyText34, 43, 69
- Viator SlateSecondary text110, 122, 138
- Viator Muted GrayMuted text160, 174, 192
Semantic
Feedback and state colors.- Viator Success GreenSuccess0, 179, 122
- Viator Warning YellowWarning255, 183, 0
- Viator Error RedError233, 79, 55
- Viator Info BlueInfo0, 153, 204
Use Viator's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
viator-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0099CC;
--error: #E94F37;
--accent: #F25C05;
--border: #E0E3E8;
--primary: #00A3A1;
--success: #00B37A;
--surface: #F5F7FA;
--warning: #FFB700;
--secondary: #FFB700;
--text-muted: #A0AEC0;
--background: #FFFFFF;
--text-primary: #222B45;
--text-secondary: #6E7A8A;
}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.0:1
Pass
Text on surface
Needs 4.5:1 for body text
13.0:1
Pass
Secondary text on background
Needs 4.5:1 for body text
4.4:1
Fail
Secondary text on surface
Needs 4.5:1 for body text
4.1:1
Fail
Muted text on background
Needs 3:1 for large text
2.3:1
Fail
Muted text on surface
Needs 3:1 for large text
2.1:1
Fail
Viator background, border and text colors
The quiet part of the Viator palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Viator WhiteBackground
- HEX
- RGB
- HSL
- Viator Light GraySurface
- HEX
- RGB
- HSL
- Viator Border GrayBorder
- HEX
- RGB
- HSL
- Viator NavyText
- HEX
- RGB
- HSL
- Viator SlateSecondary text
- HEX
- RGB
- HSL
- Viator Muted GrayMuted text
- HEX
- RGB
- HSL
About Viator's colors
Viator's palette is built around a bold teal, supported by energetic accent colors and a range of functional neutrals. The scheme balances vibrancy and clarity, ensuring accessibility and brand recognition.
Primary teal pairs with yellow and orange for contrast.
Neutrals provide clarity and reduce visual noise.
Accent colors highlight calls to action and status.
Psychology
Teal conveys trust, reliability, and a sense of adventure, aligning with travel aspirations. The yellow and orange accents add warmth and energy, encouraging engagement.
Evolution
Viator's palette has remained stable, with teal as the anchor color since its major rebrand. Minor adjustments have refined accent and neutral tones for improved digital accessibility.
Where Viator uses each color
- Primary
Viator Teal is used for the logo, primary buttons, and key navigation elements.
- Secondary
Viator Yellow highlights promotions, badges, and secondary buttons.
- Accent
Viator Orange is used for alerts, highlights, and interactive elements.
- Backgrounds
Viator White and Light Gray are used for main page backgrounds and card surfaces.
- Text
Viator Navy and Slate are used for primary and secondary text, ensuring readability.
- Semantic
Success Green, Warning Yellow, Error Red, and Info Blue are used for status messages and alerts.
Viator color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Viator brand color is Viator Teal, hex code #00A3A1. This color is central to the brand's identity.
Viator Teal (#00A3A1) in RGB is (0, 163, 161). In CMYK, it is approximately (100, 0, 1, 36).
Viator uses Light Gray (#F5F7FA), Border Gray (#E0E3E8), and Muted Gray (#A0AEC0) for backgrounds, borders, and muted text. These neutrals support clarity and accessibility in the UI.
Use Viator Teal (#00A3A1) for primary actions and branding, with yellow and orange for highlights and accents. Neutrals and semantic colors should be applied for backgrounds, text, and status indicators to maintain hierarchy and accessibility.
The secondary color is Viator Yellow, #FFB700, and the accent is Viator Orange, #F25C05. Together with the primary they make up the three brand colors at the top of this page.
2 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 Viator's colors consistently when it generates UI.
Make something in the spirit of Viator
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.