Deprecated

We are no longer maintaining these guidelines and recommend using our new Color guideline instead, which supports design tokens.

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.

A
Fail
A
Fail
A
Pass
A
Pass
Name

B400 - Pacific bridge

Hex

#0052CC

RGB

0, 82, 204

A
Fail
A
Fail
A
Pass
A
Pass
Name

N800 - Squid ink

Hex

#172B4D

RGB

23, 43, 77

A
Pass
A
Pass
A
Fail
A
Fail
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.

A
Pass
A
Fail
A
Pass
A
Fail
Name

R300 - Poppy surprise

Hex

#FF5630

RGB

255, 86, 48

A
Pass
A
Pass
A
Fail
A
Fail
Name

Y300 - Golden state

Hex

#FFAB00

RGB

255, 171, 0

A
Pass
A
Pass
A
Fail
A
Fail
Name

G300 - Fine pine

Hex

#36B37E

RGB

54, 179, 126

A
Pass
A
Pass
A
Fail
A
Fail
Name

T300 - Tamarama

Hex

#00B8D9

RGB

0, 184, 217

A
Fail
A
Fail
A
Pass
A
Pass
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.

A
Fail
A
Fail
A
Pass
A
Pass
Name

N900 - Slate

Hex

#091E42

RGB

9, 30, 66

A
Fail
A
Fail
A
Pass
A
Pass
Name

N800 - Squid ink

Hex

#172B4D

RGB

23, 43, 77

A
Fail
A
Fail
A
Pass
A
Pass
Name

N700 - Snorlax

Hex

#253858

RGB

37, 56, 88

A
Fail
A
Fail
A
Pass
A
Pass
Name

N600 - Pet rock

Hex

#344563

RGB

52, 69, 99

A
Fail
A
Fail
A
Pass
A
Pass
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.

A
Fail
A
Fail
A
Pass
A
Pass
Name

N400 - Concrete jungle

Hex

#505F79

RGB

80, 95, 121

A
Fail
A
Fail
A
Pass
A
Pass
Name

N300 - Clooney

Hex

#5E6C84

RGB

94, 108, 132

A
Pass
A
Fail
A
Pass
A
Pass
Name

N200 - Bling bling

Hex

#6B778C

RGB

107, 119, 140

A
Pass
A
Fail
A
Pass
A
Fail
Name

N100 - Humboldt fog

Hex

#7A869A

RGB

122, 134, 154

A
Pass
A
Pass
A
Pass
A
Fail
Name

N90 - Meredith

Hex

#8993A4

RGB

137, 147, 164

A
Pass
A
Pass
A
Fail
A
Fail
Name

N80 - Spooky ghost

Hex

#97A0AF

RGB

151, 160, 175

A
Pass
A
Pass
A
Fail
A
Fail
Name

N70 - Blanche

Hex

#A5ADBA

RGB

165, 173, 186

A
Pass
A
Pass
A
Fail
A
Fail
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.

A
Pass
A
Pass
A
Fail
A
Fail
Name

N50 - Karl

Hex

#C1C7D0

RGB

193, 199, 208

A
Pass
A
Pass
A
Fail
A
Fail
Name

N40 - Jolly fun time

Hex

#DFE1E6

RGB

223, 225, 230

A
Pass
A
Pass
A
Fail
A
Fail
Name

N30 - Northeast snow

Hex

#EBECF0

RGB

235, 236, 240

A
Pass
A
Pass
A
Fail
A
Fail
Name

N20 - Gram's hair

Hex

#F4F5F7

RGB

244, 245, 247

A
Pass
A
Pass
A
Fail
A
Fail
Name

N10 - Wash me

Hex

#FAFBFC

RGB

250, 251, 252

A
Pass
A
Pass
A
Fail
A
Fail
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.

A
Fail
A
Fail
A
Pass
A
Pass
Name

R500 - Dragon's blood

Hex

#BF2600

RGB

191, 38, 0

A
Pass
A
Fail
A
Pass
A
Pass
Name

R400 - Red dirt

Hex

#DE350B

RGB

222, 53, 11

A
Pass
A
Fail
A
Pass
A
Fail
Name

R300 - Poppy surprise

Hex

#FF5630

RGB

255, 86, 48

A
Pass
A
Pass
A
Fail
A
Fail
Name

R200 - Salmon sashimi

Hex

#FF7452

RGB

255, 116, 82

A
Pass
A
Pass
A
Fail
A
Fail
Name

R100 - Alexandria

Hex

#FF8F73

RGB

255, 143, 115

A
Pass
A
Pass
A
Fail
A
Fail
Name

R75 - Bondi sunburn

Hex

#FFBDAD

RGB

255, 189, 173

A
Pass
A
Pass
A
Fail
A
Fail
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.

A
Pass
A
Pass
A
Fail
A
Fail
Name

Y500 - Debrito

Hex

#FF8B00

RGB

255, 139, 0

A
Pass
A
Pass
A
Fail
A
Fail
Name

Y400 - Cheezy blasters

Hex

#FF991F

RGB

255, 153, 31

A
Pass
A
Pass
A
Fail
A
Fail
Name

Y300 - Golden state

Hex

#FFAB00

RGB

255, 171, 0

A
Pass
A
Pass
A
Fail
A
Fail
Name

Y200 - Pub mix

Hex

#FFC400

RGB

255, 196, 0

A
Pass
A
Pass
A
Fail
A
Fail
Name

Y100 - Cowbell

Hex

#FFE380

RGB

255, 227, 128

A
Pass
A
Pass
A
Fail
A
Fail
Name

Y75 - Dandelion whisper

Hex

#FFF0B3

RGB

255, 240, 179

A
Pass
A
Pass
A
Fail
A
Fail
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.

A
Fail
A
Fail
A
Pass
A
Pass
Name

G500 - Keen green

Hex

#006644

RGB

0, 102, 68

A
Pass
A
Fail
A
Pass
A
Pass
Name

G400 - Slime

Hex

#00875A

RGB

0, 135, 90

A
Pass
A
Pass
A
Fail
A
Fail
Name

G300 - Fine pine

Hex

#36B37E

RGB

54, 179, 126

A
Pass
A
Pass
A
Fail
A
Fail
Name

G200 - Green tea

Hex

#57D9A3

RGB

87, 217, 163

A
Pass
A
Pass
A
Fail
A
Fail
Name

G100 - Cloverleaf

Hex

#79F2C0

RGB

121, 242, 192

A
Pass
A
Pass
A
Fail
A
Fail
Name

G75 - Mintie

Hex

#ABF5D1

RGB

171, 245, 209

A
Pass
A
Pass
A
Fail
A
Fail
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.

A
Fail
A
Fail
A
Pass
A
Pass
Name

B500 - Chore coat

Hex

#0747A6

RGB

7, 71, 166

A
Fail
A
Fail
A
Pass
A
Pass
Name

B400 - Pacific bridge

Hex

#0052CC

RGB

0, 82, 204

A
Fail
A
Fail
A
Pass
A
Pass
Name

B300 - Sodium explosion

Hex

#0065FF

RGB

0, 101, 255

A
Pass
A
Fail
A
Pass
A
Fail
Name

B200 - Coogee

Hex

#2684FF

RGB

38, 132, 255

A
Pass
A
Pass
A
Fail
A
Fail
Name

B100 - Arvo breeze

Hex

#4C9AFF

RGB

76, 154, 255

A
Pass
A
Pass
A
Fail
A
Fail
Name

B75 - Schwag

Hex

#B3D4FF

RGB

179, 212, 255

A
Pass
A
Pass
A
Fail
A
Fail
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.

A
Pass
A
Fail
A
Pass
A
Fail
Name

T500 - Shabby chic

Hex

#008DA6

RGB

0, 141, 166

A
Pass
A
Pass
A
Pass
A
Fail
Name

T400 - Prom dress

Hex

#00A3BF

RGB

0, 163, 191

A
Pass
A
Pass
A
Fail
A
Fail
Name

T300 - Tamarama

Hex

#00B8D9

RGB

0, 184, 217

A
Pass
A
Pass
A
Fail
A
Fail
Name

T200 - Mermaid net

Hex

#00C7E6

RGB

0, 199, 230

A
Pass
A
Pass
A
Fail
A
Fail
Name

T100 - Hairy fairy

Hex

#79E2F2

RGB

121, 226, 242

A
Pass
A
Pass
A
Fail
A
Fail
Name

T75 - Arctic chill

Hex

#B3F5FF

RGB

179, 245, 255

A
Pass
A
Pass
A
Fail
A
Fail
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.

A
Fail
A
Fail
A
Pass
A
Pass
Name

P500 - Prince

Hex

#403294

RGB

64, 50, 148

A
Fail
A
Fail
A
Pass
A
Pass
Name

P400 - Snozzberry

Hex

#5243AA

RGB

82, 67, 170

A
Fail
A
Fail
A
Pass
A
Pass
Name

P300 - Da' juice

Hex

#6554C0

RGB

101, 84, 192

A
Pass
A
Fail
A
Pass
A
Fail
Name

P200 - Pastelli

Hex

#8777D9

RGB

135, 119, 217

A
Pass
A
Pass
A
Fail
A
Fail
Name

P100 - Herky jerky

Hex

#998DD9

RGB

153, 141, 217

A
Pass
A
Pass
A
Fail
A
Fail
Name

P75 - Phantom mist

Hex

#C0B6F2

RGB

192, 182, 242

A
Pass
A
Pass
A
Fail
A
Fail
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.

image for color usage system

Was this page helpful?

We use this feedback to improve our documentation.