Brex color palette
SaaSBrex's color system is built around a deep, near-black primary with a sophisticated palette of neutrals and orange accents, reflecting its modern fintech identity. The palette emphasizes clarity, professionalism, and a focus on usability in financial SaaS interfaces.
brex.comBrex colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Brex BlackPrimary33, 33, 33
- Brex OrangeSecondary255, 122, 89
- Brex Light GrayAccent245, 245, 247
Surfaces
Page, cards and dividers.- Brex WhiteBackground255, 255, 255
- Brex Surface GraySurface245, 245, 247
- Brex Border GrayBorder224, 224, 224
Text
Three tiers of copy.- Brex Primary TextText33, 33, 33
- Brex Secondary TextSecondary text117, 117, 117
- Brex Muted TextMuted text189, 189, 189
Semantic
Feedback and state colors.- Brex Success GreenSuccess0, 196, 140
- Brex Warning YellowWarning255, 176, 32
- Brex Error RedError255, 77, 79
- Brex Info BlueInfo58, 141, 255
Use Brex's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
brex-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #3A8DFF;
--error: #FF4D4F;
--accent: #F5F5F7;
--border: #E0E0E0;
--primary: #212121;
--success: #00C48C;
--surface: #F5F5F7;
--warning: #FFB020;
--secondary: #FF7A59;
--text-muted: #BDBDBD;
--background: #FFFFFF;
--text-primary: #212121;
--text-secondary: #757575;
}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.1:1
Pass
Text on surface
Needs 4.5:1 for body text
14.8:1
Pass
Secondary text on background
Needs 4.5:1 for body text
4.6:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
4.2:1
Fail
Muted text on background
Needs 3:1 for large text
1.9:1
Fail
Muted text on surface
Needs 3:1 for large text
1.7:1
Fail
Brex gray and neutral colors
The quiet part of the Brex palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Brex WhiteBackground
- HEX
- RGB
- HSL
- Brex Surface GraySurface
- HEX
- RGB
- HSL
- Brex Border GrayBorder
- HEX
- RGB
- HSL
- Brex Primary TextText
- HEX
- RGB
- HSL
- Brex Secondary TextSecondary text
- HEX
- RGB
- HSL
- Brex Muted TextMuted text
- HEX
- RGB
- HSL
About Brex's colors
Brex's color palette is grounded in high-contrast neutrals with a distinctive orange accent, supporting clarity and accessibility. The system is designed for both digital product UI and brand communications.
Primary black anchors navigation and text.
Orange accent highlights actions and brand moments.
Grays provide structure and hierarchy in UI.
Psychology
The deep black conveys stability and trust, essential for a financial brand. Orange adds energy and approachability, balancing the seriousness of the core palette.
Evolution
Brex's palette has remained consistent since launch, with minor refinements to gray tones for improved accessibility. The orange accent has been a constant, reinforcing brand recognition.
Where Brex uses each color
- Primary
Used for navigation bars, primary buttons, and key headings.
- Secondary
Appears in call-to-action buttons, links, and highlights.
- Accent
Used for backgrounds, cards, and subtle UI elements.
- Backgrounds
White and light gray are used for main app backgrounds and dashboard surfaces.
- Text
Primary and secondary text colors are used for body copy and supporting information.
- Semantic
Green, yellow, red, and blue are used for status indicators, alerts, and notifications.
Brex color questions
Hex codes, RGB values, neutrals and how to use the palette.
The Brex primary color is #212121, known as Brex Black. It is used throughout their digital products and branding.
The RGB value for #212121 is (33, 33, 33). For CMYK, it is approximately (0, 0, 0, 87).
Brex uses #F5F5F7 (Brex Light Gray), #E0E0E0 (Brex Border Gray), #757575 (Brex Secondary Text), and #BDBDBD (Brex Muted Text) for neutral UI elements and text. These provide structure and hierarchy in the product interface.
Use #212121 for primary navigation and text, #FF7A59 for accents and calls to action, and the gray tones for backgrounds and supporting UI. Semantic colors are reserved for status and alerts.
The secondary color is Brex Orange, #FF7A59, and the accent is Brex Light Gray, #F5F5F7. Together with the primary they make up the three brand colors at the top of this page.
3 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 Brex's colors consistently when it generates UI.
Make something in the spirit of Brex
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.