Kayak color palette
TravelKayak's brand identity centers on its distinctive orange, paired with a clean, modern palette of neutrals and accent colors for clarity and usability. The color system is designed for high visibility and straightforward navigation across digital and print touchpoints.
kayak.comKayak colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Kayak OrangePrimary255, 105, 15
- Kayak CharcoalSecondary34, 34, 34
- Kayak WhiteAccent255, 255, 255
Surfaces
Page, cards and dividers.- Kayak Light GrayBackground247, 247, 247
- Kayak Surface WhiteSurface255, 255, 255
- Kayak Border GrayBorder224, 224, 224
Text
Three tiers of copy.- Kayak Charcoal TextText34, 34, 34
- Kayak Medium Gray TextSecondary text107, 107, 107
- Kayak Muted Gray TextMuted text168, 168, 168
Semantic
Feedback and state colors.- Kayak Success GreenSuccess29, 185, 84
- Kayak Warning YellowWarning255, 195, 0
- Kayak Error RedError229, 57, 53
- Kayak Info BlueInfo0, 119, 255
Use Kayak's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
kayak-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0077FF;
--error: #E53935;
--accent: #FFFFFF;
--border: #E0E0E0;
--primary: #FF690F;
--success: #1DB954;
--surface: #FFFFFF;
--warning: #FFC300;
--secondary: #222222;
--text-muted: #A8A8A8;
--background: #F7F7F7;
--text-primary: #222222;
--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
14.9:1
Pass
Text on surface
Needs 4.5:1 for body text
15.9:1
Pass
Secondary text on background
Needs 4.5:1 for body text
5.0:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
5.3:1
Pass
Muted text on background
Needs 3:1 for large text
2.2:1
Fail
Muted text on surface
Needs 3:1 for large text
2.4:1
Fail
Kayak gray and neutral colors
The quiet part of the Kayak palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Kayak Light GrayBackground
- HEX
- RGB
- HSL
- Kayak Surface WhiteSurface
- HEX
- RGB
- HSL
- Kayak Border GrayBorder
- HEX
- RGB
- HSL
- Kayak Charcoal TextText
- HEX
- RGB
- HSL
- Kayak Medium Gray TextSecondary text
- HEX
- RGB
- HSL
- Kayak Muted Gray TextMuted text
- HEX
- RGB
- HSL
About Kayak's colors
Kayak's palette is anchored by a vibrant orange, symbolizing energy and visibility, complemented by neutral grays and whites for balance and readability. The system supports clear hierarchy and accessibility across digital products.
Primary orange contrasts with dark charcoal for high visibility.
Neutrals provide a clean, modern backdrop for content.
Accent blue and green are reserved for semantic and status messaging.
Psychology
Orange evokes enthusiasm, friendliness, and action, aligning with Kayak's mission to inspire travel. The use of strong neutrals communicates trust and reliability.
Evolution
Kayak's color palette has remained consistent since its early brand guidelines, with orange as the signature color. Minor adjustments to gray and accent tones have improved accessibility and digital clarity.
Where Kayak uses each color
- Primary
Kayak Orange is used for the logo, primary buttons, and key highlights across the website and app.
- Secondary
Kayak Charcoal appears in navigation bars, headers, and primary text.
- Accent
Kayak White is used for backgrounds, cards, and input fields.
- Backgrounds
Kayak Light Gray provides the main app and site background for a clean, modern look.
- Text
Charcoal and medium gray are used for primary and secondary text, ensuring readability.
- Semantic
Green, yellow, red, and blue are used for status indicators, alerts, and informational banners.
Kayak color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Kayak brand color is Kayak Orange, hex code #FF690F.
Kayak Orange is RGB(255, 105, 15) and typically CMYK(0, 59, 94, 0) for print.
Kayak uses Kayak Charcoal (#222222), Kayak Medium Gray (#6B6B6B), Kayak Muted Gray (#A8A8A8), and Kayak Light Gray (#F7F7F7) for UI backgrounds and text.
Use Kayak Orange (#FF690F) for primary actions and highlights, neutrals for backgrounds and text, and semantic colors for status and alerts to maintain brand consistency.
The secondary color is Kayak Charcoal, #222222, and the accent is Kayak White, #FFFFFF. 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 Kayak's colors consistently when it generates UI.
Make something in the spirit of Kayak
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.