Software & SaaS
Atlassian Color Codes
Atlassian's colors are blue #0052CC and a lighter #2684FF. The Atlassian color codes in Hex, RGB and CMYK can be found below. Mike Cannon-Brookes and Scott Farquhar started the company in Sydney in 2002 on about $10,000 of credit card debt, and named it after Atlas, from the bronze statue at Rockefeller Center. Three of the brands on this page belong to it: Jira, Confluence and Trello.
Primary colors
What are Atlassian Primary Colors?
Atlassian's primary color is blue #0052CC, with #2684FF used where the darker value would go muddy.
Atlassian publishes no public CMYK or Pantone sheet, so both are shown below as conversions and nearest matches.
Atlassian Blue
| Hex | #0052CC |
|---|---|
| RGB | 0, 82, 204 |
| HSL | hsl(216, 100%, 40%) |
| CMYK | 100%, 60%, 0%, 20%converted · approximate |
| Pantone | PMS 2728 Cnearest match · not published by the brand |
Atlassian Light Blue
| Hex | #2684FF |
|---|---|
| RGB | 38, 132, 255 |
| HSL | hsl(214, 100%, 57%) |
| CMYK | 85%, 48%, 0%, 0%converted · approximate |
| Pantone | PMS 2935 Cnearest match · not published by the brand |
Atlassian Hex Color Codes
Atlassian hex color codes are #0052CC for blue and #2684FF for light blue.
| Color | Hex |
|---|---|
| Blue | #0052CC |
| Light Blue | #2684FF |
Atlassian RGB Color Codes
Atlassian RGB color codes are 0, 82, 204 for blue and 38, 132, 255 for light blue. Reach for RGB when a tool wants channel numbers or a CSS alpha value.
| Color | RGB |
|---|---|
| Blue | rgb(0, 82, 204) |
| Light Blue | rgb(38, 132, 255) |
Atlassian HSL Color Codes
Atlassian HSL color codes are 216, 100%, 40% for blue and 214, 100%, 57% for light blue. Change the third value for a lighter or darker version without moving the hue.
| Color | HSL |
|---|---|
| Blue | hsl(216, 100%, 40%) |
| Light Blue | hsl(214, 100%, 57%) |
Atlassian CMYK Color Code
Atlassian CMYK color codes are conversions from the hex, because the brand publishes none. Check a printed proof before a full run.
| Color | CMYK |
|---|---|
| Blue | 100%, 60%, 0%, 20% |
| Light Blue | 85%, 48%, 0%, 0% |
Atlassian Pantone Color Codes
Atlassian Pantone color codes are nearest matches by color distance, not brand specs. The table shows the closest swatch for every color.
| Color | Nearest Pantone |
|---|---|
| Blue | PMS 2728 C |
| Light Blue | PMS 2935 C |
Logo
Atlassian Logo Colors
Atlassian logo colors are two blues, the darker carrying the mark and the lighter its highlight.
Atlassian Logo Colors Palette
What the Atlassian Logo Colors Mean?
The Atlassian logo colors sit on a shape that is holding something up. The mark is an A drawn as two arches, and the reference is Atlas, the figure the founders took the name from after seeing the statue at Rockefeller Center. Two blues rather than one give the arch a lit edge without a gradient. The company's own products then each take a different color, which is why Jira, Confluence and Trello look like relatives rather than copies.
Atlassian Logo Color History
Atlassian logo color history turns on the 2017 redesign, when the previous three-dimensional blue mark was flattened into the two-tone arch used now. Blue survived the change. What went was the depth, because the older mark lost its shading entirely below about 24px.
Atlassian Logo JPG
Atlassian logo in JPG. No transparency, so it is flattened onto white. Safe for documents and slide decks.
Atlassian Logo PNG
Atlassian logo in PNG, with a transparent background. Use it over a colored surface.
Atlassian Logo WebP
Atlassian logo in WebP. Same transparency as the PNG at about a third of the file size.
Atlassian Color Code Shades
Atlassian color code shades step evenly from the primary toward black, for hover states, borders and shadows.
These are interface steps, not Atlassian paint or trim names.
In code
Using the Atlassian palette
CSS custom properties
:root {
--atlassian-blue: #0052CC;
--atlassian-light-blue: #2684FF;
}Contrast against white
| Blue | 6.82:1AA ✓ |
|---|---|
| Light Blue | 3.60:1AA × |
Brand colors are chosen for recognition, not for legibility. A failing value here is normal. It means use it as a fill, not as text.