Mozilla
Mozilla brand palette covering both the corporate Mozilla identity (Mozilla black wordmark with the trailing colon — :: — colored expression on a near-black canvas) and the Firefox sub-brand's signature gradient anchored on Firefox Orange (#FF7139). The palette captures Mozilla's open-web brand voice: dark canvas, expressive accent, restrained neutrals.
12 swatches 14 light roles 14 dark roles
Swatches
mozilla-black
#161616
Corporate Mozilla identity color — the near-black canvas that anchors the brand. Source: simple-icons mozilla, brand.mozilla.com.
firefox-orange
#FF7139
Primary Firefox brand color — the bright orange of the Firefox flame mark.
firefox-red
#E66000
Deeper Firefox orange used in the flame gradient and for hover states.
firefox-yellow
#FFCB39
Bright yellow used at the tip of the Firefox flame mark.
firefox-blue
#0060DF
Firefox Blue used for the globe element behind the fox mark and for product links.
firefox-purple
#9059FF
Firefox Purple — supporting accent used in Mozilla product surfaces (e.g. Pocket, Relay).
mozilla-dark-canvas
#0C0C0D
Deepest dark-mode canvas.
mozilla-charcoal
#252525
Elevated dark surface for cards and panels.
mozilla-gray
#737373
Mid neutral for body text.
mozilla-light-gray
#D7D7DB
Hairline borders on light canvas.
mozilla-off-white
#F9F9FA
Subtle layered surface on light canvas.
mozilla-white
#FFFFFF
Page canvas in light mode.
Mode role mappings
Light mode (14 roles)
accent
→ firefox-orange accent-hover
→ firefox-red background
→ mozilla-white error
→ firefox-red primary
→ mozilla-black primary-hover
→ firefox-red success
→ firefox-blue surface
→ mozilla-off-white surface-elevated
→ mozilla-white text-primary
→ mozilla-black text-secondary
→ mozilla-gray text-tertiary
→ firefox-red warning
→ firefox-yellow warning-hover
→ firefox-orange Dark mode (14 roles)
accent
→ firefox-purple accent-hover
→ firefox-blue background
→ mozilla-dark-canvas error
→ firefox-red primary
→ firefox-orange primary-hover
→ firefox-yellow success
→ firefox-blue surface
→ mozilla-black surface-elevated
→ mozilla-charcoal text-primary
→ mozilla-white text-secondary
→ mozilla-light-gray text-tertiary
→ firefox-orange warning
→ firefox-yellow warning-hover
→ firefox-orange Provenance
- Source
- https://brand.mozilla.com/
- License
Proprietary — All Rights Reserved- Attribution
- Mozilla and Firefox are trademarks of the Mozilla Foundation, used by the Mozilla Corporation. Brand colors documented here are the values published on the Mozilla Brand Portal (brand.mozilla.com) and resolved against the simple-icons project: Mozilla #161616 (corporate near-black), Firefox Orange #FF7139 (Firefox sub-brand primary). The Mozilla and Firefox marks are not redistributed by this atom.
- Imported
-
2026-05-18 - Notes
- Mozilla's brand is dark-first; the corporate site uses a near-black canvas (#161616) with the Mozilla wordmark and expressive accent illustrations. The Firefox sub-brand introduces orange, red, and yellow as the flame gradient. The light-mode role mapping below is brand-atoms' sensible inversion (white canvas, dark wordmark) used in print and light surfaces.