GitHub Color Palette

Select any value to copy it.

• GitHub Black

  Primary

  #181717rgb(24, 23, 23)hsl(0, 2%, 9%)

  Closest in ArchiveTrue Gray Ink
  Closest in Archive: True Gray Ink

• Success Green

  Accent

  #2DA44Ergb(45, 164, 78)hsl(137, 57%, 41%)

  Closest in ArchiveCeladon Dusk Pure
  Closest in Archive: Celadon Dusk Pure

• Danger Red

  Accent

  #CF222Ergb(207, 34, 46)hsl(356, 72%, 47%)

  Closest in ArchiveMerlot Velvet Pure
  Closest in Archive: Merlot Velvet Pure

• Attention Yellow

  Accent

  #9A6700rgb(154, 103, 0)hsl(40, 100%, 30%)

  Closest in ArchiveApricot Dusk Vivid
  Closest in Archive: Apricot Dusk Vivid

• Accent Blue

  Accent

  #0969DArgb(9, 105, 218)hsl(212, 92%, 45%)

  Closest in ArchiveSapphire Velvet Pure
  Closest in Archive: Sapphire Velvet Pure

Can it carry text? (WCAG contrast)

Each color as text on white and on black. AA means body text passes. Select a ratio to open the pair in the contrast checker.

• GitHub BlackAaon white17.89:1AAGitHub Black: Open in contrast checkerAaon black1.17:1Not for textGitHub Black: Open in contrast checker
• Success GreenAaon white3.22:1Large text onlySuccess Green: Open in contrast checkerAaon black6.53:1AASuccess Green: Open in contrast checker
• Danger RedAaon white5.36:1AADanger Red: Open in contrast checkerAaon black3.92:1Large text onlyDanger Red: Open in contrast checker
• Attention YellowAaon white4.87:1AAAttention Yellow: Open in contrast checkerAaon black4.31:1Large text onlyAttention Yellow: Open in contrast checker
• Accent BlueAaon white5.19:1AAAccent Blue: Open in contrast checkerAaon black4.04:1Large text onlyAccent Blue: Open in contrast checker

About this palette

GitHub's brand mark is intentionally monochrome, leaving the colorful semantic palette (success green, attention yellow, danger red, accent blue) to operate on top inside the product. This separation — neutral identity, vivid signal — is a useful pattern for any developer-facing tool.

Copy as code

Every token name carries the brand, so two brands can share one stylesheet.

:root {
  --github-black: #181717;
  --github-success-green: #2da44e;
  --github-danger-red: #cf222e;
  --github-attention-yellow: #9a6700;
  --github-accent-blue: #0969da;
}

@theme {
  --color-github-black: #181717;
  --color-github-success-green: #2da44e;
  --color-github-danger-red: #cf222e;
  --color-github-attention-yellow: #9a6700;
  --color-github-accent-blue: #0969da;
}

module.exports = {
  theme: {
    extend: {
      colors: {
        "github-black": "#181717",
        "github-success-green": "#2da44e",
        "github-danger-red": "#cf222e",
        "github-attention-yellow": "#9a6700",
        "github-accent-blue": "#0969da",
      },
    },
  },
};

Source: https://primer.style/foundations/color/overview · As of 2026-05-02 · This page is an unofficial reference. Color values are factual sRGB hex codes and not subject to copyright; the GitHub name and any associated marks belong to their owner. Request removal via support.

More from Developer Tools