GitHub Color Palette
TechGitHub's developer-focused brand uses a minimal dark palette anchored by its octocatblack identity, with functional colors that prioritize code readability and repository navigation.
github.comGitHub logo is a trademark of GitHub. Used for informational purposes.
Brand Colors
GitHub Dark
primary
GitHub Blue
secondary
GitHub Green
accent
Surfaces & Borders
GitHub White
background
GitHub Surface
surface
GitHub Border
border
Typography
GitHub Text
textPrimary
GitHub Secondary
textSecondary
GitHub Muted
textMuted
Semantic Colors
GitHub Success
success
GitHub Warning
warning
GitHub Error
error
GitHub Info
info
Accessibility
textPrimary / background
textPrimary / surface
textSecondary / background
textSecondary / surface
textMuted / background
textMuted / surface
Color Theory
GitHub's color system is functional-first, designed to make code and repository data scannable. The palette serves utility (diffs, status checks, language colors) over brand expression, reflecting developer priorities.
- Dark charcoal (#24292E) and blue (#0969DA) form the primary brand pair
- Green (#2EA043) is central — representing additions, merge-ready PRs, and the contribution graph
- Cool gray surfaces maintain the IDE-like neutrality developers expect
Color Psychology
The utilitarian palette communicates developer credibility and engineering focus. Green's prominence ties activity and contribution to growth and success. The subdued colors let code syntax highlighting take visual priority.
Evolution
GitHub shifted from a lighter, warmer palette to Primer (its design system) around 2017. The 2020 dark mode launch doubled the color system. The core identity has remained anchored by the dark charcoal and green contribution graph.
How GitHub Uses Color
Primary
Dark charcoal (#24292E) defines the header bar and primary navigation, creating the signature GitHub frame.
Secondary
GitHub Blue (#0969DA) powers links, interactive elements, and the Copilot branding.
Accent
Green (#2EA043) is GitHub's most iconic functional color — merge buttons, contribution squares, and addition diffs.
Backgrounds
Light gray surfaces (#F6F8FA) define code blocks, sidebars, and secondary content areas.
Typography
Three gray levels (#1F2328 → #656D76 → #8C959F) create hierarchy in dense, data-rich interfaces.
Semantic
Green (pass/merge), red (fail/close), yellow (pending), and blue (info) are deeply ingrained in the developer workflow.
Agent integration
Use GitHub's Colors in Your Agent
Terminal
Copies full install command. Saves skill to .claude/skills/github/ — auto-detected on next run.
Included in the skill file
- 113 color roles — hex, HSL, and CSS variable names
- 2WCAG contrast rules for accessible pairings
- 3Auto-applies GitHub's palette when generating UI
Frequently Asked Questions
Create Something Inspired by GitHub
Generate a unique color palette inspired by GitHub's aesthetic using AI.