Use focused, meaningful color to pinpoint exactly what people need to see. We are committed to complying with the Web Content Accessibility Guidelines AA standard contrast ratios.
To do this, choose primary, secondary, and extended colors that support usability by ensuring sufficient color contrast between elements so that people with low vision can see and use our products.
Primary palette
Our primary palette is comprised of neutrals, white, and blue to bring boldness to our brand and is used in logical ways throughout product and marketing to guide the eye and highlight the important bits. We pepper warmer, secondary palette colors throughout to soften the experience and to impart confidence and optimism.
We use blue (B400) for primary actions, buttons, text links, for indicating progress and representing authentication. Neutral (N800) is used primarily for body text and headings, and white (N0) is used for page backgrounds.
Download our color palettes.
Name
B400 - Pacific bridge
Hex
#0052CC
RGB
0, 82, 204
Name
N800 - Squid ink
Hex
#172B4D
RGB
23, 43, 77
Name
N0 - Doctor
Hex
#FFFFFF
RGB
255, 255, 255
Secondary palette
Our secondary palette contains a variety of colors to keep things fresh and interesting. We lean on these colors more frequently when brand awareness is high, or on our own properties where we control the surrounding environment. When used in conjunction with our primary palette, these colors make every moment feel on-brand and every interaction informative.
Our secondary palette is made up of red (R300), yellow (Y300), green (G300), teal (T300), and purple (P300). Each color is selected intentionally to provide meaningful feedback within our products. See the semantic color guidelines below for more information.
Name
R300 - Poppy surprise
Hex
#FF5630
RGB
255, 86, 48
Name
Y300 - Golden state
Hex
#FFAB00
RGB
255, 171, 0
Name
G300 - Fine pine
Hex
#36B37E
RGB
54, 179, 126
Name
T300 - Tamarama
Hex
#00B8D9
RGB
0, 184, 217
Name
P300 - Da' juice
Hex
#6554C0
RGB
101, 84, 192
Extended palette
The extended palette consists of all the useable tints and shades of each color in the palette. They are all numbered for easy reference. Usage of these colors varies depending on the touch point, but they come in handy for illustrations and components in product.
Neutrals
Neutrals have varying degrees of saturation that allow for the appropriate level of warmth across marketing and product. Typically they are used for text and subtle backgrounds when we don't want to draw too much attention to a particular touchpoint or convey information such as "to do" or "disabled".
Dark neutrals
Dark neutrals are very effective for creating contrast and are therefore the primary color used for typography. Occasionally the dark neutrals are found in illustration but they rarely dominate the palette. Some exceptions are dark mode UI elements and illustrations.
Name
N900 - Slate
Hex
#091E42
RGB
9, 30, 66
Name
N800 - Squid ink
Hex
#172B4D
RGB
23, 43, 77
Name
N700 - Snorlax
Hex
#253858
RGB
37, 56, 88
Name
N600 - Pet rock
Hex
#344563
RGB
52, 69, 99
Name
N500 - McFanning
Hex
#42526E
RGB
66, 82, 110
Mid-neutrals
Use mid-neutrals to create depth in components such as modal dialog blankets and cards. Avoid mid-neutrals as background colors because there is usually not enough contrast to remain AA compliant. The mid-neutrals N400 to N200 can be used for subtle text and icons on light-neutral backgrounds. You can find text style using these colors in Typography.
Name
N400 - Concrete jungle
Hex
#505F79
RGB
80, 95, 121
Name
N300 - Clooney
Hex
#5E6C84
RGB
94, 108, 132
Name
N200 - Bling bling
Hex
#6B778C
RGB
107, 119, 140
Name
N100 - Humboldt fog
Hex
#7A869A
RGB
122, 134, 154
Name
N90 - Meredith
Hex
#8993A4
RGB
137, 147, 164
Name
N80 - Spooky ghost
Hex
#97A0AF
RGB
151, 160, 175
Name
N70 - Blanche
Hex
#A5ADBA
RGB
165, 173, 186
Name
N60 - Sentinel
Hex
#B3BAC5
RGB
179, 186, 197
Light neutrals
We use light neutrals as subtle backgrounds to indicate various interactive states such as hover and disabled, or simply to create secondary attention towards a component. You'll find light neutrals in buttons, text fields, tags, and illustrations.
Light neutrals are helpful for offsetting content in a primarily white layout without losing warmth and cleanliness and are therefore often used as a background color. Their subtlety allows for them to be helpful in creating subtle shadows or depth in illustration, and they can also be helpful in depicting illustrative objects that are typically made of metallic materials like hardware, or atmospheric elements in illustrations, like clouds.
Name
N50 - Karl
Hex
#C1C7D0
RGB
193, 199, 208
Name
N40 - Jolly fun time
Hex
#DFE1E6
RGB
223, 225, 230
Name
N30 - Northeast snow
Hex
#EBECF0
RGB
235, 236, 240
Name
N20 - Gram's hair
Hex
#F4F5F7
RGB
244, 245, 247
Name
N10 - Wash me
Hex
#FAFBFC
RGB
250, 251, 252
Name
N0 - Doctor
Hex
#FFFFFF
RGB
255, 255, 255
Red
Red is mainly used for backgrounds in messages and in error states to draw attention to important information or actions that are destructive or block workflow. You'll find red used in components such as lozenges, banner, flag messages, buttons, illustrations, and typography.
Name
R500 - Dragon's blood
Hex
#BF2600
RGB
191, 38, 0
Name
R400 - Red dirt
Hex
#DE350B
RGB
222, 53, 11
Name
R300 - Poppy surprise
Hex
#FF5630
RGB
255, 86, 48
Name
R200 - Salmon sashimi
Hex
#FF7452
RGB
255, 116, 82
Name
R100 - Alexandria
Hex
#FF8F73
RGB
255, 143, 115
Name
R75 - Bondi sunburn
Hex
#FFBDAD
RGB
255, 189, 173
Name
R50 - Rosie
Hex
#FFEBE6
RGB
255, 235, 230
Yellow
Yellow indicates a warning or that progress is impeded. Yellow feels right at home in components like lozenges, banners, flag messages, and buttons.
Name
Y500 - Debrito
Hex
#FF8B00
RGB
255, 139, 0
Name
Y400 - Cheezy blasters
Hex
#FF991F
RGB
255, 153, 31
Name
Y300 - Golden state
Hex
#FFAB00
RGB
255, 171, 0
Name
Y200 - Pub mix
Hex
#FFC400
RGB
255, 196, 0
Name
Y100 - Cowbell
Hex
#FFE380
RGB
255, 227, 128
Name
Y75 - Dandelion whisper
Hex
#FFF0B3
RGB
255, 240, 179
Name
Y50 - James blonde
Hex
#FFFAE6
RGB
255, 250, 230
Green
We use green to indicate success or to celebrate a win. Green goes well with lozenges, badges, toggles, messages, and illustrations. Keep in mind that our green is very vibrant, which can cause eye strain in large doses. However, because of this vibrancy, it can also stand out well among many other elements on a page, which is why it is a good choice for calls-to-action and buttons in marketing.
Name
G500 - Keen green
Hex
#006644
RGB
0, 102, 68
Name
G400 - Slime
Hex
#00875A
RGB
0, 135, 90
Name
G300 - Fine pine
Hex
#36B37E
RGB
54, 179, 126
Name
G200 - Green tea
Hex
#57D9A3
RGB
87, 217, 163
Name
G100 - Cloverleaf
Hex
#79F2C0
RGB
121, 242, 192
Name
G75 - Mintie
Hex
#ABF5D1
RGB
171, 245, 209
Name
G50 - The smell
Hex
#E3FCEF
RGB
227, 252, 239
Blue
Blue is used to help us reinforce our presence and unify our touchpoints from marketing to product. It's sharp and clear, making it bold and optimistic, while at the same time it's soft and inviting, paying homage to the practical, human origins of Atlassian. It is at the heart of every communication and should be used intentionally but sparingly. As with all colors in the palette, you should be mindful of the color values provided in these guidelines. When used appropriately and accurately, the colors have an incredible impact.
Blue is used to indicate authentication, connectivity, or progress. You'll find blue in messages, buttons, navigation, lozenges, badges, tabs, and the progress tracker.
Name
B500 - Chore coat
Hex
#0747A6
RGB
7, 71, 166
Name
B400 - Pacific bridge
Hex
#0052CC
RGB
0, 82, 204
Name
B300 - Sodium explosion
Hex
#0065FF
RGB
0, 101, 255
Name
B200 - Coogee
Hex
#2684FF
RGB
38, 132, 255
Name
B100 - Arvo breeze
Hex
#4C9AFF
RGB
76, 154, 255
Name
B75 - Schwag
Hex
#B3D4FF
RGB
179, 212, 255
Name
B50 - Pixie dust
Hex
#DEEBFF
RGB
222, 235, 255
Teal
Teal can typically be found in illustrations or as an accent color for components such a tags.
Name
T500 - Shabby chic
Hex
#008DA6
RGB
0, 141, 166
Name
T400 - Prom dress
Hex
#00A3BF
RGB
0, 163, 191
Name
T300 - Tamarama
Hex
#00B8D9
RGB
0, 184, 217
Name
T200 - Mermaid net
Hex
#00C7E6
RGB
0, 199, 230
Name
T100 - Hairy fairy
Hex
#79E2F2
RGB
121, 226, 242
Name
T75 - Arctic chill
Hex
#B3F5FF
RGB
179, 245, 255
Name
T50 - Gram's sofa
Hex
#E6FCFF
RGB
230, 252, 255
Purple
Purple indicates help and support and is used in spotlight, buttons, messages, lozenges, and image callouts. It is also used to display visited links in web typography and as an accent color in illustration. However, it is best used in small doses in illustration as it can sometimes clash with blue.
Name
P500 - Prince
Hex
#403294
RGB
64, 50, 148
Name
P400 - Snozzberry
Hex
#5243AA
RGB
82, 67, 170
Name
P300 - Da' juice
Hex
#6554C0
RGB
101, 84, 192
Name
P200 - Pastelli
Hex
#8777D9
RGB
135, 119, 217
Name
P100 - Herky jerky
Hex
#998DD9
RGB
153, 141, 217
Name
P75 - Phantom mist
Hex
#C0B6F2
RGB
192, 182, 242
Name
P50 - Lavender secret
Hex
#EAE6FF
RGB
234, 230, 255
Semantic color
The following guidelines outline when to use colors in product. Semantic color helps users find people, identify status, see actions, locate help, and understand next steps. The consistent use of color keeps cognitive load low and makes for a unified and engaging user experience. In addition to the color usage guidelines for web, there are also iOS and Android application color guidelines that augment the color guidelines for those platforms.

Was this page helpful?
We use this feedback to improve our documentation.