Xero color palette
SaaSXero's color identity centers on a distinctive light blue, complemented by a clean, minimal palette of neutrals and subtle accents. The system prioritizes clarity and approachability across its SaaS platform and communications.
xero.comXero colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Xero BluePrimary19, 181, 234
- Xero TealSecondary0, 148, 198
- Xero AquaAccent0, 194, 178
Surfaces
Page, cards and dividers.- Xero CloudBackground247, 250, 252
- Xero WhiteSurface255, 255, 255
- Xero SilverBorder229, 233, 237
Text
Three tiers of copy.- Xero CharcoalText26, 26, 26
- Xero SlateSecondary text107, 122, 137
- Xero MistMuted text179, 189, 197
Semantic
Feedback and state colors.- Xero Success GreenSuccess0, 179, 134
- Xero Warning YellowWarning255, 183, 0
- Xero Error RedError233, 79, 79
- Xero Info BlueInfo19, 181, 234
Use Xero's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
xero-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #13B5EA;
--error: #E94F4F;
--accent: #00C2B2;
--border: #E5E9ED;
--primary: #13B5EA;
--success: #00B386;
--surface: #FFFFFF;
--warning: #FFB700;
--secondary: #0094C6;
--text-muted: #B3BDC5;
--background: #F7FAFC;
--text-primary: #1A1A1A;
--text-secondary: #6B7A89;
}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.6:1
Pass
Text on surface
Needs 4.5:1 for body text
17.4:1
Pass
Secondary text on background
Needs 4.5:1 for body text
4.2:1
Fail
Secondary text on surface
Needs 4.5:1 for body text
4.4:1
Fail
Muted text on background
Needs 3:1 for large text
1.8:1
Fail
Muted text on surface
Needs 3:1 for large text
1.9:1
Fail
Xero background, border and text colors
The quiet part of the Xero palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Xero CloudBackground
- HEX
- RGB
- HSL
- Xero WhiteSurface
- HEX
- RGB
- HSL
- Xero SilverBorder
- HEX
- RGB
- HSL
- Xero CharcoalText
- HEX
- RGB
- HSL
- Xero SlateSecondary text
- HEX
- RGB
- HSL
- Xero MistMuted text
- HEX
- RGB
- HSL
About Xero's colors
Xero's palette is built around a signature blue, supported by cool neutrals and functional accent colors. The scheme is designed for clarity, accessibility, and a modern SaaS aesthetic.
Primary blue is complemented by teal and aqua for visual hierarchy.
Neutrals provide contrast for text and UI surfaces.
Semantic colors (green, yellow, red) are reserved for status and feedback.
Psychology
The blue tones convey trust, reliability, and calm, aligning with Xero's financial software positioning. Neutrals and accent colors support a sense of simplicity and approachability.
Evolution
Xero's palette has remained consistent since its early brand refresh, with only minor adjustments to neutral tones for better accessibility. The focus has always been on maintaining a clean, blue-centric identity.
Where Xero uses each color
- Primary
Used for main navigation bars, key buttons, and brand highlights across the website and app.
- Secondary
Appears in secondary buttons, links, and subtle UI elements.
- Accent
Used for notifications, highlights, and interactive elements requiring emphasis.
- Backgrounds
Applied to app screens, dashboard backgrounds, and large content areas.
- Text
Charcoal and slate are used for primary and secondary text throughout the UI.
- Semantic
Success, warning, and error colors are used for status badges, alerts, and validation messages.
Xero color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Xero primary color is #13B5EA. This blue is used across all major brand touchpoints.
Xero Blue (#13B5EA) is RGB(19, 181, 234) and CMYK(92, 11, 0, 8). These values ensure consistent reproduction in digital and print.
Xero uses #F7FAFC (Xero Cloud) for backgrounds, #E5E9ED (Xero Silver) for borders, and #1A1A1A (Xero Charcoal) for primary text. These neutrals provide clarity and accessibility.
Use Xero Blue (#13B5EA) for primary actions and highlights, with neutrals for backgrounds and text. Semantic colors are reserved for status and feedback elements only.
The secondary color is Xero Teal, #0094C6, and the accent is Xero Aqua, #00C2B2. Together with the primary they make up the three brand colors at the top of this page.
2 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 Xero's colors consistently when it generates UI.
Make something in the spirit of Xero
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.