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 colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- GitHub DarkPrimary36, 41, 46
- GitHub BlueSecondary9, 105, 218
- GitHub GreenAccent46, 160, 67
Surfaces
Page, cards and dividers.- GitHub WhiteBackground255, 255, 255
- GitHub SurfaceSurface246, 248, 250
- GitHub BorderBorder208, 215, 222
Text
Three tiers of copy.- GitHub TextText31, 35, 40
- GitHub SecondarySecondary text101, 109, 118
- GitHub MutedMuted text140, 149, 159
Semantic
Feedback and state colors.- GitHub SuccessSuccess46, 160, 67
- GitHub WarningWarning191, 135, 0
- GitHub ErrorError207, 34, 46
- GitHub InfoInfo9, 105, 218
Use GitHub's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
github-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0969DA;
--error: #CF222E;
--accent: #2EA043;
--border: #D0D7DE;
--primary: #24292E;
--success: #2EA043;
--surface: #F6F8FA;
--warning: #BF8700;
--secondary: #0969DA;
--text-muted: #8C959F;
--background: #FFFFFF;
--text-primary: #1F2328;
--text-secondary: #656D76;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
15.8:1
Pass
Text on surface
Needs 4.5:1 for body text
14.8:1
Pass
Secondary text on background
Needs 4.5:1 for body text
5.2:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
4.9:1
Pass
Muted text on background
Needs 3:1 for large text
3.0:1
Pass
Muted text on surface
Needs 3:1 for large text
2.9:1
Fail
GitHub background, border and text colors
The quiet part of the GitHub palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- GitHub WhiteBackground
- HEX
- RGB
- HSL
- GitHub SurfaceSurface
- HEX
- RGB
- HSL
- GitHub BorderBorder
- HEX
- RGB
- HSL
- GitHub TextText
- HEX
- RGB
- HSL
- GitHub SecondarySecondary text
- HEX
- RGB
- HSL
- GitHub MutedMuted text
- HEX
- RGB
- HSL
About GitHub's colors
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
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.
Where GitHub uses each 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.
- Text
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.
GitHub color questions
Hex codes, RGB values, neutrals and how to use the palette.
The GitHub Octocat logo is black (#24292E), officially called 'GitHub Dark.' It's used on both light and dark backgrounds with high contrast. The mark can also be inverted to white on dark backgrounds.
GitHub's design system is called Primer. It includes a comprehensive color system with light and dark modes, the Primer CSS framework, and Primer React components. The color tokens are available as CSS custom properties.
GitHub's contribution graph uses four shades of green from light (#9BE9A8) to dark (#216E39). Darker squares indicate more contributions on that day. The green color was chosen to represent growth and activity.
GitHub's primary color is GitHub Dark, hex #24292E (RGB 36, 41, 46). It is the color used for the logo and the most prominent brand moments.
The secondary color is GitHub Blue, #0969DA, and the accent is GitHub Green, #2EA043. Together with the primary they make up the three brand colors at the top of this page.
GitHub uses #FFFFFF for backgrounds, #F6F8FA for surfaces and #D0D7DE for borders. Text runs #1F2328, #656D76 and #8C959F from strongest to most muted.
5 of 6 text and background pairings meet WCAG 2.1 AA contrast. The contrast section above shows every pairing with its exact ratio.
Use the export block on this page. It gives you CSS custom properties, a Tailwind config, W3C design tokens or a shadcn/ui theme built from these exact hex values, with copy and download buttons.
Yes. Export the Claude Code skill, Cursor rules or Codex prompt from the same block. The agent then applies GitHub's colors consistently when it generates UI.
Make something in the spirit of GitHub
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.