GitHub Primer Color Reference

The GitHub Primer color reference browses the Primer design system's palette — functional color families as labeled ramps, from the signature blues to the semantic states.

What is GitHub Primer Color Reference?

Primer is GitHub's design system, and its palette is a case study in functional color: every hue earns its place by doing a job — the signature blues carry brand and action, the greens carry success, the reds carry danger, the greys carry the enormous weight of a text-first interface. The GitHub Primer color reference lays those families out as browsable ramps, each swatch labeled and copy-ready, so the github color palette hex values are one click away and the system's logic is visible in the arrangement.

What Primer teaches is the economy of a developer-tooling palette. Because GitHub's surface is mostly text and code, the ramps are calibrated for legibility first: the greys form the real backbone — surfaces, borders, muted text — while the chromatic families stay in their lanes, appearing where meaning demands them. Browsing the system shows the ratio: how few saturated colors a product needs when the neutrals are designed well. That is the lesson worth stealing, and the reason the primer color tokens tool is as useful to teams building their own systems as to those working in GitHub's orbit.

Each swatch copies its hex for prototypes, calibration or token seeds; the ramps' step spacing shows Primer's accessibility calibration — dark steps tuned for text on light, light for text on dark. The sibling references present Adobe Spectrum and Atlassian's systems in the same form, and the three together are a survey of how the major platforms answered the same brief: functional color at scale, trustworthy in the dark corners of a UI nobody styled deliberately.

Functional colour is a discipline about proportion, and Primer demonstrates it better than almost any public system because its surface is text and code rather than imagery. In that context the neutrals carry the interface — backgrounds, borders, muted text, hover states — while the chromatic families are rationed to meanings: a blue for actions, a green for success, reds and oranges for the states that must interrupt. The consequence is a palette whose saturated entries can be counted on one hand while its greys come in more steps than most teams would think to write. The lesson transfers directly to product work, where a palette that feels loud usually has too much accent relative to its working surfaces rather than too much saturation in the accent itself. Comparing here also shows how a system handles states, since disabled and hover values are the entries a home-grown palette most often leaves to chance.

Reading the ramps as a whole, rather than sampling a favourite blue, is what makes the exercise worthwhile. The dark-mode families deserve the same attention, because a set tuned for light rarely inverts cleanly without its own calibration.

• As a Primer design system colors browser it is deliberately a reference — browsable, labeled, honest about being a study aid.
• For teams calibrating their own functional palettes, it is the dev-tooling benchmark; for GitHub-adjacent work, it is the palette of record in swatch form.

How to use GitHub Primer Color Reference

1. Browse the functional families — brand blues, semantic states, the grey backbone.
2. Study the ramps' spacing and how little saturation the system spends.
3. Copy swatch hexes for prototypes or calibration against your own palette.

When to use GitHub Primer Color Reference vs related tools

Use this to study or borrow from GitHub's system palette. Use the Spectrum and Atlassian references for sibling systems, the dark-mode palette generator when Primer's dark-surface logic is the lesson needed, and the token exporters to formalise borrowed values. Calibrating your own palette against this one is what the palette comparison is for, and borrowed values have to meet your own text roles in the contrast checker.

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 GitHub Primer Color Reference