KLM color palette
TravelKLM's color identity is defined by its distinctive bright blue, reflecting clarity, reliability, and Dutch heritage. The palette is clean, minimal, and consistently applied across digital and physical touchpoints.
klm.comKLM colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- KLM BluePrimary0, 161, 222
- KLM Royal BlueSecondary0, 48, 130
- KLM WhiteAccent255, 255, 255
Surfaces
Page, cards and dividers.- KLM Light SkyBackground246, 249, 251
- KLM CloudSurface230, 238, 243
- KLM Border GrayBorder179, 201, 214
Text
Three tiers of copy.- KLM CharcoalText34, 34, 34
- KLM SlateSecondary text74, 74, 74
- KLM MistMuted text125, 138, 146
Semantic
Feedback and state colors.- KLM Success GreenSuccess0, 179, 136
- KLM Warning YellowWarning255, 184, 28
- KLM Error RedError224, 60, 49
- KLM Info BlueInfo0, 151, 194
Use KLM's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
klm-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0097C2;
--error: #E03C31;
--accent: #FFFFFF;
--border: #B3C9D6;
--primary: #00A1DE;
--success: #00B388;
--surface: #E6EEF3;
--warning: #FFB81C;
--secondary: #003082;
--text-muted: #7D8A92;
--background: #F6F9FB;
--text-primary: #222222;
--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
15.0:1
Pass
Text on surface
Needs 4.5:1 for body text
13.6:1
Pass
Secondary text on background
Needs 4.5:1 for body text
8.4:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
7.5:1
Pass
Muted text on background
Needs 3:1 for large text
3.4:1
Pass
Muted text on surface
Needs 3:1 for large text
3.0:1
Pass
KLM background, border and text colors
The quiet part of the KLM palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- KLM Light SkyBackground
- HEX
- RGB
- HSL
- KLM CloudSurface
- HEX
- RGB
- HSL
- KLM Border GrayBorder
- HEX
- RGB
- HSL
- KLM CharcoalText
- HEX
- RGB
- HSL
- KLM SlateSecondary text
- HEX
- RGB
- HSL
- KLM MistMuted text
- HEX
- RGB
- HSL
About KLM's colors
KLM's palette is built around its iconic blue, supported by deep navy and crisp neutrals for clarity and trustworthiness. The colors are chosen for high legibility and a calm, professional appearance.
Primary blue is complemented by a darker blue for hierarchy.
Neutrals and whites provide balance and readability.
Accent and semantic colors are used sparingly for clarity.
Psychology
The signature blue conveys trust, safety, and professionalism, aligning with KLM's aviation heritage. Neutrals and accent colors support a sense of calm and reliability.
Evolution
KLM's color palette has remained stable for decades, with minor adjustments to blue tones for digital clarity. The brand has consistently prioritized simplicity and recognizability in its color use.
Where KLM uses each color
- Primary
KLM Blue is used for main navigation bars, buttons, and key brand elements.
- Secondary
KLM Royal Blue appears in headers, footers, and as a supporting background for emphasis.
- Accent
KLM White is used for text on blue backgrounds and as a primary background color.
- Backgrounds
KLM Light Sky and KLM Cloud are used for page backgrounds and cards to create a light, airy interface.
- Text
KLM Charcoal and KLM Slate are used for primary and secondary text, ensuring high contrast and readability.
- Semantic
Success, warning, error, and info colors are used for alerts, notifications, and status indicators in the UI.
KLM color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official KLM primary color is KLM Blue, with the hex code #00A1DE. This color is used across all major brand touchpoints.
KLM Blue (#00A1DE) is RGB(0, 161, 222) and CMYK(80, 15, 0, 0). These values ensure consistency across print and digital media.
KLM uses KLM Cloud (#E6EEF3), KLM Border Gray (#B3C9D6), and KLM Mist (#7D8A92) as its main neutrals for backgrounds, borders, and muted text. These tones support the blue palette and maintain a clean interface.
Use KLM Blue (#00A1DE) for primary actions and branding, with KLM Royal Blue (#003082) for emphasis and hierarchy. Neutrals and semantic colors should be used to support clarity and accessibility.
The secondary color is KLM Royal Blue, #003082, and the accent is KLM 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 KLM's colors consistently when it generates UI.
Make something in the spirit of KLM
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.