Skyscanner color palette
TravelSkyscanner's color identity is defined by its distinctive Sky Blue, complemented by a clean, modern palette of neutrals and accent tones. The brand uses high-contrast UI elements and accessible color combinations for clarity and trust.
skyscanner.netSkyscanner colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Skyscanner Sky BluePrimary25, 100, 255
- Skyscanner AzureSecondary0, 177, 255
- Skyscanner TealAccent0, 229, 195
Surfaces
Page, cards and dividers.- Skyscanner WhiteBackground255, 255, 255
- Skyscanner CloudSurface245, 248, 250
- Skyscanner Light GreyBorder227, 233, 237
Text
Three tiers of copy.- Skyscanner InkText34, 43, 69
- Skyscanner SlateSecondary text105, 115, 134
- Skyscanner MistMuted text160, 174, 192
Semantic
Feedback and state colors.- Skyscanner GreenSuccess0, 214, 143
- Skyscanner AmberWarning255, 170, 0
- Skyscanner CoralError255, 61, 113
- Skyscanner Info BlueInfo51, 102, 255
Use Skyscanner's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
skyscanner-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #3366FF;
--error: #FF3D71;
--accent: #00E5C3;
--border: #E3E9ED;
--primary: #1964FF;
--success: #00D68F;
--surface: #F5F8FA;
--warning: #FFAA00;
--secondary: #00B1FF;
--text-muted: #A0AEC0;
--background: #FFFFFF;
--text-primary: #222B45;
--text-secondary: #697386;
}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.1:1
Pass
Secondary text on background
Needs 4.5:1 for body text
4.8:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
4.5: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
Skyscanner background, border and text colors
The quiet part of the Skyscanner palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Skyscanner WhiteBackground
- HEX
- RGB
- HSL
- Skyscanner CloudSurface
- HEX
- RGB
- HSL
- Skyscanner Light GreyBorder
- HEX
- RGB
- HSL
- Skyscanner InkText
- HEX
- RGB
- HSL
- Skyscanner SlateSecondary text
- HEX
- RGB
- HSL
- Skyscanner MistMuted text
- HEX
- RGB
- HSL
About Skyscanner's colors
Skyscanner's palette is built around a vibrant blue, conveying trust and clarity, with supporting cool tones and clean neutrals. The system is designed for accessibility and digital clarity.
Primary blue paired with white for high contrast.
Accent teal used sparingly for highlights and CTAs.
Neutral greys balance the vivid blues for readability.
Psychology
Blue tones evoke reliability, safety, and calm, aligning with the travel sector's need for trust. Accents of teal and green add freshness and a sense of innovation.
Evolution
The palette has remained consistent since Skyscanner's 2019 rebrand, focusing on digital-first usability. Minor adjustments to grey tones have improved accessibility and contrast.
Where Skyscanner uses each color
- Primary
Used in the logo, primary navigation, and main call-to-action buttons.
- Secondary
Appears in secondary buttons, links, and hover states.
- Accent
Used for highlights, icons, and important UI elements that require emphasis.
- Backgrounds
White and Cloud are used for main backgrounds and card surfaces.
- Text
Ink and Slate are used for primary and secondary text, ensuring legibility.
- Semantic
Green, Amber, and Coral are used for success, warning, and error states in forms and notifications.
Skyscanner color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Skyscanner brand color is Sky Blue, hex code #1964FF.
The RGB value of #1964FF is (25, 100, 255). For CMYK, it is approximately (90, 61, 0, 0).
Skyscanner uses Light Grey (#E3E9ED), Cloud (#F5F8FA), and Mist (#A0AEC0) for borders, surfaces, and muted text.
Primary blue (#1964FF) is reserved for main actions and branding, while accents and neutrals provide hierarchy and clarity. Always ensure sufficient contrast for accessibility.
The secondary color is Skyscanner Azure, #00B1FF, and the accent is Skyscanner Teal, #00E5C3. Together with the primary they make up the three brand colors at the top of this page.
3 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 Skyscanner's colors consistently when it generates UI.
Make something in the spirit of Skyscanner
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.