Southwest Airlines color palette
TravelSouthwest Airlines' color identity is built around bold, friendly hues inspired by its heart logo and accessible travel ethos. The palette features a distinctive blue, complemented by vibrant red and yellow, with clear, approachable neutrals.
southwest.comSouthwest Airlines colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Southwest BluePrimary48, 76, 178
- Southwest RedSecondary227, 24, 55
- Southwest YellowAccent255, 182, 18
Surfaces
Page, cards and dividers.- Southwest WhiteBackground255, 255, 255
- Southwest Light GraySurface242, 242, 242
- Southwest Gray BorderBorder194, 194, 194
Text
Three tiers of copy.- Southwest Jet BlackText17, 17, 17
- Southwest CharcoalSecondary text84, 86, 90
- Southwest Muted GrayMuted text118, 118, 118
Semantic
Feedback and state colors.- Southwest GreenSuccess0, 154, 68
- Southwest YellowWarning255, 182, 18
- Southwest RedError227, 24, 55
- Southwest BlueInfo48, 76, 178
Use Southwest Airlines's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
southwest-airlines-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #304CB2;
--error: #E31837;
--accent: #FFB612;
--border: #C2C2C2;
--primary: #304CB2;
--success: #009A44;
--surface: #F2F2F2;
--warning: #FFB612;
--secondary: #E31837;
--text-muted: #767676;
--background: #FFFFFF;
--text-primary: #111111;
--text-secondary: #54565A;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
18.9:1
Pass
Text on surface
Needs 4.5:1 for body text
16.9:1
Pass
Secondary text on background
Needs 4.5:1 for body text
7.4:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
6.6:1
Pass
Muted text on background
Needs 3:1 for large text
4.5:1
Pass
Muted text on surface
Needs 3:1 for large text
4.1:1
Pass
Southwest Airlines gray and neutral colors
The quiet part of the Southwest Airlines palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Southwest WhiteBackground
- HEX
- RGB
- HSL
- Southwest Light GraySurface
- HEX
- RGB
- HSL
- Southwest Gray BorderBorder
- HEX
- RGB
- HSL
- Southwest Jet BlackText
- HEX
- RGB
- HSL
- Southwest CharcoalSecondary text
- HEX
- RGB
- HSL
- Southwest Muted GrayMuted text
- HEX
- RGB
- HSL
About Southwest Airlines's colors
Southwest Airlines' palette is based on primary colors, evoking energy, trust, and friendliness. The combination of blue, red, and yellow is distinctive and highly recognizable in the travel industry.
Primary blue is complemented by bold red and yellow.
Neutral grays and white provide clarity and accessibility.
Accent colors are used for calls to action and highlights.
Psychology
Blue conveys trust and reliability, essential for an airline. Red and yellow add warmth, excitement, and approachability to the brand experience.
Evolution
The core palette has remained stable since the 2014 rebrand, which unified the heart logo and color system. Minor adjustments have been made to gray tones for digital accessibility.
Where Southwest Airlines uses each color
- Primary
Used in navigation bars, headers, and key brand elements.
- Secondary
Appears in buttons, highlights, and the heart logo.
- Accent
Used for call-to-action buttons and important highlights.
- Backgrounds
White and light gray are used for page backgrounds and UI surfaces.
- Text
Jet Black and Charcoal are used for primary and secondary text throughout the website and app.
- Semantic
Green, yellow, and red are used for success, warning, and error states in forms and notifications.
Southwest Airlines color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official primary color for Southwest Airlines is #304CB2, known as Southwest Blue.
Southwest Blue (#304CB2) is RGB(48, 76, 178) and CMYK(73, 57, 0, 30).
Southwest uses Southwest Light Gray (#F2F2F2) for surfaces and Southwest Gray Border (#C2C2C2) for borders, ensuring clarity and accessibility.
Use Southwest Blue (#304CB2) for primary navigation and branding, with red and yellow for accents and calls to action. Neutrals provide background and text contrast for readability.
The secondary color is Southwest Red, #E31837, and the accent is Southwest Yellow, #FFB612. 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 Southwest Airlines's colors consistently when it generates UI.
Make something in the spirit of Southwest Airlines
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.