Colors

Where appropriate, we enable people to introduce their own color palettes. Our products adapt intelligently and flexibly to cater for the user's preference. We are also committed to complying with AA standard contrast ratios . To accomplish this, you should choose primary, secondary and extended colors that ensure sufficient color contrast between elements. This allows users with low vision to see and use the interface.

Primary color palette

Our primary palette is comprised of neutrals, white, and blue. These colors are present across most visual elements all the way from marketing to product. If you'd like to use these colors you can download our palette here.

We use N800 primarily for body text and headings. B400, otherwise known as "Pacific Bridge" is used for primary actions and buttons, links, global navigation, indicates progress, and represents authentication. N0 is used for page backgrounds and things that are white.

ID
N800
Color
#172B4D
ID
B400
Color
#0052CC
ID
N0
Color
#FFFFFF

Secondary color palette

Our secondary palette is made up of red, yellow, green, and purple. These colors are not used equally - see the Color System below for more information.

We use R300 primarily to indicate errors and to indicate destructive actions. Y300 indicates warnings and blocked progress and can be found in lozenges and banners. Use N800 for any text placed on top of Y300. G300 is used to represent success in flags and inline messages, while P300 is used to indicate help, information, and Prince songs.

ID
R300
Color
#FF5630
ID
Y300
Color
#FFAB00
ID
G300
Color
#36B37E
ID
T300
Color
#00B8D9
ID
P300
Color
#6554C0

Neutrals

Muted and neutral palettes are derived from purple. Their varying degrees of saturation allow for the appropriate level of warmth across marketing and product.

ID
N900
Name
Slate
Color
#091E42
ID
N800
Name
Squid Ink
Color
#172B4D
ID
N700
Name
Snorlax
Color
#253858
ID
N600
Name
Pet rock
Color
#344563
ID
N500
Name
Mick Fanning
Color
#42526E
ID
N400
Name
Concrete jungle
Color
#505F79
ID
N300
Name
Clooney
Color
#5E6C84
ID
N200
Name
Bling Bling
Color
#6B778C
ID
N100
Name
Humboldt Fog
Color
#7A869A
ID
N90
Name
Meredith
Color
#8993A4
ID
N80
Name
Spooky ghost
Color
#97A0AF
ID
N70
Name
Blanche
Color
#A5ADBA
ID
N60
Name
Sentinel
Color
#B3BAC5
ID
N50
Name
Karl
Color
#C1C7D0
ID
N40
Name
Jolly Fun Time
Color
#DFE1E5
ID
N30
Name
Northeast Snow
Color
#EBECF0
ID
N20
Name
Gram's Hair
Color
#F4F5F7
ID
N10
Name
Wash me
Color
#FAFBFC
ID
N0
Name
White
Color
#FFF
Color Web
N900
  • Tooltip background
N800
  • Text
N700
  • Selected state background
  • Text for lozenges
N500
  • Navigation icons
  • Lozenges background
  • Standard button
  • Table titles
N300
  • Group
  • Table headings
N200
  • Navigation subtitles
  • Toggles hover
N100
  • Comment actions
  • Subtle links
N90
  • Toggles (resting)
N50
  • Navigation product name
  • Lozenge outline (subtle)
N40
  • Hover state
  • Lozenge background (bold)
N30
  • Resting state background
  • Disabled background
  • Badges (background)
N20
  • Navigation container
  • Standard button background
N10
  • Field resting background

Neutral alphas

We use N900 as a basis for the RGB values to avoid shadows from desaturating other colors that appear beneath transparent neutral colors and is a number between 0.0 (fully transparent) and 1.0 (fully opaque). The alpha palette can be used for shadows to represent layering, 'blankets' that cover the UI when a model is active, and elements that darken the background they are placed on such as buttons and badges. Try to avoid using the alpha palette for text colors and make sure that you account for varying text and background combinations when using the alpha palette as a background for text.

A good example of this would be tags sitting in a text field. Both tags and text fields have a grey background as their default state, and to contrast the pair we added an alpha color to the tags to bring the depth that was needed for them to coincide with each other.

ID
N900 (1.0)
Name
Slate
Color
rgba(9, 30, 66, 1)
ID
N800A (0.95)
Name
Squid Ink
Color
rgba(9, 30, 66, 0.95)
ID
N700A (0.89)
Name
Snorlax
Color
rgba(9, 30, 66, 0.89)
ID
N600A (0.82)
Name
Pet rock
Color
rgba(9, 30, 66, 0.82)
ID
N500A (0.77)
Name
Mick Fanning
Color
rgba(9, 30, 66, 0.77)
ID
N400A (0.71)
Name
Concrete jungle
Color
rgba(9, 30, 66, 0.71)
ID
N300A (0.66)
Name
Clooney
Color
rgba(9, 30, 66, 0.66)
ID
N200A (0.64)
Name
Bling Bling
Color
rgba(9, 30, 66, 0.60)
ID
N100A (0.60)
Name
Humboldt Fog
Color
rgba(9, 30, 66, 0.64)
ID
N90A (0.48)
Name
Meredith
Color
rgba(9, 30, 66, 0.48)
ID
N80A (0.42)
Name
Spooky ghost
Color
rgba(9, 30, 66, 0.42)
ID
N70A (0.36)
Name
Blanche
Color
rgba(9, 30, 66, 0.36)
ID
N60A (0.31)
Name
Sentinel
Color
rgba(9, 30, 66, 0.31)
ID
N50A (0.25)
Name
Karl
Color
rgba(9, 30, 66, 0.25)
ID
N40A (0.13)
Name
Jolly Fun Time
Color
rgba(9, 30, 66, 0.13)
ID
N30A (0.08)
Name
Northeast Snow
Color
rgba(9, 30, 66, 0.08)
ID
N20A (0.04)
Name
Gram's Hair
Color
rgba(9, 30, 66, 0.04)
ID
N10A (0.02)
Name
Wash me
Color
rgba(9, 30, 66, 0.02)
ID
N0A (0.0)
Name
White
Color
rgba(9, 30, 66, 0.0)

Extended Palette

The extended palette consists of all the useable tints and shades of each color in the palette. They are all helpfully named and numbered for easy reference. Usage of these colors varies depending on the element, but they come in handy for illustrations and components in product.

Red

Red is mainly used for backgrounds in messages and in error states.

ID
R500
Name
Dragon’s Blood
Color
#BF2600
ID
R400
Name
Red Dirt
Color
#DE350B
ID
R300
Name
Poppy Surprise
Color
#FF5630
ID
R200
Name
Salmon Sashimi
Color
#FF7452
ID
R100
Name
Alexandria
Color
#FF8F73
ID
R75
Name
Alameda Antique
Color
#FFBDAD
ID
R50
Name
Rosie
Color
#FFEBE5

Rosie #FFEBE5 - Remembering Rosie. To honor Rosie we have named a color in our product palette after her. Like Rosie and her legacy, Rosie will be woven throughout Atlassian products and design for many years to come. Like its namesake it will leave that corner of the world which it has touched just a little bit brighter by its beauty and grace.

Alexandria #FF8F73 - Alexandria has made a huge impact at Atlassian, so we've named a color of her choice after her. As Alex does, this color brings a moment of lightness, promise, strength, and happiness wherever it is found.

Color Web
R500
  • Active / selected
  • Lozenge background (bold)
R400
  • Destruct button
R300
  • Messages for different states
  • Resting / hover
R200
  • Active
R100
  • Focus color
R75
  • Lozenge background (subtle)
R50
  • Badges (background)

Yellow

Yellow indicates warning or impeded progress.

ID
Y500
Name
Debrito
Color
#FF8B00
ID
Y400
Name
Cheezy Blasters
Color
#FF991F
ID
Y300
Name
Golden State
Color
#FFAB00
ID
Y200
Name
Pub Mix
Color
#FFC400
ID
Y100
Name
Cowbell
Color
#FFE380
ID
Y75
Name
Dandelion Whisper
Color
#FFF0B2
ID
Y50
Name
James Blonde
Color
#FFFAE5
Color Web
Y500
  • Active / selected
Y400
Y300
  • Messages for different states
  • Resting / hover
  • Focus color
  • Lozenge background (bold)
Y200
  • Active
Y100
  • Lozenge background (subtle)
Y75
Y50

Green

Normally used to Indicate success, or to celebrate a win. You can see green use lozenges, badges, toggles, and messages.

ID
G500
Name
Keen Green
Color
#006644
ID
G400
Name
Slime
Color
#00875A
ID
G300
Name
Our Kellie
Color
#36B37E
ID
G200
Name
Green Tea
Color
#57D9A3
ID
G100
Name
Cloverleaf
Color
#79F2C0
ID
G75
Name
Mintie
Color
#ACF5D2
ID
G50
Name
The smell
Color
#E3FCEF
Color Web
G500
  • Active / selected
  • Lozenge background (bold)
G400
  • Resting
G300
  • Messages for different states
  • Hover
G200
  • Active
G100
G75
  • Lozenge background (subtle)
G50
  • Badges (background)

Teal

Mobile - Accent colors for text fields and cursors, text selection, progress bars, selection controls, buttons, sliders, and links.

Normally used in illustrations and as an accent color.

ID
T500
Name
Shabby Chic
Color
#008DA6
ID
T400
Name
Prom Dress
Color
#00A3BF
ID
T300
Name
Tamarama
Color
#00B8D9
ID
T200
Name
Mermaid Net
Color
#00C7E5
ID
T100
Name
Hairy Fairy
Color
#79E2F2
ID
T75
Name
Arctic Chill
Color
#B3F5FF
ID
T50
Name
Grandma's Sofa
Color
#E6FCFF
Color Web
T500
T400
T300
T200
  • Active
T100
T75
  • Lozenge background (subtle)
T50
  • Badges (background)

Blue

Blue is used to indicate authentication, connectivity, and progress. You can find blue in the following components and patterns: messages, buttons, navigation, lozenges, badges, tabs, and the date picker.

ID
B500
Name
Chore Coat
Color
#0747A6
ID
B400
Name
Pacific Bridge
Color
#0052CC
ID
B300
Name
Sodium Explosion
Color
#0065FF
ID
B200
Name
Coogee
Color
#2684FF
ID
B100
Name
Arvo Breeze
Color
#4C9AFF
ID
B75
Name
Schwag
Color
#B3D4FF
ID
B50
Name
Pixie Dust
Color
#DEEBFF
Color Web
B500
  • Active / selected
  • Lozenge background (bold)
B400
  • Badges (background)
  • Resting
  • Main color of Atlassian (Pacific Bridge)
B300
  • Hover
B200
B100
  • Focus
B75
  • Lozenge background (subtle)
B50

Purple

Indicates help and support. And is used in messages, lozenges and image callouts.

ID
P500
Name
Prince
Color
#403294
ID
P400
Name
Snozzberry
Color
#5243AA
ID
P300
Name
Teletubby
Color
#6554C0
ID
P200
Name
Pastelli
Color
#8777D9
ID
P100
Name
Herky Jerk
Color
#998DD9
ID
P75
Name
Phantom mist
Color
#C0B6F2
ID
P50
Name
Lavender Secret
Color
#EAE6FF
Color Web
P500
  • Active / selected
P400
P300
  • Resting
  • Hover
  • Focus
  • Callouts
P200
  • Active
P100
P75
  • Lozenge background (subtle)
P50

Color System

The following guidelines outline when to use colors in product. We've developed a color system that helps users find people, identify status, see actions, to locate help, and to indicate next steps. The consistent use of color keeps cognitive loads low and makes for a unified and engaging user experience.

Team / people Inactive Activity Success Progress blocked Failure / removed Help
Navigation
Mentions
Connectivity
Progress to be done
Priority
Review
Inline comments
Builds and deployments
Diff (code differences)
Diff (file differences)
State
Information