Bitwarden color palette
SaaSBitwarden's color identity centers on a strong blue primary, complemented by a neutral gray palette and subtle accent colors for clarity and security. The palette is designed for high accessibility and a professional, trustworthy appearance.
bitwarden.comBitwarden colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Bitwarden BluePrimary23, 93, 220
- Bitwarden CharcoalSecondary28, 28, 28
- Bitwarden CyanAccent0, 163, 224
Surfaces
Page, cards and dividers.- Bitwarden Light GrayBackground247, 248, 250
- Bitwarden WhiteSurface255, 255, 255
- Bitwarden Border GrayBorder209, 213, 219
Text
Three tiers of copy.- Bitwarden CharcoalText28, 28, 28
- Bitwarden Medium GraySecondary text75, 85, 99
- Bitwarden Muted GrayMuted text107, 114, 128
Semantic
Feedback and state colors.- Bitwarden Success GreenSuccess34, 197, 94
- Bitwarden Warning OrangeWarning245, 158, 66
- Bitwarden Error RedError239, 68, 68
- Bitwarden Info BlueInfo37, 99, 235
Use Bitwarden's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
bitwarden-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #2563EB;
--error: #EF4444;
--accent: #00A3E0;
--border: #D1D5DB;
--primary: #175DDC;
--success: #22C55E;
--surface: #FFFFFF;
--warning: #F59E42;
--secondary: #1C1C1C;
--text-muted: #6B7280;
--background: #F7F8FA;
--text-primary: #1C1C1C;
--text-secondary: #4B5563;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
16.0:1
Pass
Text on surface
Needs 4.5:1 for body text
17.0:1
Pass
Secondary text on background
Needs 4.5:1 for body text
7.1:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
7.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.8:1
Pass
Bitwarden background, border and text colors
The quiet part of the Bitwarden palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Bitwarden Light GrayBackground
- HEX
- RGB
- HSL
- Bitwarden WhiteSurface
- HEX
- RGB
- HSL
- Bitwarden Border GrayBorder
- HEX
- RGB
- HSL
- Bitwarden CharcoalText
- HEX
- RGB
- HSL
- Bitwarden Medium GraySecondary text
- HEX
- RGB
- HSL
- Bitwarden Muted GrayMuted text
- HEX
- RGB
- HSL
About Bitwarden's colors
Bitwarden's palette is built around a bold blue, conveying trust and security, with supporting neutrals for clarity. Accent and semantic colors are used sparingly for clear, accessible UI feedback.
Primary blue is paired with neutral grays for contrast.
Accent cyan highlights interactive elements.
Semantic colors provide clear status signals.
Psychology
Blue is associated with trustworthiness and reliability, key values for a security-focused brand. The neutral grays reinforce professionalism and readability.
Evolution
Bitwarden's palette has remained stable, with the blue primary consistently central to its identity. Minor adjustments have refined the gray and accent tones for improved accessibility.
Where Bitwarden uses each color
- Primary
Used for navigation bars, primary buttons, and key highlights throughout the app and website.
- Secondary
Appears in headers, footers, and dark mode backgrounds.
- Accent
Used for links, icons, and interactive states to draw attention.
- Backgrounds
Light gray backgrounds are used for app screens and content areas.
- Text
Charcoal and medium gray are used for primary and secondary text, ensuring readability.
- Semantic
Success, warning, error, and info colors are used for alerts, notifications, and status indicators.
Bitwarden color questions
Hex codes, RGB values, neutrals and how to use the palette.
The Bitwarden primary color hex code is #175DDC. This blue is used for key brand and UI elements.
Bitwarden Blue (#175DDC) is RGB(23, 93, 220) and approximately CMYK(90, 58, 0, 14). Use these values for print and digital consistency.
Bitwarden uses several grays, including #1C1C1C (Charcoal) for text and #F7F8FA (Light Gray) for backgrounds. These support clarity and accessibility.
Use the primary blue (#175DDC) for main actions and navigation, with grays for backgrounds and text. Accent and semantic colors are reserved for highlights and status feedback.
The secondary color is Bitwarden Charcoal, #1C1C1C, and the accent is Bitwarden Cyan, #00A3E0. 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 Bitwarden's colors consistently when it generates UI.
Make something in the spirit of Bitwarden
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.