Hyatt color palette
TravelHyatt's brand color system is centered on a distinctive deep blue, reflecting trust, sophistication, and hospitality. The palette is clean, professional, and uses a range of blues and neutral grays for a modern, welcoming UI.
hyatt.comHyatt colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Hyatt BluePrimary0, 45, 98
- Hyatt Sky BlueSecondary0, 114, 206
- Hyatt Accent BlueAccent0, 169, 224
Surfaces
Page, cards and dividers.- Hyatt WhiteBackground255, 255, 255
- Hyatt Light GraySurface245, 247, 250
- Hyatt Border GrayBorder217, 225, 232
Text
Three tiers of copy.- Hyatt BlueText0, 45, 98
- Hyatt CharcoalSecondary text74, 74, 74
- Hyatt Muted GrayMuted text122, 138, 153
Semantic
Feedback and state colors.- Hyatt Success GreenSuccess67, 176, 42
- Hyatt Warning YellowWarning255, 184, 28
- Hyatt Error RedError224, 60, 49
- Hyatt Sky BlueInfo0, 114, 206
Use Hyatt's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
hyatt-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0072CE;
--error: #E03C31;
--accent: #00A9E0;
--border: #D9E1E8;
--primary: #002D62;
--success: #43B02A;
--surface: #F5F7FA;
--warning: #FFB81C;
--secondary: #0072CE;
--text-muted: #7A8A99;
--background: #FFFFFF;
--text-primary: #002D62;
--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
13.5: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
8.9:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
8.3:1
Pass
Muted text on background
Needs 3:1 for large text
3.5:1
Pass
Muted text on surface
Needs 3:1 for large text
3.3:1
Pass
Hyatt background, border and text colors
The quiet part of the Hyatt palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Hyatt WhiteBackground
- HEX
- RGB
- HSL
- Hyatt Light GraySurface
- HEX
- RGB
- HSL
- Hyatt Border GrayBorder
- HEX
- RGB
- HSL
- Hyatt BlueText
- HEX
- RGB
- HSL
- Hyatt CharcoalSecondary text
- HEX
- RGB
- HSL
- Hyatt Muted GrayMuted text
- HEX
- RGB
- HSL
About Hyatt's colors
Hyatt's palette is built around deep blue, complemented by lighter blues and neutral grays for clarity and professionalism. The system emphasizes trust, calm, and a premium hospitality experience.
Primary blue is paired with lighter accent blues for hierarchy.
Neutral grays provide balance and support for UI elements.
Vivid semantic colors are used sparingly for status and alerts.
Psychology
Blue is associated with trust, security, and tranquility, aligning with Hyatt's hospitality values. The palette's restraint conveys reliability and modernity.
Evolution
Hyatt's color palette has remained stable, with deep blue as a longstanding core. Recent updates have refined the supporting neutrals and accent blues for digital clarity.
Where Hyatt uses each color
- Primary
Used in the Hyatt logo, navigation bar, and key call-to-action buttons.
- Secondary
Appears in secondary buttons, highlights, and links.
- Accent
Used for interactive elements, icons, and subtle highlights.
- Backgrounds
Hyatt White and Light Gray serve as the main page and section backgrounds.
- Text
Primary blue and charcoal are used for headings and body text, with muted gray for secondary information.
- Semantic
Green, yellow, and red are used for status indicators, alerts, and notifications.
Hyatt color questions
Hex codes, RGB values, neutrals and how to use the palette.
The primary Hyatt brand color is Hyatt Blue, hex code #002D62.
Hyatt Blue (#002D62) is RGB(0, 45, 98) and CMYK(100, 54, 0, 62).
Hyatt uses Light Gray (#F5F7FA), Border Gray (#D9E1E8), Charcoal (#4A4A4A), and Muted Gray (#7A8A99) for backgrounds, borders, and text.
Use Hyatt Blue (#002D62) for primary branding and navigation, with supporting blues and neutrals for UI elements and backgrounds. Semantic colors are reserved for status and alerts.
The secondary color is Hyatt Sky Blue, #0072CE, and the accent is Hyatt Accent Blue, #00A9E0. Together with the primary they make up the three brand colors at the top of this page.
6 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 Hyatt's colors consistently when it generates UI.
Make something in the spirit of Hyatt
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.