Jira color palette
SaaSJira's color system is built around a distinctive blue, complemented by cool neutrals and subtle accent colors for clarity and usability. The palette is designed for a clean, professional SaaS interface.
atlassian.comJira colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Jira BluePrimary0, 82, 204
- Jira NavySecondary23, 43, 77
- Jira Accent BlueAccent38, 132, 255
Surfaces
Page, cards and dividers.- Jira Light GrayBackground244, 245, 247
- Jira WhiteSurface255, 255, 255
- Jira Border GrayBorder223, 225, 230
Text
Three tiers of copy.- Jira NavyText23, 43, 77
- Jira SlateSecondary text66, 82, 110
- Jira Muted GrayMuted text107, 119, 140
Semantic
Feedback and state colors.- Jira GreenSuccess54, 179, 126
- Jira YellowWarning255, 171, 0
- Jira RedError255, 86, 48
- Jira CyanInfo0, 184, 217
Use Jira's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
jira-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #00B8D9;
--error: #FF5630;
--accent: #2684FF;
--border: #DFE1E6;
--primary: #0052CC;
--success: #36B37E;
--surface: #FFFFFF;
--warning: #FFAB00;
--secondary: #172B4D;
--text-muted: #6B778C;
--background: #F4F5F7;
--text-primary: #172B4D;
--text-secondary: #42526E;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
12.9:1
Pass
Text on surface
Needs 4.5:1 for body text
14.1: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.9:1
Pass
Muted text on background
Needs 3:1 for large text
4.1:1
Pass
Muted text on surface
Needs 3:1 for large text
4.5:1
Pass
Jira background, border and text colors
The quiet part of the Jira palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Jira Light GrayBackground
- HEX
- RGB
- HSL
- Jira WhiteSurface
- HEX
- RGB
- HSL
- Jira Border GrayBorder
- HEX
- RGB
- HSL
- Jira NavyText
- HEX
- RGB
- HSL
- Jira SlateSecondary text
- HEX
- RGB
- HSL
- Jira Muted GrayMuted text
- HEX
- RGB
- HSL
About Jira's colors
Jira's palette emphasizes clarity and professionalism through a dominant blue, supported by cool neutrals and functional semantic colors. The system is designed for high usability and accessibility in digital interfaces.
Primary blue is complemented by navy and accent blue for depth.
Neutrals provide contrast and support readability.
Semantic colors (green, yellow, red, cyan) signal status and actions.
Psychology
Blue conveys trust, reliability, and focus, aligning with Jira's role in project management. The use of cool neutrals and clear semantic colors supports a calm, organized user experience.
Evolution
Jira's palette has remained stable, with blue as the core identity since its inception. Minor adjustments have refined the neutrals and accent tones for modern UI needs.
Where Jira uses each color
- Primary
Jira Blue is used for main navigation, primary buttons, and key highlights.
- Secondary
Jira Navy appears in headers, sidebars, and text.
- Accent
Jira Accent Blue is used for interactive elements and hover states.
- Backgrounds
Jira Light Gray and White are used for app backgrounds and surfaces.
- Text
Jira Navy, Slate, and Muted Gray are used for primary, secondary, and muted text respectively.
- Semantic
Jira Green, Yellow, Red, and Cyan are used for status indicators, alerts, and notifications.
Jira color questions
Hex codes, RGB values, neutrals and how to use the palette.
The Jira primary color is #0052CC. This blue is central to Jira's brand identity.
The RGB value of Jira Blue (#0052CC) is 0, 82, 204. This is used for digital and print consistency.
Jira uses #F4F5F7 (Light Gray), #DFE1E6 (Border Gray), and #6B778C (Muted Gray) for backgrounds, borders, and muted text. These ensure clarity and accessibility throughout the interface.
Use Jira Blue (#0052CC) for primary actions and navigation, with neutrals for backgrounds and surfaces. Semantic colors should only be used for status and alerts to maintain clarity.
The secondary color is Jira Navy, #172B4D, and the accent is Jira Accent Blue, #2684FF. 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 Jira's colors consistently when it generates UI.
Make something in the spirit of Jira
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.