1Password color palette
SaaS1Password uses a cool, professional palette centered around its signature blue, with supporting neutrals for clarity and security. The color system emphasizes trust, usability, and a modern SaaS aesthetic.
1password.com1Password colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- 1Password BluePrimary59, 102, 188
- 1Password NavySecondary45, 58, 74
- 1Password CyanAccent46, 194, 230
Surfaces
Page, cards and dividers.- 1Password Light GrayBackground245, 247, 250
- 1Password WhiteSurface255, 255, 255
- 1Password Border GrayBorder209, 214, 224
Text
Three tiers of copy.- 1Password Text BlackText26, 37, 51
- 1Password Text GraySecondary text91, 107, 127
- 1Password Muted GrayMuted text141, 153, 168
Semantic
Feedback and state colors.- 1Password Success GreenSuccess39, 174, 96
- 1Password Warning OrangeWarning245, 166, 35
- 1Password Error RedError231, 76, 60
- 1Password Info CyanInfo46, 194, 230
Use 1Password's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
1password-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #2EC2E6;
--error: #E74C3C;
--accent: #2EC2E6;
--border: #D1D6E0;
--primary: #3B66BC;
--success: #27AE60;
--surface: #FFFFFF;
--warning: #F5A623;
--secondary: #2D3A4A;
--text-muted: #8D99A8;
--background: #F5F7FA;
--text-primary: #1A2533;
--text-secondary: #5B6B7F;
}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
15.5:1
Pass
Secondary text on background
Needs 4.5:1 for body text
5.1:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
5.4: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
1Password background, border and text colors
The quiet part of the 1Password palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- 1Password Light GrayBackground
- HEX
- RGB
- HSL
- 1Password WhiteSurface
- HEX
- RGB
- HSL
- 1Password Border GrayBorder
- HEX
- RGB
- HSL
- 1Password Text BlackText
- HEX
- RGB
- HSL
- 1Password Text GraySecondary text
- HEX
- RGB
- HSL
- 1Password Muted GrayMuted text
- HEX
- RGB
- HSL
About 1Password's colors
1Password's palette is grounded in blue, conveying trust and security, with supporting neutrals for clarity. Accent colors are used sparingly to highlight actions and statuses.
Primary blue pairs with navy for depth.
Cyan accent contrasts with blue for calls to action.
Neutrals provide a clean, readable interface.
Psychology
Blue is commonly associated with trust, reliability, and security, aligning with 1Password's brand promise. The use of cool tones and clear neutrals reinforces a sense of calm and professionalism.
Evolution
The core blue-centric palette has remained stable, with minor adjustments to accent and neutral tones for improved accessibility. The brand has consistently prioritized clarity and trustworthiness in its color choices.
Where 1Password uses each color
- Primary
Used for main navigation, primary buttons, and key highlights throughout the app and website.
- Secondary
Appears in headers, footers, and backgrounds to provide depth and contrast.
- Accent
Used for call-to-action buttons, links, and important highlights.
- Backgrounds
Light gray and white are used for page backgrounds and content surfaces.
- Text
Text black is used for main content, with gray and muted gray for secondary and less prominent text.
- Semantic
Green, orange, red, and cyan are used for success, warning, error, and informational messages respectively.
1Password color questions
Hex codes, RGB values, neutrals and how to use the palette.
The 1Password primary color is #3B66BC, known as 1Password Blue. This is used for main branding elements and primary actions.
The RGB value for #3B66BC is (59, 102, 188). For CMYK, it is approximately (69, 46, 0, 26).
1Password uses #F5F7FA (Light Gray), #D1D6E0 (Border Gray), and #1A2533 (Text Black) for backgrounds, borders, and text. These neutrals support clarity and readability across the interface.
Use 1Password Blue (#3B66BC) for primary actions and navigation, with navy and cyan for secondary and accent elements. Neutrals and semantic colors should be applied according to their roles for backgrounds, text, and status indicators.
The secondary color is 1Password Navy, #2D3A4A, and the accent is 1Password Cyan, #2EC2E6. 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 1Password's colors consistently when it generates UI.
Make something in the spirit of 1Password
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.