Skip to content

Colors

The following color variables are intended for use at the component-level and are used by the maintainers of Primer. For more information about how to apply color, read the interface guidelines for color.

Themes

Preview color variables in any of the available themes:

Functional variables

Foreground

Aa
fg.default
var(--color-fg-default)
#24292f
Aa
fg.muted
var(--color-fg-muted)
#57606a
Aa
fg.subtle
var(--color-fg-subtle)
#6e7781
Aa
fg.onEmphasis
var(--color-fg-on-emphasis)
#ffffff

Canvas

canvas.default
var(--color-canvas-default)
#ffffff
canvas.overlay
var(--color-canvas-overlay)
#ffffff
canvas.inset
var(--color-canvas-inset)
#f6f8fa
canvas.subtle
var(--color-canvas-subtle)
#f6f8fa

Border

border.default
var(--color-border-default)
#d0d7de
border.muted
var(--color-border-muted)
hsla(210,18%,87%,1)
border.subtle
var(--color-border-subtle)
rgba(27,31,36,0.15)

Shadow

shadow.small
var(--color-shadow-small)
0 1px 0 rgba(27,31,36,0.04)
shadow.medium
var(--color-shadow-medium)
0 3px 6px rgba(140,149,159,0.15)
shadow.large
var(--color-shadow-large)
0 8px 24px rgba(140,149,159,0.2)
shadow.extraLarge
var(--color-shadow-extra-large)
0 12px 28px rgba(140,149,159,0.3)

Neutral

Use to highlight content without any added meaning.

neutral.emphasisPlus
var(--color-neutral-emphasis-plus)
#24292f
neutral.emphasis
var(--color-neutral-emphasis)
#6e7781
neutral.muted
var(--color-neutral-muted)
rgba(175,184,193,0.2)
neutral.subtle
var(--color-neutral-subtle)
rgba(234,238,242,0.5)

Accent

Use to draw attention to interactive elements.

Aa
accent.fg
var(--color-accent-fg)
#0969da
accent.emphasis
var(--color-accent-emphasis)
#0969da
accent.muted
var(--color-accent-muted)
rgba(84,174,255,0.4)
accent.subtle
var(--color-accent-subtle)
#ddf4ff

Success

Use to expresses the completion or positive outcome of a task.

Aa
success.fg
var(--color-success-fg)
#1a7f37
success.emphasis
var(--color-success-emphasis)
#2da44e
success.muted
var(--color-success-muted)
rgba(74,194,107,0.4)
success.subtle
var(--color-success-subtle)
#dafbe1

Attention

Use to warn of pending tasks or highlight active content.

Aa
attention.fg
var(--color-attention-fg)
#9a6700
attention.emphasis
var(--color-attention-emphasis)
#bf8700
attention.muted
var(--color-attention-muted)
rgba(212,167,44,0.4)
attention.subtle
var(--color-attention-subtle)
#fff8c5

Severe

Use when there are more than 3 levels of states, for example in heatmaps.

Aa
severe.fg
var(--color-severe-fg)
#bc4c00
severe.emphasis
var(--color-severe-emphasis)
#bc4c00
severe.muted
var(--color-severe-muted)
rgba(251,143,68,0.4)
severe.subtle
var(--color-severe-subtle)
#fff1e5

Danger

Use to inform of error or another negative message.

Aa
danger.fg
var(--color-danger-fg)
#cf222e
danger.emphasis
var(--color-danger-emphasis)
#cf222e
danger.muted
var(--color-danger-muted)
rgba(255,129,130,0.4)
danger.subtle
var(--color-danger-subtle)
#FFEBE9

Open

Use when refering to open tasks or workflows.

Aa
open.fg
var(--color-open-fg)
#1a7f37
open.emphasis
var(--color-open-emphasis)
#2da44e
open.muted
var(--color-open-muted)
rgba(74,194,107,0.4)
open.subtle
var(--color-open-subtle)
#dafbe1

Closed

Use when refering to closed tasks or workflows.

Aa
closed.fg
var(--color-closed-fg)
#cf222e
closed.emphasis
var(--color-closed-emphasis)
#cf222e
closed.muted
var(--color-closed-muted)
rgba(255,129,130,0.4)
closed.subtle
var(--color-closed-subtle)
#FFEBE9

Done

Completion color for productivity and code review workflows.

Aa
done.fg
var(--color-done-fg)
#8250df
done.emphasis
var(--color-done-emphasis)
#8250df
done.muted
var(--color-done-muted)
rgba(194,151,255,0.4)
done.subtle
var(--color-done-subtle)
#fbefff

Sponsors

Use for Sponsors-related interfaces.

Aa
sponsors.fg
var(--color-sponsors-fg)
#bf3989
sponsors.emphasis
var(--color-sponsors-emphasis)
#bf3989
sponsors.muted
var(--color-sponsors-muted)
rgba(255,128,200,0.4)
sponsors.subtle
var(--color-sponsors-subtle)
#ffeff7

Scale variables

Avoid referencing scale variables directly when building UI that needs to adapt to different color themes. Instead, use the functional variables listed above. In rare cases, you may need to use scale variables to define custom functional variables in your application.
scale.black#1b1f24
scale.white#ffffff
scale.gray.0#f6f8fa
scale.gray.1#eaeef2
scale.gray.2#d0d7de
scale.gray.3#afb8c1
scale.gray.4#8c959f
scale.gray.5#6e7781
scale.gray.6#57606a
scale.gray.7#424a53
scale.gray.8#32383f
scale.gray.9#24292f
scale.blue.0#ddf4ff
scale.blue.1#b6e3ff
scale.blue.2#80ccff
scale.blue.3#54aeff
scale.blue.4#218bff
scale.blue.5#0969da
scale.blue.6#0550ae
scale.blue.7#033d8b
scale.blue.8#0a3069
scale.blue.9#002155
scale.green.0#dafbe1
scale.green.1#aceebb
scale.green.2#6fdd8b
scale.green.3#4ac26b
scale.green.4#2da44e
scale.green.5#1a7f37
scale.green.6#116329
scale.green.7#044f1e
scale.green.8#003d16
scale.green.9#002d11
scale.yellow.0#fff8c5
scale.yellow.1#fae17d
scale.yellow.2#eac54f
scale.yellow.3#d4a72c
scale.yellow.4#bf8700
scale.yellow.5#9a6700
scale.yellow.6#7d4e00
scale.yellow.7#633c01
scale.yellow.8#4d2d00
scale.yellow.9#3b2300
scale.orange.0#fff1e5
scale.orange.1#ffd8b5
scale.orange.2#ffb77c
scale.orange.3#fb8f44
scale.orange.4#e16f24
scale.orange.5#bc4c00
scale.orange.6#953800
scale.orange.7#762c00
scale.orange.8#5c2200
scale.orange.9#471700
scale.red.0#FFEBE9
scale.red.1#ffcecb
scale.red.2#ffaba8
scale.red.3#ff8182
scale.red.4#fa4549
scale.red.5#cf222e
scale.red.6#a40e26
scale.red.7#82071e
scale.red.8#660018
scale.red.9#4c0014
scale.purple.0#fbefff
scale.purple.1#ecd8ff
scale.purple.2#d8b9ff
scale.purple.3#c297ff
scale.purple.4#a475f9
scale.purple.5#8250df
scale.purple.6#6639ba
scale.purple.7#512a97
scale.purple.8#3e1f79
scale.purple.9#2e1461
scale.pink.0#ffeff7
scale.pink.1#ffd3eb
scale.pink.2#ffadda
scale.pink.3#ff80c8
scale.pink.4#e85aad
scale.pink.5#bf3989
scale.pink.6#99286e
scale.pink.7#772057
scale.pink.8#611347
scale.pink.9#4d0336
scale.coral.0#FFF0EB
scale.coral.1#FFD6CC
scale.coral.2#FFB4A1
scale.coral.3#FD8C73
scale.coral.4#EC6547
scale.coral.5#C4432B
scale.coral.6#9E2F1C
scale.coral.7#801F0F
scale.coral.8#691105
scale.coral.9#510901

Deprecated variables

No deprecated variables

Removed variables

Removed variableReplacement variable(s)
auto.black
auto.white
auto.gray.0
auto.gray.1
auto.gray.2
auto.gray.3
auto.gray.4
auto.gray.5
auto.gray.6
auto.gray.7
auto.gray.8
auto.gray.9
auto.blue.0
auto.blue.1
auto.blue.2
auto.blue.3
auto.blue.4
auto.blue.5
auto.blue.6
auto.blue.7
auto.blue.8
auto.blue.9
auto.green.0
auto.green.1
auto.green.2
auto.green.3
auto.green.4
auto.green.5
auto.green.6
auto.green.7
auto.green.8
auto.green.9
auto.yellow.0
auto.yellow.1
auto.yellow.2
auto.yellow.3
auto.yellow.4
auto.yellow.5
auto.yellow.6
auto.yellow.7
auto.yellow.8
auto.yellow.9
auto.orange.0
auto.orange.1
auto.orange.2
auto.orange.3
auto.orange.4
auto.orange.5
auto.orange.6
auto.orange.7
auto.orange.8
auto.orange.9
auto.red.0
auto.red.1
auto.red.2
auto.red.3
auto.red.4
auto.red.5
auto.red.6
auto.red.7
auto.red.8
auto.red.9
auto.purple.0
auto.purple.1
auto.purple.2
auto.purple.3
auto.purple.4
auto.purple.5
auto.purple.6
auto.purple.7
auto.purple.8
auto.purple.9
auto.pink.0
auto.pink.1
auto.pink.2
auto.pink.3
auto.pink.4
auto.pink.5
auto.pink.6
auto.pink.7
auto.pink.8
auto.pink.9
text.primaryfg.default
text.secondaryfg.muted
text.tertiaryfg.muted
text.placeholderfg.subtle
text.disabledfg.muted
text.inversefg.onEmphasis
text.linkaccent.fg
text.dangerdanger.fg
text.successsuccess.fg
text.warningattention.fg
text.white
icon.primaryfg.default
icon.secondaryfg.muted
icon.tertiaryfg.muted
icon.infoaccent.fg
icon.dangerdanger.fg
icon.successsuccess.fg
icon.warningattention.fg
border.primaryborder.default
border.secondaryborder.muted
border.tertiaryborder.default
border.overlayborder.default
border.inversefg.onEmphasis
border.infoaccent.emphasis
border.dangerdanger.emphasis
border.successsuccess.emphasis
border.warningattention.emphasis
bg.canvascanvas.default
bg.canvasMobile
bg.canvasInverseneutral.emphasis
bg.canvasInsetcanvas.inset
bg.primarycanvas.default
bg.secondarycanvas.subtle
bg.tertiarycanvas.subtle
bg.overlaycanvas.overlay
bg.backdropprimer.canvas.backdrop
bg.infoaccent.subtle
bg.infoInverseaccent.emphasis
bg.dangerdanger.subtle
bg.dangerInversedanger.emphasis
bg.successsuccess.subtle
bg.successInversesuccess.emphasis
bg.warningattention.subtle
bg.warningInverseattention.emphasis
shadow.highlightprimer.shadow.highlight
shadow.insetprimer.shadow.inset
state.hover.primaryBgaccent.emphasis
state.hover.primaryBorderaccent.emphasis
state.hover.primaryTextfg.onEmphasis
state.hover.primaryIconfg.onEmphasis
state.hover.secondaryBgneutral.subtle
state.hover.secondaryBorderneutral.subtle
state.selected.primaryBgaccent.emphasis
state.selected.primaryBorderaccent.emphasis
state.selected.primaryTextfg.onEmphasis
state.selected.primaryIconfg.onEmphasis
state.focus.borderaccent.emphasis
state.focus.shadowprimer.shadow.focus
fade.fg10
fade.fg15
fade.fg30
fade.fg50
fade.fg70
fade.fg85
fade.black10
fade.black15
fade.black30
fade.black50
fade.black70
fade.black85
fade.white10
fade.white15
fade.white30
fade.white50
fade.white70
fade.white85
alert.info.textfg.default
alert.info.iconaccent.fg
alert.info.bgaccent.subtle
alert.info.borderaccent.muted
alert.warn.textfg.default
alert.warn.iconattention.fg
alert.warn.bgattention.subtle
alert.warn.borderattention.muted
alert.error.textfg.default
alert.error.icondanger.fg
alert.error.bgdanger.subtle
alert.error.borderdanger.muted
alert.success.textfg.default
alert.success.iconsuccess.fg
alert.success.bgsuccess.subtle
alert.success.bordersuccess.muted
autocomplete.shadowshadow.medium
autocomplete.rowBorderborder.muted
blankslate.iconfg.muted
counter.textfg.default
counter.bgneutral.muted
counter.primary.textfg.onEmphasis
counter.primary.bgneutral.emphasis
counter.secondary.textfg.muted
counter.secondary.bgneutral.subtle
box.blueBorderaccent.muted
box.rowYellowBgattention.subtle
box.rowBlueBgaccent.subtle
box.headerBlueBgaccent.subtle
box.headerBlueBorderaccent.muted
box.borderInfoaccent.muted
box.bgInfoaccent.subtle
box.borderWarningattention.muted
box.bgWarningattention.subtle
branchName.textfg.muted
branchName.iconfg.muted
branchName.bgaccent.subtle
branchName.link.textaccent.fg
branchName.link.iconaccent.fg
branchName.link.bgaccent.subtle
markdown.codeBgneutral.muted
markdown.frameBorderborder.default
markdown.blockquoteBorderborder.default
markdown.tableBorderborder.default
markdown.tableTrBorderborder.muted
filterItem.barBgneutral.subtle
hiddenTextExpander.bgneutral.muted
hiddenTextExpander.bgHoveraccent.muted
dragAndDrop.borderborder.default
uploadEnabled.borderborder.default
uploadEnabled.borderFocusedaccent.emphasis
previewableCommentForm.borderborder.default
verifiedBadge.textsuccess.fg
verifiedBadge.bgcanvas.default
verifiedBadge.borderborder.default
socialCount.bgcanvas.default
tooltip.textfg.onEmphasis
tooltip.bgneutral.emphasisPlus
filesExplorerIconaccent.fg
hlAuthorBgaccent.subtle
hlAuthorBorderaccent.muted
logoSubduedneutral.muted
discussionBordersuccess.muted
discussionBgSuccesssuccess.emphasis
actionsWorkflowTableStickyBgprimer.canvas.sticky
repoLanguageColorBorderprimer.border.contrast
codeSelectionBgaccent.muted
highlight.textfg.default
highlight.bgattention.subtle
blob.lineHighlightBgattention.subtle
blob.lineHighlightBorderattention.muted
topicTag.textaccent.fg
topicTag.bgaccent.subtle
topicTag.hoverBgaccent.emphasis
topicTag.activeBgaccent.subtle
footerInvertocat.octiconfg.subtle
footerInvertocat.octiconHoverfg.muted
dropdown.shadowshadow.large
label.borderborder.default
label.primary.textfg.default
label.primary.borderneutral.emphasis
label.secondary.textfg.muted
label.secondary.borderborder.default
label.info.textaccent.fg
label.info.borderaccent.emphasis
label.success.textsuccess.fg
label.success.bordersuccess.emphasis
label.warning.textattention.fg
label.warning.borderattention.emphasis
label.danger.textdanger.fg
label.danger.borderdanger.emphasis
label.orange.textsevere.fg
label.orange.bordersevere.emphasis
input.bgcanvas.default
input.contrastBgcanvas.inset
input.borderborder.default
input.shadowprimer.shadow.inset
input.disabledBorderborder.default
input.warningBorderattention.emphasis
input.errorBorderdanger.emphasis
input.tooltip.success.textfg.default
input.tooltip.success.bgsuccess.subtle
input.tooltip.success.bordersuccess.muted
input.tooltip.warning.textfg.default
input.tooltip.warning.bgattention.subtle
input.tooltip.warning.borderattention.muted
input.tooltip.error.textfg.default
input.tooltip.error.bgdanger.subtle
input.tooltip.error.borderdanger.muted
toast.textfg.default
toast.bgcanvas.default
toast.borderborder.default
toast.shadowshadow.large
toast.iconfg.onEmphasis
toast.iconBgaccent.emphasis
toast.iconBorder
toast.success.textfg.default
toast.success.borderborder.default
toast.success.iconfg.onEmphasis
toast.success.iconBgsuccess.emphasis
toast.success.iconBorder
toast.warning.textfg.default
toast.warning.borderborder.default
toast.warning.iconfg.default
toast.warning.iconBgattention.emphasis
toast.warning.iconBorder
toast.danger.textfg.default
toast.danger.borderborder.default
toast.danger.iconfg.onEmphasis
toast.danger.iconBgdanger.emphasis
toast.danger.iconBorder
toast.loading.textfg.default
toast.loading.borderborder.default
toast.loading.iconfg.onEmphasis
toast.loading.iconBgneutral.emphasis
toast.loading.iconBorder
timeline.textfg.muted
timeline.badgeSuccessBorder
timeline.targetBadgeBorderaccent.emphasis
timeline.targetBadgeShadowaccent.muted
diffstat.neutralBgneutral.muted
diffstat.neutralBorderborder.subtle
diffstat.deletionBgdanger.emphasis
diff.addition.textfg.default
diff.addition.bgsuccess.subtle
diff.addition.bordersuccess.muted
diff.deletion.textfg.default
diff.deletion.bgdanger.subtle
diff.deletion.borderdanger.muted
diff.change.textattention.fg
diff.change.bgattention.subtle
diff.change.borderattention.muted
mergeBox.successIconBgsuccess.emphasis
mergeBox.successIconTextfg.onEmphasis
mergeBox.successIconBorder
mergeBox.successIndicatorBgsuccess.emphasis
mergeBox.successIndicatorBorder
mergeBox.mergedIconBgdone.emphasis
mergeBox.mergedIconTextfg.onEmphasis
mergeBox.mergedIconBorder
mergeBox.mergedBoxBorderdone.emphasis
mergeBox.neutralIconBgneutral.emphasis
mergeBox.neutralIconTextfg.onEmphasis
mergeBox.neutralIconBorder
mergeBox.neutralIndicatorBgneutral.emphasis
mergeBox.neutralIndicatorBorder
mergeBox.warningIconBgattention.emphasis
mergeBox.warningIconTextfg.onEmphasis
mergeBox.warningIconBorder
mergeBox.warningBoxBorderattention.emphasis
mergeBox.warningMergeHighlight
mergeBox.errorIconBgdanger.emphasis
mergeBox.errorIconTextfg.onEmphasis
mergeBox.errorIconBorder
mergeBox.errorIndicatorBgdanger.emphasis
mergeBox.errorIndicatorBorder
underlinenav.border
underlinenav.borderActiveprimer.border.active
underlinenav.textfg.default
underlinenav.textHoverfg.default
underlinenav.textActivefg.default
underlinenav.iconHoverfg.subtle
underlinenav.iconActivefg.default
underlinenav.counterTextfg.default
underlinenav.counterBgneutral.muted
selectMenu.borderSecondaryborder.muted
selectMenu.shadowshadow.large
selectMenu.backdropBgprimer.canvas.backdrop
sidenav.borderActiveprimer.border.active
menu.headingTextfg.default
menu.borderActiveprimer.border.active
project.cardBgcanvas.overlay
prState.draft.textfg.onEmphasis
prState.draft.bgneutral.emphasis
prState.draft.border
prState.open.textfg.onEmphasis
prState.open.bgsuccess.emphasis
prState.open.border
prState.merged.textfg.onEmphasis
prState.merged.bgdone.emphasis
prState.merged.border
prState.closed.textfg.onEmphasis
prState.closed.bgdanger.emphasis
prState.closed.border
diffBlob.numTextfg.subtle
diffBlob.numHoverTextfg.default
diffBlob.addition.numHoverTextfg.default
diffBlob.deletion.numHoverTextfg.default
diffBlob.hunk.textfg.muted
diffBlob.hunk.lineBgaccent.subtle
diffBlob.emptyBlockBgneutral.subtle
diffBlob.selectedLineHighlightBgattention.subtle
diffBlob.selectedLineHighlightBorderattention.muted
diffBlob.expander.hoverIconfg.onEmphasis
diffBlob.expander.hoverBgaccent.emphasis
diffBlob.commentButton.iconfg.onEmphasis
diffBlob.commentButton.bgaccent.emphasis
diffBlob.commentButton.gradientBg
globalNav.logo
globalNav.bg
globalNav.text
globalNav.icon
globalNav.inputBg
globalNav.inputBorder
globalNav.inputIcon
globalNav.inputPlaceholder
introShelf.gradientLeftaccent.subtle
introShelf.gradientRightsuccess.subtle
introShelf.gradientIncanvas.default
introShelf.gradientOut
mktg.success
mktg.info
mktg.bgShadeGradient.top
mktg.bgShadeGradient.bottom
mktg.btn.bg.top
mktg.btn.bg.bottom
mktg.btn.bgOverlay.top
mktg.btn.bgOverlay.bottom
mktg.btn.text
mktg.btn.primary.bg.top
mktg.btn.primary.bg.bottom
mktg.btn.primary.bgOverlay.top
mktg.btn.primary.bgOverlay.bottom
mktg.btn.primary.text
mktg.btn.enterprise.bg.top
mktg.btn.enterprise.bg.bottom
mktg.btn.enterprise.bgOverlay.top
mktg.btn.enterprise.bgOverlay.bottom
mktg.btn.enterprise.text
mktg.btn.outline.text
mktg.btn.outline.border
mktg.btn.outline.hover.text
mktg.btn.outline.hover.border
mktg.btn.outline.focus.border
mktg.btn.outline.focus.borderInset
mktg.btn.dark.text
mktg.btn.dark.border
mktg.btn.dark.hover.text
mktg.btn.dark.hover.border
mktg.btn.dark.focus.border
mktg.btn.dark.focus.borderInset