Atlassian Design Color Reference

The Atlassian design color reference browses the Atlassian Design System's palette — brand blues, semantic states and neutral ramps, labeled and copy-ready.

What is Atlassian Design Color Reference?

Atlassian's design system colors a very specific world — collaboration software where tables, boards and docs run for eight hours a day — and its palette reflects that audience: calm brand blues, carefully rationed semantic color, and a neutral structure built for information density without fatigue. The Atlassian design color reference lays those families out as browsable ramps, each swatch labeled and copy-ready, making the adg color palette hex values accessible without the design system's full documentation weight.

The system's lesson is semantic discipline at enterprise scale. The blue family carries interaction and brand; green, red, yellow and purple each hold a state lane — success, danger, warning, discovery — and the greens stay green across contexts rather than drifting with marketing campaigns. Browsing the ramps shows the calibration that eight-hour legibility demands: mid-tone saturation, generous neutral share, step spacing tuned for text roles at each depth. For teams building dashboards and productivity tools, that register is the relevant benchmark — closer to most products' reality than consumer-vivid systems.

Each swatch copies its hex for prototypes and calibration; the families compare cleanly against the sibling references — Adobe Spectrum's enterprise neutrality, GitHub Primer's text-first economy — and the three surveyed together show three coherent answers to the same enterprise brief. The dark-mode palette generator is the natural companion study: enterprise systems live or die by their dark-mode remapping, and the atlaskit color tokens tool's light ramps are the first half of that story.

Enterprise software is the hardest environment for colour, because the interface is dense, the sessions are long, and the audience includes people who will look at the tool for eight hours a day. Atlassian's palette reflects those conditions: restrained saturation, surfaces pitched carefully enough to sit behind tables and boards without vibrating, and a small set of accents that carry status across a very large product. The interesting part to study is how much of the palette exists to separate layers — a card on a board, a row in a table, a panel on a page — since that is the problem a dense interface actually has, and it is solved with steps close enough that the eye reads structure rather than decoration. Teams building admin and productivity surfaces can borrow the discipline directly, and teams working inside Atlassian's ecosystem get the swatch-level view the documentation assumes they already have.

Two habits are worth copying whatever the framework. Keep status colours out of the brand palette, so a green never has to double as a marketing accent. And reserve the strongest value in the set for the one element that must be found first on a given screen. Both are cheap to adopt early and expensive to retrofit, which is why studying a mature system before a project starts pays off disproportionately.

• As an Atlassian Design System colors browser it is deliberately a reference: labeled ramps, honest scope, one click per hex.
• For teams calibrating productivity-tool palettes or working in Atlassian's ecosystem, it is the swatch-level view the system docs assume you already have.

How to use Atlassian Design Color Reference

1. Browse the brand and semantic families, each as a labeled ramp.
2. Note the semantic lanes — each state color holds one meaning across steps.
3. Copy swatch hexes for prototypes, dashboards or palette calibration.

When to use Atlassian Design Color Reference vs related tools

Use this to study or borrow from Atlassian's system palette, especially for dashboard and productivity contexts. Use the Spectrum and Primer references for sibling systems, and the contrast checker when borrowed values meet your own text roles. The measured lightness and chroma behind a ramp are what the palette balance analyzer reports, and a borrowed set that has to travel into code is the design token generator's output.

Privacy & Security

This tool runs entirely in your browser — no data ever leaves your device. There is no server round-trip, no upload, no logging, and no account required. Your input is processed locally using client-side JavaScript and is never stored, transmitted, or accessible to anyone else. When you close the tab, everything disappears.

Frequently asked questions about Atlassian Design Color Reference