GitHub Color Psychology & Meaning
GitHub dark is where code lives. The near-black background mimics the terminal experience that developers love. The electric blue is a cursor in the dark.
#0D1117
#58A6FF
#21262D
#C9D1D9
Background
Primary Accent
Secondary
Body Text
GitHub
nightcoolminimal autumnwinter appbranding
AAA
WCAG Grade
12.3:1
Contrast Ratio
4,600
Saves
12,400
AI Copies
Use #0D1117 as the background. Use #58A6FF as the primary accent. Use #21262D as secondary. Use #C9D1D9 as body text/supporting color. Palette mood: GitHub — night, cool, minimal.
Hex Codes, RGB & CMYK Color Values
Technical breakdown for the GitHub color scheme. Use these values for web design (HEX/RGB), print projects (CMYK), or specialized design software (HSL).
| Swatch | Design Role | HEX | RGB | CMYK | HSL |
|---|---|---|---|---|---|
| Background Luminance: 0.5% | 13, 17, 23 | 43%, 26%, 0%, 91% | 216°, 28%, 7% | ||
| Primary Accent Luminance: 36.6% | 88, 166, 255 | 65%, 35%, 0%, 0% | 212°, 100%, 67% | ||
| Secondary Luminance: 1.9% | 33, 38, 45 | 27%, 16%, 0%, 82% | 215°, 15%, 15% | ||
| Body Text Luminance: 63.0% | 201, 209, 217 | 7%, 4%, 0%, 15% | 210°, 17%, 82% |
Color Harmony: Analogous Scheme
The GitHub palette is built using a analogous relationship between its hues. This ensures that even with high-contrast accents, the overall scheme feels balanced and intentional.
Hue Wheel
A analogous palette is often preferred by professional designers because it creates a calm, serene atmosphere by using neighboring colors.
History & Design Context
GitHub launched 2008. The dark mode palette, launched 2020, was the most-requested feature in GitHub history. The developer community's preference for dark interfaces shaped this.
Best Design Use Cases
Deep dark background always for code contexts. Electric blue for links, branch indicators, and interactive elements. Keep gray for secondary metadata.
Industries This Palette Suits
Developer tools, version control, open source, technical platforms.
How to Implement the GitHub Color Scheme
To use this GitHub color palette in your web project, you can copy the following CSS variables or Tailwind CSS configuration. These roles ensure your UI maintains accessibility and visual hierarchy.
Option 1: CSS Variables
:root {
/* {name} Palette - ihatecolors.com */{'
'} --color-bg: {colors[0]};{'
'} --color-primary: {colors[1]};{'
'} --color-secondary: {colors[2]};{'
'} --color-text: {colors[3]};{'
'} {'}'}Web Design Tip
Use #0D1117 for the main background and #58A6FF for primary buttons. This creates a high-contrast focal point.
Accessibility Note
The contrast ratio between #C9D1D9 and #0D1117 is 12.26:1 (AAA). Ensure your body text remains legible.