Atlassian color palette
TechAtlassian's color system is built around a distinctive blue primary, complemented by a range of cool and neutral tones for clarity and usability in digital products. The palette emphasizes trust, professionalism, and approachability.
atlassian.comAtlassian colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Atlassian BluePrimary0, 82, 204
- Atlassian NavySecondary23, 43, 77
- Atlassian GreenAccent54, 179, 126
Surfaces
Page, cards and dividers.- Atlassian Light GrayBackground244, 245, 247
- Atlassian WhiteSurface255, 255, 255
- Atlassian Border GrayBorder223, 225, 230
Text
Three tiers of copy.- Atlassian Text NavyText23, 43, 77
- Atlassian Text GraySecondary text107, 119, 140
- Atlassian Muted GrayMuted text137, 147, 164
Semantic
Feedback and state colors.- Atlassian Success GreenSuccess54, 179, 126
- Atlassian Warning YellowWarning255, 171, 0
- Atlassian Error RedError255, 86, 48
- Atlassian Info BlueInfo0, 184, 217
Use Atlassian's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
atlassian-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #00B8D9;
--error: #FF5630;
--accent: #36B37E;
--border: #DFE1E6;
--primary: #0052CC;
--success: #36B37E;
--surface: #FFFFFF;
--warning: #FFAB00;
--secondary: #172B4D;
--text-muted: #8993A4;
--background: #F4F5F7;
--text-primary: #172B4D;
--text-secondary: #6B778C;
}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
4.1:1
Fail
Secondary text on surface
Needs 4.5:1 for body text
4.5:1
Pass
Muted text on background
Needs 3:1 for large text
2.8:1
Fail
Muted text on surface
Needs 3:1 for large text
3.1:1
Pass
Atlassian background, border and text colors
The quiet part of the Atlassian palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Atlassian Light GrayBackground
- HEX
- RGB
- HSL
- Atlassian WhiteSurface
- HEX
- RGB
- HSL
- Atlassian Border GrayBorder
- HEX
- RGB
- HSL
- Atlassian Text NavyText
- HEX
- RGB
- HSL
- Atlassian Text GraySecondary text
- HEX
- RGB
- HSL
- Atlassian Muted GrayMuted text
- HEX
- RGB
- HSL
About Atlassian's colors
Atlassian's palette is anchored by a bold blue, supported by cool neutrals and vibrant accents for clarity and accessibility. The system is designed for digital interfaces, ensuring consistency and legibility.
Primary blue is complemented by navy and green for hierarchy.
Neutral grays provide structure and background support.
Accent colors highlight status and interactive elements.
Psychology
Blue conveys trust, reliability, and professionalism, aligning with Atlassian's collaborative software ethos. Green and other accents add energy and guide user attention.
Evolution
Atlassian's color palette has remained stable since its 2017 rebrand, focusing on clarity and digital usability. Minor adjustments have refined contrast and accessibility over time.
Where Atlassian uses each color
- Primary
Used for main navigation bars, primary buttons, and key brand elements.
- Secondary
Applied to headers, footers, and secondary navigation backgrounds.
- Accent
Highlights success states, active elements, and key actions.
- Backgrounds
Fills app backgrounds and dashboard areas for a clean workspace.
- Text
Text Navy and Text Gray are used for primary and secondary text throughout interfaces.
- Semantic
Success, warning, error, and info colors are used for alerts, notifications, and status indicators.
Atlassian color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Atlassian primary color is #0052CC, known as Atlassian Blue. This color is used for main branding and interface highlights.
Atlassian Blue (#0052CC) has an RGB value of (0, 82, 204) and a CMYK value of (100, 60, 0, 20). Use these values for print and digital consistency.
Atlassian uses a range of grays such as Atlassian Light Gray (#F4F5F7), Border Gray (#DFE1E6), and Text Gray (#6B778C) for backgrounds, borders, and secondary text. These neutrals ensure clarity and accessibility in the UI.
Use Atlassian Blue (#0052CC) for primary actions and navigation, with neutrals for backgrounds and text. Accent and semantic colors are reserved for status, feedback, and interactive elements.
The secondary color is Atlassian Navy, #172B4D, and the accent is Atlassian Green, #36B37E. 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 Atlassian's colors consistently when it generates UI.
Make something in the spirit of Atlassian
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.