Mercury color palette
SaaSMercury's brand identity uses a distinctive deep blue as its primary color, complemented by a modern grayscale palette and strategic use of accent teal. The color system reflects a clean, trustworthy, and tech-forward SaaS experience.
mercury.comMercury colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Mercury Deep BluePrimary26, 34, 51
- Mercury SlateSecondary45, 55, 72
- Mercury TealAccent54, 214, 174
Surfaces
Page, cards and dividers.- Mercury Light BackgroundBackground247, 250, 252
- Mercury WhiteSurface255, 255, 255
- Mercury Border GrayBorder226, 232, 240
Text
Three tiers of copy.- Mercury Deep BlueText26, 34, 51
- Mercury Medium GraySecondary text74, 85, 104
- Mercury Muted GrayMuted text160, 174, 192
Semantic
Feedback and state colors.- Mercury TealSuccess54, 214, 174
- Mercury OrangeWarning246, 173, 85
- Mercury RedError245, 101, 101
- Mercury BlueInfo66, 153, 225
Use Mercury's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
mercury-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #4299E1;
--error: #F56565;
--accent: #36D6AE;
--border: #E2E8F0;
--primary: #1A2233;
--success: #36D6AE;
--surface: #FFFFFF;
--warning: #F6AD55;
--secondary: #2D3748;
--text-muted: #A0AEC0;
--background: #F7FAFC;
--text-primary: #1A2233;
--text-secondary: #4A5568;
}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.2:1
Pass
Text on surface
Needs 4.5:1 for body text
15.9:1
Pass
Secondary text on background
Needs 4.5:1 for body text
7.2: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
2.2:1
Fail
Muted text on surface
Needs 3:1 for large text
2.3:1
Fail
Mercury background, border and text colors
The quiet part of the Mercury palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Mercury Light BackgroundBackground
- HEX
- RGB
- HSL
- Mercury WhiteSurface
- HEX
- RGB
- HSL
- Mercury Border GrayBorder
- HEX
- RGB
- HSL
- Mercury Deep BlueText
- HEX
- RGB
- HSL
- Mercury Medium GraySecondary text
- HEX
- RGB
- HSL
- Mercury Muted GrayMuted text
- HEX
- RGB
- HSL
About Mercury's colors
Mercury's palette is anchored by a deep blue, conveying professionalism and trust, balanced with modern neutrals and a vibrant teal accent. The system is designed for clarity and digital usability.
Primary blue pairs with teal for emphasis.
Grayscale tones provide depth and structure.
Accent colors highlight actions and statuses.
Psychology
Deep blue signals reliability and security, crucial for a financial SaaS platform. Teal and orange accents add approachability and draw attention to key actions.
Evolution
Mercury's palette has remained stable since launch, with minor adjustments to grayscale tones for improved accessibility. The core blue and teal have been consistent focal points.
Where Mercury uses each color
- Primary
Used in the navigation bar, logo, and key buttons.
- Secondary
Applied to backgrounds, cards, and secondary navigation elements.
- Accent
Highlights call-to-action buttons and important UI elements.
- Backgrounds
Light gray and white backgrounds are used throughout app screens and dashboards.
- Text
Deep blue for primary text, medium gray for secondary, and muted gray for less prominent information.
- Semantic
Teal indicates success, orange for warnings, red for errors, and blue for informational messages.
Mercury color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Mercury primary brand color is #1A2233, known as Mercury Deep Blue.
Mercury Deep Blue (#1A2233) in RGB is (26, 34, 51). For print, use CMYK (49, 33, 0, 80).
Mercury uses a range of grays: #2D3748 (Mercury Slate), #E2E8F0 (Mercury Border Gray), and #A0AEC0 (Mercury Muted Gray) for backgrounds, borders, and muted text.
Use Mercury Deep Blue (#1A2233) for primary actions and branding, with Mercury Teal (#36D6AE) as an accent for calls to action. Grayscale tones structure the UI and provide accessible contrast.
The secondary color is Mercury Slate, #2D3748, and the accent is Mercury Teal, #36D6AE. 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 Mercury's colors consistently when it generates UI.
Make something in the spirit of Mercury
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.