Okta color palette
SaaSOkta's brand color system centers on a distinctive blue, complemented by a clean, modern palette of grays and accent hues for clarity and accessibility. The palette supports Okta's identity as a secure, enterprise-focused SaaS provider.
okta.comOkta colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Okta BluePrimary0, 125, 193
- Okta CharcoalSecondary73, 80, 87
- Okta Light BlueAccent0, 184, 241
Surfaces
Page, cards and dividers.- Okta WhiteBackground255, 255, 255
- Okta CloudSurface245, 246, 250
- Okta Border GrayBorder225, 229, 235
Text
Three tiers of copy.- Okta BlackText33, 37, 41
- Okta CharcoalSecondary text73, 80, 87
- Okta Muted GrayMuted text108, 117, 125
Semantic
Feedback and state colors.- Okta Success GreenSuccess67, 176, 42
- Okta Warning YellowWarning255, 180, 0
- Okta Error RedError224, 58, 62
- Okta Info BlueInfo0, 184, 241
Use Okta's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
okta-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #00B8F1;
--error: #E03A3E;
--accent: #00B8F1;
--border: #E1E5EB;
--primary: #007DC1;
--success: #43B02A;
--surface: #F5F6FA;
--warning: #FFB400;
--secondary: #495057;
--text-muted: #6C757D;
--background: #FFFFFF;
--text-primary: #212529;
--text-secondary: #495057;
}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.4: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
8.2:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
7.6:1
Pass
Muted text on background
Needs 3:1 for large text
4.7:1
Pass
Muted text on surface
Needs 3:1 for large text
4.3:1
Pass
Okta background, border and text colors
The quiet part of the Okta palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Okta WhiteBackground
- HEX
- RGB
- HSL
- Okta CloudSurface
- HEX
- RGB
- HSL
- Okta Border GrayBorder
- HEX
- RGB
- HSL
- Okta BlackText
- HEX
- RGB
- HSL
- Okta CharcoalSecondary text
- HEX
- RGB
- HSL
- Okta Muted GrayMuted text
- HEX
- RGB
- HSL
About Okta's colors
Okta's palette uses blue as a core identifier, conveying trust and security, with neutral grays for clarity and accessibility. Accent colors are used sparingly for status and emphasis.
Primary blue is paired with neutral backgrounds for contrast.
Accent blue and green are used for highlights and success states.
Grays provide structure and hierarchy in the UI.
Psychology
Blue is associated with reliability and security, fitting Okta's identity as an authentication provider. The use of clean neutrals supports a professional, trustworthy image.
Evolution
Okta's color palette has remained largely consistent, with minor adjustments to gray tones for accessibility. The primary blue has been stable as the brand's anchor color.
Where Okta uses each color
- Primary
Used in the logo, primary navigation, and main call-to-action buttons.
- Secondary
Appears in secondary navigation, headings, and icons.
- Accent
Used for links, highlights, and information banners.
- Backgrounds
White and light gray backgrounds are used for app screens and site sections.
- Text
Primary and secondary text colors are used throughout the UI for headings and body copy.
- Semantic
Green, yellow, and red are used for success, warning, and error states in notifications and status indicators.
Okta color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Okta primary color is Okta Blue, hex code #007DC1. This should be used for all primary branding elements.
Okta Blue (#007DC1) is RGB(0, 125, 193) and CMYK(100, 35, 0, 24). These values ensure color consistency across digital and print.
Okta uses Okta Charcoal (#495057), Okta Muted Gray (#6C757D), and Okta Border Gray (#E1E5EB) for text, borders, and backgrounds. These neutrals provide structure and accessibility.
Use Okta Blue (#007DC1) for primary actions and branding, with grays and whites for backgrounds and surfaces. Accent and semantic colors should be reserved for highlights and status indicators.
The secondary color is Okta Charcoal, #495057, and the accent is Okta Light Blue, #00B8F1. Together with the primary they make up the three brand colors at the top of this page.
6 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 Okta's colors consistently when it generates UI.
Make something in the spirit of Okta
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.