Auth0 color palette
SaaSAuth0's color system centers around a vibrant orange, complemented by deep blues and neutral grays for a modern, secure SaaS identity. The palette is designed for clarity and accessibility across digital products.
auth0.comAuth0 colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Auth0 OrangePrimary235, 84, 36
- Auth0 NavySecondary22, 33, 77
- Auth0 Sky BlueAccent0, 179, 230
Surfaces
Page, cards and dividers.- Auth0 WhiteBackground255, 255, 255
- Auth0 Light GraySurface245, 246, 250
- Auth0 Border GrayBorder217, 221, 232
Text
Three tiers of copy.- Auth0 Navy TextText22, 33, 77
- Auth0 Secondary GraySecondary text91, 103, 120
- Auth0 Muted GrayMuted text161, 167, 179
Semantic
Feedback and state colors.- Auth0 Success GreenSuccess46, 194, 126
- Auth0 Warning YellowWarning255, 180, 0
- Auth0 Error RedError224, 60, 49
- Auth0 Sky BlueInfo0, 179, 230
Use Auth0's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
auth0-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #00B3E6;
--error: #E03C31;
--accent: #00B3E6;
--border: #D9DDE8;
--primary: #EB5424;
--success: #2EC27E;
--surface: #F5F6FA;
--warning: #FFB400;
--secondary: #16214D;
--text-muted: #A1A7B3;
--background: #FFFFFF;
--text-primary: #16214D;
--text-secondary: #5B6778;
}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.5:1
Pass
Text on surface
Needs 4.5:1 for body text
14.3:1
Pass
Secondary text on background
Needs 4.5:1 for body text
5.7:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
5.3:1
Pass
Muted text on background
Needs 3:1 for large text
2.4:1
Fail
Muted text on surface
Needs 3:1 for large text
2.2:1
Fail
Auth0 background, border and text colors
The quiet part of the Auth0 palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Auth0 WhiteBackground
- HEX
- RGB
- HSL
- Auth0 Light GraySurface
- HEX
- RGB
- HSL
- Auth0 Border GrayBorder
- HEX
- RGB
- HSL
- Auth0 Navy TextText
- HEX
- RGB
- HSL
- Auth0 Secondary GraySecondary text
- HEX
- RGB
- HSL
- Auth0 Muted GrayMuted text
- HEX
- RGB
- HSL
About Auth0's colors
Auth0's palette uses a bold orange to convey energy and trust, balanced by deep blues and neutral grays for professionalism. The system is designed for strong contrast and accessibility in digital interfaces.
Primary orange contrasts with navy blue for emphasis.
Grays provide neutral backgrounds and text clarity.
Accent blue highlights actionable elements.
Psychology
Orange communicates approachability and innovation, while navy blue reinforces security and reliability. The use of gray tones supports a modern, neutral user experience.
Evolution
Auth0's palette has remained stable, with orange and navy as core brand colors since early brand guidelines. Minor adjustments have refined gray and accent tones for improved UI clarity.
Where Auth0 uses each color
- Primary
Auth0 Orange is used for logos, primary buttons, and key highlights.
- Secondary
Auth0 Navy appears in headers, navigation bars, and footers.
- Accent
Auth0 Sky Blue is used for links, icons, and interactive UI elements.
- Backgrounds
Auth0 White and Light Gray serve as main page and panel backgrounds.
- Text
Navy and secondary gray are used for primary and secondary text, with muted gray for placeholders.
- Semantic
Green, yellow, and red are used for success, warning, and error states in forms and notifications.
Auth0 color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Auth0 primary color is #EB5424. This orange is used for the logo and key brand elements.
Auth0 Orange (#EB5424) in RGB is 235, 84, 36. In CMYK, it is approximately 0, 64, 85, 8.
Auth0 uses several grays: Light Gray (#F5F6FA), Border Gray (#D9DDE8), Secondary Gray (#5B6778), and Muted Gray (#A1A7B3). These are used for backgrounds, borders, and text.
Use Auth0 Orange for primary actions and branding, navy for structure, and grays for backgrounds and text. Accent blue and semantic colors are reserved for highlights and status indicators.
The secondary color is Auth0 Navy, #16214D, and the accent is Auth0 Sky Blue, #00B3E6. 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 Auth0's colors consistently when it generates UI.
Make something in the spirit of Auth0
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.