NordVPN color palette
SaaSNordVPN uses a crisp blue-centric palette with deep darks and cool neutrals to convey security and trust. The brand's color system is consistent across its digital products and marketing materials.
nordvpn.comNordVPN colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- NordVPN BluePrimary70, 135, 255
- NordVPN NavySecondary15, 34, 51
- NordVPN Sky BlueAccent46, 198, 255
Surfaces
Page, cards and dividers.- NordVPN Light BackgroundBackground247, 249, 251
- NordVPN WhiteSurface255, 255, 255
- NordVPN Border GrayBorder227, 232, 238
Text
Three tiers of copy.- NordVPN Primary TextText15, 34, 51
- NordVPN Secondary TextSecondary text75, 92, 107
- NordVPN Muted TextMuted text141, 153, 167
Semantic
Feedback and state colors.- NordVPN Success GreenSuccess46, 212, 122
- NordVPN Warning OrangeWarning255, 185, 70
- NordVPN Error RedError247, 104, 91
- NordVPN Info BlueInfo70, 135, 255
Use NordVPN's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
nordvpn-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #4687FF;
--error: #F7685B;
--accent: #2EC6FF;
--border: #E3E8EE;
--primary: #4687FF;
--success: #2ED47A;
--surface: #FFFFFF;
--warning: #FFB946;
--secondary: #0F2233;
--text-muted: #8D99A7;
--background: #F7F9FB;
--text-primary: #0F2233;
--text-secondary: #4B5C6B;
}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.3:1
Pass
Text on surface
Needs 4.5:1 for body text
16.2:1
Pass
Secondary text on background
Needs 4.5:1 for body text
6.5:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
6.9:1
Pass
Muted text on background
Needs 3:1 for large text
2.7:1
Fail
Muted text on surface
Needs 3:1 for large text
2.9:1
Fail
NordVPN background, border and text colors
The quiet part of the NordVPN palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- NordVPN Light BackgroundBackground
- HEX
- RGB
- HSL
- NordVPN WhiteSurface
- HEX
- RGB
- HSL
- NordVPN Border GrayBorder
- HEX
- RGB
- HSL
- NordVPN Primary TextText
- HEX
- RGB
- HSL
- NordVPN Secondary TextSecondary text
- HEX
- RGB
- HSL
- NordVPN Muted TextMuted text
- HEX
- RGB
- HSL
About NordVPN's colors
NordVPN's palette is built around shades of blue, supported by deep navy and neutral grays for clarity and professionalism. The color system emphasizes trust, security, and usability.
Primary blue is complemented by lighter and darker blues.
Neutrals provide balance for UI clarity.
Accent colors are used for highlights and status indicators.
Psychology
Blue is associated with trust, security, and reliability, aligning with NordVPN's brand promise. The use of deep navy and cool grays reinforces a sense of stability and professionalism.
Evolution
NordVPN's palette has remained stable, with blue as the central color since its inception. Minor adjustments have been made to gray tones and accent colors for improved accessibility and digital clarity.
Where NordVPN uses each color
- Primary
Used for main CTAs, navigation highlights, and key brand elements.
- Secondary
Appears in headers, footers, and backgrounds for depth.
- Accent
Used for links, icons, and interactive UI elements.
- Backgrounds
Light backgrounds are used for app screens and website sections.
- Text
Primary and secondary text colors are used for body copy and headings.
- Semantic
Success, warning, and error colors are used for status badges and alerts.
NordVPN color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official NordVPN primary color is #4687FF. This blue is used for key brand and interface elements.
NordVPN Blue (#4687FF) in RGB is (70, 135, 255). For CMYK, it is approximately (73, 47, 0, 0).
NordVPN uses #E3E8EE for borders and #F7F9FB for background neutrals. These provide a clean, modern interface supporting the blue palette.
Use #4687FF for primary actions and highlights, with navy and neutrals for structure and readability. Accent and semantic colors should be reserved for interactive and status elements.
The secondary color is NordVPN Navy, #0F2233, and the accent is NordVPN Sky Blue, #2EC6FF. 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 NordVPN's colors consistently when it generates UI.
Make something in the spirit of NordVPN
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.