Thunderbird colors are bold, vibrant and attractive. They enhance the experience by providing visual clues and by bringing attention to primary actions.

Thunderbird Colors

Palettes

The color palette includes primary and secondary colors that can be used for interfaces and illustrations.

Blue

Thunderbird Blue is one of our primary colors. We use blue as accent color for highlighting buttons, links, and active states like the active tab in Thunderbird default theme.

Blue 40 #45a1ff AA Fails
Blue 50 #0a84ff AA Large AA Large
Blue 60 #0060df AA AA
Blue 70 #003eaa AAA AAA
Blue 80 #002275 AAA AAA
Blue 90 #000f40 AAA AAA

Teal

Thunderbird Teal is one of our primary colors. We use teal as an attention color.

Teal 50 #00feff AAA Fails
Teal 60 #00c8d7 AAA Fails
Teal 70 #008ea4 AA AA
Teal 80 #005a71 AAA AAA
Teal 90 #002d3e AAA AAA

Magenta

Thunderbird Magenta is one of our primary colors. We currently have no common usage for it.

Magenta 50 #ff1ad9 AA Large AA Large
Magenta 60 #ed00b5 AA Large AA Large
Magenta 70 #b5007f AAA AAA
Magenta 80 #7d004f AAA AAA
Magenta 90 #440027 AAA AAA

Green

Thunderbird Green is commonly used to indicate success.

Green 50 #30e60b AAA Fails
Green 60 #12bc00 AA Fails
Green 70 #058b00 AA AA
Green 80 #006504 AA AA
Green 90 #003706 AAA AAA

Yellow

Thunderbird Yellow is commonly used for warnings.

Yellow 50 #ffe900 AAA Fails
Yellow 60 #d7b600 AAA Fails
Yellow 70 #a47f00 AA AA
Yellow 80 #715100 AAA AAA
Yellow 90 #3e2800 AAA AAA

Red

Thunderbird Red is commonly used for errors.

Red 50 #ff0039 AA Large AA Large
Red 60 #d70022 AA AA
Red 70 #a4000f AAA AAA
Red 80 #5a0002 AAA AAA
Red 90 #3e0200 AAA AAA

Purple

Thunderbird Purple is commonly used to indicate privacy.

Purple 30 #c069ff AA AA
Purple 40 #ad3bff AA AA
Purple 50 #9400ff AA AA
Purple 60 #8000d7 AAA AAA
Purple 70 #6200a4 AAA AAA
Purple 80 #440071 AAA AAA
Purple 90 #25003e AAA AAA

Orange

Thunderbird Orange is only used for branding. Do not use it otherwise.

Orange 50 #ff9400 AAA Fails
Orange 60 #d76e00 AA AA Large
Orange 70 #a44900 AA AA
Orange 80 #712b00 AAA AAA
Orange 90 #3e1300 AAA AAA

Ink

Thunderbird Ink is commonly used for interfaces (e.g., Thunderbird tab strip on Windows 10 default theme).

Ink 70 #363959 AAA AAA
Ink 80 #202340 AAA AAA
Ink 90 #0f1126 AAA AAA

Grey

Thunderbird Grey is commonly used for interfaces (e.g., Thunderbird light theme).

Grey 10 #f9f9fa AAA Fails
Grey 20 #ededf0 AAA Fails
Grey 30 #d7d7db AAA Fails
Grey 40 #b1b1b3 AAA Fails
Grey 50 #737373 AA AA
Grey 60 #4a4a4f AAA AAA
Grey 70 #38383d AAA AAA
Grey 80 #2a2a2e AAA AAA
Grey 90 #0c0c0d AAA AAA

White

We use white for the background of doorhangers or in-content menus.

White 100 #ffffff AAA n/a

Text and Background Colors

Visit typography for more information on text color.

Dark Text on Light Background

On light backgrounds, the typography is set in Grey 90 for primary text and Grey 50 for secondary text.

Primary Text

#0c0c0d

Secondary Text

#737373

Light Text on Dark Background

On dark backgrounds, the typography is set in White for primary text and Grey 10 for secondary text.

Primary Text

#ffffff

Secondary Text

#f9f9fa

Color Combinations

On a background color, use White when specified.

Primary Text

#ffffff

Use 90 (the darkest shade) when white text fails contrast ratio. In this example, Teal 90 is combined with a Teal 50 background.

Teal 90 Text

Icons and Other Elements

Visit iconography for more information about icon colors.

Use Grey 90 a80 rgba(12, 12, 13, 0.8) on light backgrounds for primary icons. Use Grey 90 a60 rgba(12, 12, 13, 0.6) for secondary icons.

Icons in the toolbar with a light theme

Use Grey 10 a80 rgba(249, 249, 250, 0.8) on dark backgrounds for primary icons. Grey 10 a60 rgba(249, 249, 250, 0.6) for secondary icons.

Icons in the toolbar with a dark theme

Themes

Thunderbird features default themes and supports custom themes. Ensure that changes affecting the interface will continue to support a variety of backgrounds, images, and both light or dark colors.

Light Theme

Light theme color palette applied to the chrome

White

#ffffff

Grey 10

#f9f9fa

Grey 30

#d7d7db

Dark Theme

Dark theme color palette applied to the chrome

Grey 60

#4a4a4f

Grey 70

#38383d

Grey 90

#0c0c0d

Accessibility

Color Contrast

Follow the WCAG 2.0 Level AA guidelines to ensure proper color contrast.

Color Contrast Values

  • Fail – Your text doesn’t have enough contrast with the background.

  • AA Large – Acceptable contrast for type sizes >= 18px.

  • AA – Acceptable contrast for text sizes below 18px.

  • AAA – Enhanced contrast.

Colour Contrast Analyser contrast and color blindness analyzer (Windows and macOS) by The Paciello Group.

Contrast Ratio contrast ratio calculator (Web) by Lea Verou.

Color Blind

There are different types of color blindness. The most common form is red-green color blindness, followed by blue-yellow color blindness and total color blindness. Red-green color blindness affects up to 8% of males and 0.5% of females. Ensure that adjacent color shades are distinguishable for color blind people. Use a color blindness analyzer to confirm your choices.

Sim Daltonism color blindness simulator (iOS and macOS) by Michel Fortin.

High Contrast on Windows

Windows currently offers multiple high contrast modes. Ensure that colors are translated properly, following the hierarchy defined for the default theme.

Supporting High Contrast Themes on Windows guidelines by Windows Dev Center.