Colors

Canonical Colors

  • True White

    --colorWhite

    #ffffff

  • Cool Neutral

    --colorNeutralCool

    #f9f9f9

  • Warm Neutral

    --colorNeutralWarm

    #f2f0eb

  • Ceramic

    --colorCeramic

    #edebe9

  • True Black

    --colorBlack

    #000000

  • Starbucks Green

    --colorGreenStarbucks

    #006241

  • Apron Green

    --colorGreenApron

    #00a862

  • Accent Green

    --colorGreenAccent

    #00754A

  • Light Green

    --colorGreenLight

    #d4e9e2

  • Light Green Secondary

    --colorGreenLightSecondary

    rgba(212, 233, 226, 0.33)

  • House Green

    --colorHouseGreen

    #1E3932

  • Rewards Gold

    --colorGold

    #cba258

  • Light Gold

    --colorGoldLight

    #dfc49d

  • Lightest Gold

    --colorGoldLightest

    #faf6ee

  • Error Red

    --colorRed

    #d62b1f

  • Warning Yellow

    --colorYellow

    #fbbc05

Functional Colors

These colors are purpose specific and help inform consistent color usage.

  • Black Text

    --colorTextBlack

    rgba(0, 0, 0, .87)

  • Soft Black Text

    --colorTextBlackSoft

    rgba(0, 0, 0, .58)

  • White Text

    --colorTextWhite

    rgba(255, 255, 255, 1)

  • Soft White Text

    --colorTextWhiteSoft

    rgba(255, 255, 255, .70)

Text Colors

There are four basic text colors which are intended to cover a large majority of text needs.

For dark text on a light background, we use either 'black' or 'soft black':

Black heading

Black body copy

CSS variable name:
--colorTextBlack
CSS utility class:
color-textBlack

Soft black heading

Soft black body copy

CSS variable name:
--colorTextBlackSoft
CSS utility class:
color-textBlackSoft

For light text on a dark background, we use either 'white' or 'soft white':

White heading

White body copy

CSS variable name:
--colorTextWhite
CSS utility class:
color-textWhite

Soft white heading

Soft white body copy

CSS variable name:
--colorTextWhiteSoft
CSS utility class:
color-textWhiteSoft

Accessible Combinations

This is a list of color combinations of our color palette that pass WCAG 2.0 color contrast guidelines. Combinations displayed here pass either the AAA, AA, or AA Large WCAG conformance levels for contrast. AAA and AA combinations are safe to use at any type size. AA Large combinations are safe to use for large text.

To meet AA Large conformance, type must be at least 24px, or 19px if bold. This standard is typically written in terms of pt units (18pt and 14pt bold, respectively), which is equivalent to the pixel sizes noted above as the ratio between pt and px is 1pt = 1.3333px.

For more details on appropriate color contrast, see the WCAG description.

AAA

FG:--colorWhiteBG:--colorBlack

AAA

FG:--colorNeutralCoolBG:--colorBlack

AAA

FG:--colorNeutralWarmBG:--colorBlack

AAA

FG:--colorCeramicBG:--colorBlack

AA

FG:--colorGreenApronBG:--colorBlack

AA Large

FG:--colorGreenAccentBG:--colorBlack

AAA

FG:--colorGreenLightBG:--colorBlack

AAA

FG:--colorGoldBG:--colorBlack

AAA

FG:--colorGoldLightBG:--colorBlack

AAA

FG:--colorGoldLightestBG:--colorBlack

AA Large

FG:--colorRedBG:--colorBlack

AAA

FG:--colorYellowBG:--colorBlack

AA Large

FG:--colorWhite40BG:--colorBlack

AA

FG:--colorWhite50BG:--colorBlack

AAA

FG:--colorWhite60BG:--colorBlack

AAA

FG:--colorWhite70BG:--colorBlack

AAA

FG:--colorWhite80BG:--colorBlack

AAA

FG:--colorWhite90BG:--colorBlack

AAA

FG:--colorTextWhiteBG:--colorBlack

AAA

FG:--colorTextWhiteSoftBG:--colorBlack

AAA

FG:--colorBlackBG:--colorCeramic

AA

FG:--colorGreenStarbucksBG:--colorCeramic

AA

FG:--colorGreenAccentBG:--colorCeramic

AAA

FG:--colorHouseGreenBG:--colorCeramic

AA Large

FG:--colorRedBG:--colorCeramic

AA Large

FG:--colorBlack50BG:--colorCeramic

AA

FG:--colorBlack60BG:--colorCeramic

AAA

FG:--colorBlack70BG:--colorCeramic

AAA

FG:--colorBlack80BG:--colorCeramic

AAA

FG:--colorBlack90BG:--colorCeramic

AAA

FG:--colorTextBlackBG:--colorCeramic

AA

FG:--colorTextBlackSoftBG:--colorCeramic

AAA

FG:--colorBlackBG:--colorGold

AA Large

FG:--colorGreenStarbucksBG:--colorGold

AA

FG:--colorHouseGreenBG:--colorGold

AA Large

FG:--colorBlack50BG:--colorGold

AA Large

FG:--colorBlack60BG:--colorGold

AA

FG:--colorBlack70BG:--colorGold

AA

FG:--colorBlack80BG:--colorGold

AAA

FG:--colorBlack90BG:--colorGold

AAA

FG:--colorTextBlackBG:--colorGold

AA Large

FG:--colorTextBlackSoftBG:--colorGold

AAA

FG:--colorBlackBG:--colorGoldLight

AA Large

FG:--colorGreenStarbucksBG:--colorGoldLight

AA Large

FG:--colorGreenAccentBG:--colorGoldLight

AAA

FG:--colorHouseGreenBG:--colorGoldLight

AA Large

FG:--colorBlack50BG:--colorGoldLight

AA

FG:--colorBlack60BG:--colorGoldLight

AA

FG:--colorBlack70BG:--colorGoldLight

AAA

FG:--colorBlack80BG:--colorGoldLight

AAA

FG:--colorBlack90BG:--colorGoldLight

AAA

FG:--colorTextBlackBG:--colorGoldLight

AA

FG:--colorTextBlackSoftBG:--colorGoldLight

AAA

FG:--colorBlackBG:--colorGoldLightest

AA

FG:--colorGreenStarbucksBG:--colorGoldLightest

AA

FG:--colorGreenAccentBG:--colorGoldLightest

AAA

FG:--colorHouseGreenBG:--colorGoldLightest

AA

FG:--colorRedBG:--colorGoldLightest

AA Large

FG:--colorBlack50BG:--colorGoldLightest

AA

FG:--colorBlack60BG:--colorGoldLightest

AAA

FG:--colorBlack70BG:--colorGoldLightest

AAA

FG:--colorBlack80BG:--colorGoldLightest

AAA

FG:--colorBlack90BG:--colorGoldLightest

AAA

FG:--colorTextBlackBG:--colorGoldLightest

AA

FG:--colorTextBlackSoftBG:--colorGoldLightest

AA

FG:--colorWhiteBG:--colorGreenAccent

AA

FG:--colorNeutralCoolBG:--colorGreenAccent

AA

FG:--colorNeutralWarmBG:--colorGreenAccent

AA

FG:--colorCeramicBG:--colorGreenAccent

AA Large

FG:--colorBlackBG:--colorGreenAccent

AA

FG:--colorGreenLightBG:--colorGreenAccent

AA Large

FG:--colorGoldLightBG:--colorGreenAccent

AA

FG:--colorGoldLightestBG:--colorGreenAccent

AA Large

FG:--colorYellowBG:--colorGreenAccent

AA Large

FG:--colorBlack80BG:--colorGreenAccent

AA Large

FG:--colorBlack90BG:--colorGreenAccent

AA Large

FG:--colorWhite60BG:--colorGreenAccent

AA Large

FG:--colorWhite70BG:--colorGreenAccent

AA Large

FG:--colorWhite80BG:--colorGreenAccent

AA

FG:--colorWhite90BG:--colorGreenAccent

AA Large

FG:--colorTextBlackBG:--colorGreenAccent

AA

FG:--colorTextWhiteBG:--colorGreenAccent

AA Large

FG:--colorTextWhiteSoftBG:--colorGreenAccent

AA Large

FG:--colorWhiteBG:--colorGreenApron

AA

FG:--colorBlackBG:--colorGreenApron

AA Large

FG:--colorHouseGreenBG:--colorGreenApron

AA Large

FG:--colorBlack60BG:--colorGreenApron

AA

FG:--colorBlack70BG:--colorGreenApron

AA

FG:--colorBlack80BG:--colorGreenApron

AA

FG:--colorBlack90BG:--colorGreenApron

AA

FG:--colorTextBlackBG:--colorGreenApron

AA Large

FG:--colorTextBlackSoftBG:--colorGreenApron

AA Large

FG:--colorTextWhiteBG:--colorGreenApron

AAA

FG:--colorBlackBG:--colorGreenLight

AA

FG:--colorGreenStarbucksBG:--colorGreenLight

AA

FG:--colorGreenAccentBG:--colorGreenLight

AAA

FG:--colorHouseGreenBG:--colorGreenLight

AA Large

FG:--colorRedBG:--colorGreenLight

AA Large

FG:--colorBlack50BG:--colorGreenLight

AA

FG:--colorBlack60BG:--colorGreenLight

AAA

FG:--colorBlack70BG:--colorGreenLight

AAA

FG:--colorBlack80BG:--colorGreenLight

AAA

FG:--colorBlack90BG:--colorGreenLight

AAA

FG:--colorTextBlackBG:--colorGreenLight

AA

FG:--colorTextBlackSoftBG:--colorGreenLight

AAA

FG:--colorWhiteBG:--colorGreenStarbucks

AAA

FG:--colorNeutralCoolBG:--colorGreenStarbucks

AA

FG:--colorNeutralWarmBG:--colorGreenStarbucks

AA

FG:--colorCeramicBG:--colorGreenStarbucks

AA

FG:--colorGreenLightBG:--colorGreenStarbucks

AA Large

FG:--colorGoldBG:--colorGreenStarbucks

AA Large

FG:--colorGoldLightBG:--colorGreenStarbucks

AA

FG:--colorGoldLightestBG:--colorGreenStarbucks

AA Large

FG:--colorYellowBG:--colorGreenStarbucks

AA Large

FG:--colorWhite50BG:--colorGreenStarbucks

AA Large

FG:--colorWhite60BG:--colorGreenStarbucks

AA

FG:--colorWhite70BG:--colorGreenStarbucks

AA

FG:--colorWhite80BG:--colorGreenStarbucks

AA

FG:--colorWhite90BG:--colorGreenStarbucks

AAA

FG:--colorTextWhiteBG:--colorGreenStarbucks

AA

FG:--colorTextWhiteSoftBG:--colorGreenStarbucks

AAA

FG:--colorWhiteBG:--colorHouseGreen

AAA

FG:--colorNeutralCoolBG:--colorHouseGreen

AAA

FG:--colorNeutralWarmBG:--colorHouseGreen

AAA

FG:--colorCeramicBG:--colorHouseGreen

AA Large

FG:--colorGreenApronBG:--colorHouseGreen

AAA

FG:--colorGreenLightBG:--colorHouseGreen

AA

FG:--colorGoldBG:--colorHouseGreen

AAA

FG:--colorGoldLightBG:--colorHouseGreen

AAA

FG:--colorGoldLightestBG:--colorHouseGreen

AAA

FG:--colorYellowBG:--colorHouseGreen

AA Large

FG:--colorWhite40BG:--colorHouseGreen

AA Large

FG:--colorWhite50BG:--colorHouseGreen

AA

FG:--colorWhite60BG:--colorHouseGreen

AAA

FG:--colorWhite70BG:--colorHouseGreen

AAA

FG:--colorWhite80BG:--colorHouseGreen

AAA

FG:--colorWhite90BG:--colorHouseGreen

AAA

FG:--colorTextWhiteBG:--colorHouseGreen

AAA

FG:--colorTextWhiteSoftBG:--colorHouseGreen

AAA

FG:--colorBlackBG:--colorNeutralCool

AAA

FG:--colorGreenStarbucksBG:--colorNeutralCool

AA

FG:--colorGreenAccentBG:--colorNeutralCool

AAA

FG:--colorHouseGreenBG:--colorNeutralCool

AA

FG:--colorRedBG:--colorNeutralCool

AA Large

FG:--colorBlack50BG:--colorNeutralCool

AA

FG:--colorBlack60BG:--colorNeutralCool

AAA

FG:--colorBlack70BG:--colorNeutralCool

AAA

FG:--colorBlack80BG:--colorNeutralCool

AAA

FG:--colorBlack90BG:--colorNeutralCool

AAA

FG:--colorTextBlackBG:--colorNeutralCool

AA

FG:--colorTextBlackSoftBG:--colorNeutralCool

AAA

FG:--colorBlackBG:--colorNeutralWarm

AA

FG:--colorGreenStarbucksBG:--colorNeutralWarm

AA

FG:--colorGreenAccentBG:--colorNeutralWarm

AAA

FG:--colorHouseGreenBG:--colorNeutralWarm

AA Large

FG:--colorRedBG:--colorNeutralWarm

AA Large

FG:--colorBlack50BG:--colorNeutralWarm

AA

FG:--colorBlack60BG:--colorNeutralWarm

AAA

FG:--colorBlack70BG:--colorNeutralWarm

AAA

FG:--colorBlack80BG:--colorNeutralWarm

AAA

FG:--colorBlack90BG:--colorNeutralWarm

AAA

FG:--colorTextBlackBG:--colorNeutralWarm

AA

FG:--colorTextBlackSoftBG:--colorNeutralWarm

AA

FG:--colorWhiteBG:--colorRed

AA

FG:--colorNeutralCoolBG:--colorRed

AA Large

FG:--colorNeutralWarmBG:--colorRed

AA Large

FG:--colorCeramicBG:--colorRed

AA Large

FG:--colorBlackBG:--colorRed

AA Large

FG:--colorGreenLightBG:--colorRed

AA

FG:--colorGoldLightestBG:--colorRed

AA Large

FG:--colorBlack70BG:--colorRed

AA Large

FG:--colorBlack80BG:--colorRed

AA Large

FG:--colorBlack90BG:--colorRed

AA Large

FG:--colorWhite70BG:--colorRed

AA Large

FG:--colorWhite80BG:--colorRed

AA Large

FG:--colorWhite90BG:--colorRed

AA Large

FG:--colorTextBlackBG:--colorRed

AA

FG:--colorTextWhiteBG:--colorRed

AA Large

FG:--colorTextWhiteSoftBG:--colorRed

AAA

FG:--colorBlackBG:--colorTextWhite

AAA

FG:--colorGreenStarbucksBG:--colorTextWhite

AA Large

FG:--colorGreenApronBG:--colorTextWhite

AA

FG:--colorGreenAccentBG:--colorTextWhite

AAA

FG:--colorHouseGreenBG:--colorTextWhite

AA

FG:--colorRedBG:--colorTextWhite

AA Large

FG:--colorBlack50BG:--colorTextWhite

AA

FG:--colorBlack60BG:--colorTextWhite

AAA

FG:--colorBlack70BG:--colorTextWhite

AAA

FG:--colorBlack80BG:--colorTextWhite

AAA

FG:--colorBlack90BG:--colorTextWhite

AAA

FG:--colorTextBlackBG:--colorTextWhite

AA

FG:--colorTextBlackSoftBG:--colorTextWhite

AAA

FG:--colorBlackBG:--colorWhite

AAA

FG:--colorGreenStarbucksBG:--colorWhite

AA Large

FG:--colorGreenApronBG:--colorWhite

AA

FG:--colorGreenAccentBG:--colorWhite

AAA

FG:--colorHouseGreenBG:--colorWhite

AA

FG:--colorRedBG:--colorWhite

AA Large

FG:--colorBlack50BG:--colorWhite

AA

FG:--colorBlack60BG:--colorWhite

AAA

FG:--colorBlack70BG:--colorWhite

AAA

FG:--colorBlack80BG:--colorWhite

AAA

FG:--colorBlack90BG:--colorWhite

AAA

FG:--colorTextBlackBG:--colorWhite

AA

FG:--colorTextBlackSoftBG:--colorWhite

AAA

FG:--colorBlackBG:--colorYellow

AA Large

FG:--colorGreenStarbucksBG:--colorYellow

AA Large

FG:--colorGreenAccentBG:--colorYellow

AAA

FG:--colorHouseGreenBG:--colorYellow

AA Large

FG:--colorBlack50BG:--colorYellow

AA

FG:--colorBlack60BG:--colorYellow

AA

FG:--colorBlack70BG:--colorYellow

AAA

FG:--colorBlack80BG:--colorYellow

AAA

FG:--colorBlack90BG:--colorYellow

AAA

FG:--colorTextBlackBG:--colorYellow

AA

FG:--colorTextBlackSoftBG:--colorYellow