← Palettes · [email protected]

GitHub Primer

The GitHub Primer color system extracted from @primer/primitives. Provides the canonical "GitHub Light" and "GitHub Dark" themes used across github.com, including the full neutral scale (0–13) and eight functional color families (blue, green, yellow, orange, red, purple, pink, coral) at ten stops each. Light mode uses low-numbered neutrals for backgrounds and high-numbered for text; dark mode inverts. Functional scales are tuned per-mode so each role has the correct contrast — the blue used for the primary "link" role is a deeper blue-5 in light and a brighter blue-3 in dark.

188 swatches 16 light roles 16 dark roles design-systemgithubprimerrole-based

Swatches

light-neutral

light-neutral-0

#FFFFFF

light-neutral-1

#F6F8FA

light-neutral-2

#EFF2F5

light-neutral-3

#E6EAEF

light-neutral-4

#E0E6EB

light-neutral-5

#DAE0E7

light-neutral-6

#D1D9E0

light-neutral-7

#C8D1DA

light-neutral-8

#818B98

light-neutral-9

#59636E

light-neutral-10

#454C54

light-neutral-11

#393F46

light-neutral-12

#25292E

light-neutral-13

#1F2328

light-blue

light-blue-0

#DDF4FF

light-blue-1

#B6E3FF

light-blue-2

#80CCFF

light-blue-3

#54AEFF

light-blue-4

#218BFF

light-blue-5

#0969DA

light-blue-6

#0550AE

light-blue-7

#033D8B

light-blue-8

#0A3069

light-blue-9

#002155

light-green

light-green-0

#DAFBE1

light-green-1

#ACEEBB

light-green-2

#6FDD8B

light-green-3

#4AC26B

light-green-4

#2DA44E

light-green-5

#1A7F37

light-green-6

#116329

light-green-7

#044F1E

light-green-8

#003D16

light-green-9

#002D11

light-yellow

light-yellow-0

#FFF8C5

light-yellow-1

#FAE17D

light-yellow-2

#EAC54F

light-yellow-3

#D4A72C

light-yellow-4

#BF8700

light-yellow-5

#9A6700

light-yellow-6

#7D4E00

light-yellow-7

#633C01

light-yellow-8

#4D2D00

light-yellow-9

#3B2300

light-orange

light-orange-0

#FFF1E5

light-orange-1

#FFD8B5

light-orange-2

#FFB77C

light-orange-3

#FB8F44

light-orange-4

#E16F24

light-orange-5

#BC4C00

light-orange-6

#953800

light-orange-7

#762C00

light-orange-8

#5C2200

light-orange-9

#471700

light-red

light-red-0

#FFEBE9

light-red-1

#FFCECB

light-red-2

#FFABA8

light-red-3

#FF8182

light-red-4

#FA4549

light-red-5

#CF222E

light-red-6

#A40E26

light-red-7

#82071E

light-red-8

#660018

light-red-9

#4C0014

light-purple

light-purple-0

#FBEFFF

light-purple-1

#ECD8FF

light-purple-2

#D8B9FF

light-purple-3

#C297FF

light-purple-4

#A475F9

light-purple-5

#8250DF

light-purple-6

#6639BA

light-purple-7

#512A97

light-purple-8

#3E1F79

light-purple-9

#2E1461

light-pink

light-pink-0

#FFEFF7

light-pink-1

#FFD3EB

light-pink-2

#FFADDA

light-pink-3

#FF80C8

light-pink-4

#E85AAD

light-pink-5

#BF3989

light-pink-6

#99286E

light-pink-7

#772057

light-pink-8

#611347

light-pink-9

#4D0336

light-coral

light-coral-0

#FFF0EB

light-coral-1

#FFD6CC

light-coral-2

#FFB4A1

light-coral-3

#FD8C73

light-coral-4

#EC6547

light-coral-5

#C4432B

light-coral-6

#9E2F1C

light-coral-7

#801F0F

light-coral-8

#691105

light-coral-9

#510901

dark-neutral

dark-neutral-0

#010409

dark-neutral-1

#0D1117

dark-neutral-2

#151B23

dark-neutral-3

#212830

dark-neutral-4

#262C36

dark-neutral-5

#2A313C

dark-neutral-6

#2F3742

dark-neutral-7

#3D444D

dark-neutral-8

#656C76

dark-neutral-9

#9198A1

dark-neutral-10

#B7BDC8

dark-neutral-11

#D1D7E0

dark-neutral-12

#F0F6FC

dark-neutral-13

#FFFFFF

dark-blue

dark-blue-0

#CAE8FF

dark-blue-1

#A5D6FF

dark-blue-2

#79C0FF

dark-blue-3

#58A6FF

dark-blue-4

#388BFD

dark-blue-5

#1F6FEB

dark-blue-6

#1158C7

dark-blue-7

#0D419D

dark-blue-8

#0C2D6B

dark-blue-9

#051D4D

dark-green

dark-green-0

#AFF5B4

dark-green-1

#7EE787

dark-green-2

#56D364

dark-green-3

#3FB950

dark-green-4

#2EA043

dark-green-5

#238636

dark-green-6

#196C2E

dark-green-7

#0F5323

dark-green-8

#033A16

dark-green-9

#04260F

dark-yellow

dark-yellow-0

#F8E3A1

dark-yellow-1

#F2CC60

dark-yellow-2

#E3B341

dark-yellow-3

#D29922

dark-yellow-4

#BB8009

dark-yellow-5

#9E6A03

dark-yellow-6

#845306

dark-yellow-7

#693E00

dark-yellow-8

#4B2900

dark-yellow-9

#341A00

dark-orange

dark-orange-0

#FFDFB6

dark-orange-1

#FFC680

dark-orange-2

#FFA657

dark-orange-3

#F0883E

dark-orange-4

#DB6D28

dark-orange-5

#BD561D

dark-orange-6

#9B4215

dark-orange-7

#762D0A

dark-orange-8

#5A1E02

dark-orange-9

#3D1300

dark-red

dark-red-0

#FFDCD7

dark-red-1

#FFC1BA

dark-red-2

#FFA198

dark-red-3

#FF7B72

dark-red-4

#F85149

dark-red-5

#DA3633

dark-red-6

#B62324

dark-red-7

#8E1519

dark-red-8

#67060C

dark-red-9

#490202

dark-purple

dark-purple-0

#EDDEFF

dark-purple-1

#E2C5FF

dark-purple-2

#D2A8FF

dark-purple-3

#BE8FFF

dark-purple-4

#AB7DF8

dark-purple-5

#8957E5

dark-purple-6

#6E40C9

dark-purple-7

#553098

dark-purple-8

#3C1E70

dark-purple-9

#271052

dark-pink

dark-pink-0

#FFDAEC

dark-pink-1

#FFBEDD

dark-pink-2

#FF9BCE

dark-pink-3

#F778BA

dark-pink-4

#DB61A2

dark-pink-5

#BF4B8A

dark-pink-6

#9E3670

dark-pink-7

#7D2457

dark-pink-8

#5E103E

dark-pink-9

#42062A

dark-coral

dark-coral-0

#FFDDD2

dark-coral-1

#FFC2B2

dark-coral-2

#FFA28B

dark-coral-3

#F78166

dark-coral-4

#EA6045

dark-coral-5

#CF462D

dark-coral-6

#AC3220

dark-coral-7

#872012

dark-coral-8

#640D04

dark-coral-9

#460701

Mode role mappings

Light mode (16 roles)

accent → light-purple-5

accent-hover → light-purple-6

background → light-neutral-0

border → light-neutral-6

error → light-red-5

primary → light-blue-5

primary-hover → light-blue-6

severe → light-orange-5

success → light-green-5

surface → light-neutral-1

surface-elevated → light-neutral-0

text-primary → light-neutral-13

text-secondary → light-neutral-9

text-tertiary → light-neutral-8

warning → light-yellow-5

warning-hover → light-yellow-6

Dark mode (16 roles)

accent → dark-purple-3

accent-hover → dark-purple-2

background → dark-neutral-1

border → dark-neutral-7

error → dark-red-3

primary → dark-blue-3

primary-hover → dark-blue-2

severe → dark-orange-3

success → dark-green-3

surface → dark-neutral-2

surface-elevated → dark-neutral-3

text-primary → dark-neutral-12

text-secondary → dark-neutral-9

text-tertiary → dark-neutral-8

warning → dark-yellow-3

warning-hover → dark-yellow-2

Provenance

Source: https://github.com/primer/primitives/blob/main/src/tokens/base/color/light/light.json5
License: MIT
Attribution: GitHub Primer Primitives, Copyright (c) GitHub Inc., licensed under MIT. Hex values pulled from src/tokens/base/color/light/light.json5 and src/tokens/base/color/dark/dark.json5.
Imported: 2026-05-17 (upstream version @primer/[email protected])
Notes: The neutral scale is duplicated per-mode (each mode has its own neutral family) so swatches are prefixed with the mode (`light-neutral-N`, `dark-neutral-N`) and functional families likewise (`light-blue-N`, `dark-blue-N`). The role mappings select the appropriate per-mode swatch.