Air France color palette
TravelAir France's color identity is built around a deep blue primary, complemented by white, red, and refined neutrals. The palette reflects French elegance and the brand's national heritage.
airfrance.comAir France colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Air France BluePrimary0, 33, 87
- Air France RedSecondary228, 0, 43
- Air France WhiteAccent255, 255, 255
Surfaces
Page, cards and dividers.- Air France Light GrayBackground245, 247, 250
- Air France Surface GraySurface240, 242, 245
- Air France Border GrayBorder217, 217, 214
Text
Three tiers of copy.- Air France Blue TextText0, 33, 87
- Air France Secondary TextSecondary text73, 81, 106
- Air France Muted TextMuted text139, 140, 142
Semantic
Feedback and state colors.- Air France Success GreenSuccess60, 184, 120
- Air France Warning YellowWarning247, 166, 0
- Air France Error RedError228, 0, 43
- Air France Info BlueInfo0, 114, 188
Use Air France's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
air-france-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0072BC;
--error: #E4002B;
--accent: #FFFFFF;
--border: #D9D9D6;
--primary: #002157;
--success: #3CB878;
--surface: #F0F2F5;
--warning: #F7A600;
--secondary: #E4002B;
--text-muted: #8B8C8E;
--background: #F5F7FA;
--text-primary: #002157;
--text-secondary: #49516A;
}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.4:1
Pass
Text on surface
Needs 4.5:1 for body text
13.8:1
Pass
Secondary text on background
Needs 4.5:1 for body text
7.3:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
7.0:1
Pass
Muted text on background
Needs 3:1 for large text
3.1:1
Pass
Muted text on surface
Needs 3:1 for large text
3.0:1
Pass
Air France background, border and text colors
The quiet part of the Air France palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Air France Light GrayBackground
- HEX
- RGB
- HSL
- Air France Surface GraySurface
- HEX
- RGB
- HSL
- Air France Border GrayBorder
- HEX
- RGB
- HSL
- Air France Blue TextText
- HEX
- RGB
- HSL
- Air France Secondary TextSecondary text
- HEX
- RGB
- HSL
- Air France Muted TextMuted text
- HEX
- RGB
- HSL
About Air France's colors
Air France's palette is rooted in the French tricolor, using deep blue, vibrant red, and clean white for a sense of trust and sophistication. Neutral grays provide balance and clarity in digital interfaces.
Primary blue is paired with white for high contrast.
Red is used sparingly for accents and calls to action.
Grays unify backgrounds and surfaces for readability.
Psychology
The deep blue conveys reliability, safety, and professionalism, while red adds energy and a national touch. White and grays evoke clarity and modernity.
Evolution
Air France's palette has remained consistent, with minor refinements to gray tones for digital clarity. The core blue, red, and white have been stable, reinforcing brand recognition.
Where Air France uses each color
- Primary
Used in the website header, navigation bar, and key brand elements.
- Secondary
Appears in call-to-action buttons, highlights, and the logo's accent.
- Accent
Used for backgrounds, negative space, and text contrast.
- Backgrounds
Light gray backgrounds are used for main website and app screens.
- Text
Primary blue and dark gray are used for headings and body text.
- Semantic
Green, yellow, and red are used for status messages and alerts in digital interfaces.
Air France color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Air France primary color is #002157, known as Air France Blue. It is used prominently in branding and digital interfaces.
Air France Blue (#002157) is RGB(0, 33, 87) and CMYK(100, 62, 0, 66). Use these values for accurate color reproduction in print and digital.
Air France uses several grays: Light Gray (#F5F7FA) for backgrounds, Surface Gray (#F0F2F5) for surfaces, and Border Gray (#D9D9D6) for lines and dividers. These ensure a clean, modern interface.
Use Air France Blue (#002157) for primary navigation and branding, with Red (#E4002B) for accents and calls to action. Grays and white provide structure and readability in layouts.
The secondary color is Air France Red, #E4002B, and the accent is Air France White, #FFFFFF. 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 Air France's colors consistently when it generates UI.
Make something in the spirit of Air France
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.