Mozilla Firefox color palette
TechMozilla Firefox's color identity is vibrant and dynamic, featuring a signature orange as its primary color, complemented by purples, yellows, and deep blues. The palette reflects the brand's energetic and modern approach to web technology.
mozilla.orgMozilla Firefox colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Firefox OrangePrimary255, 113, 57
- Firefox BlueSecondary0, 83, 159
- Firefox YellowAccent255, 213, 57
Surfaces
Page, cards and dividers.- Firefox WhiteBackground255, 255, 255
- Firefox Light GraySurface245, 246, 250
- Firefox Border GrayBorder224, 224, 230
Text
Three tiers of copy.- Firefox CharcoalText32, 33, 36
- Firefox Medium GraySecondary text90, 90, 90
- Firefox Muted GrayMuted text138, 143, 152
Semantic
Feedback and state colors.- Firefox Success GreenSuccess76, 175, 80
- Firefox Warning YellowWarning255, 179, 0
- Firefox Error RedError230, 96, 58
- Firefox Info BlueInfo59, 130, 246
Use Mozilla Firefox's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
mozilla-firefox-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #3B82F6;
--error: #E6603A;
--accent: #FFD539;
--border: #E0E0E6;
--primary: #FF7139;
--success: #4CAF50;
--surface: #F5F6FA;
--warning: #FFB300;
--secondary: #00539F;
--text-muted: #8A8F98;
--background: #FFFFFF;
--text-primary: #202124;
--text-secondary: #5A5A5A;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
16.1:1
Pass
Text on surface
Needs 4.5:1 for body text
14.9:1
Pass
Secondary text on background
Needs 4.5:1 for body text
6.9:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
6.4:1
Pass
Muted text on background
Needs 3:1 for large text
3.2:1
Pass
Muted text on surface
Needs 3:1 for large text
3.0:1
Pass
Mozilla Firefox background, border and text colors
The quiet part of the Mozilla Firefox palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Firefox WhiteBackground
- HEX
- RGB
- HSL
- Firefox Light GraySurface
- HEX
- RGB
- HSL
- Firefox Border GrayBorder
- HEX
- RGB
- HSL
- Firefox CharcoalText
- HEX
- RGB
- HSL
- Firefox Medium GraySecondary text
- HEX
- RGB
- HSL
- Firefox Muted GrayMuted text
- HEX
- RGB
- HSL
About Mozilla Firefox's colors
Firefox's palette uses a complementary mix of warm oranges and cool blues, accented by yellow and purple for vibrancy. The combination is designed for high contrast and accessibility across digital interfaces.
Primary orange contrasts with deep blue secondary.
Accent yellow highlights calls to action.
Neutral grays provide balance for UI elements.
Psychology
The orange conveys energy, friendliness, and approachability, while blue adds trust and reliability. Yellow accents draw attention to important actions or highlights.
Evolution
Firefox's palette has evolved from a more muted, earth-toned scheme to a brighter and more saturated set of colors. The current palette has been stable since the 2019 rebrand, emphasizing digital clarity and vibrancy.
Where Mozilla Firefox uses each color
- Primary
Firefox Orange is used for the logo, primary buttons, and key highlights.
- Secondary
Firefox Blue appears in navigation elements and secondary actions.
- Accent
Firefox Yellow is used for highlights, notifications, and accent graphics.
- Backgrounds
Firefox White and Light Gray serve as the main backgrounds for web and app interfaces.
- Text
Firefox Charcoal and Medium Gray are used for primary and secondary text, with Muted Gray for less prominent information.
- Semantic
Success Green, Warning Yellow, Error Red, and Info Blue are used for status indicators and alerts.
Mozilla Firefox color questions
Hex codes, RGB values, neutrals and how to use the palette.
The primary Mozilla Firefox brand color is Firefox Orange, with the hex code #FF7139.
Firefox Orange (#FF7139) is RGB(255, 113, 57). In CMYK, it is approximately 0, 56, 78, 0.
Firefox uses Light Gray (#F5F6FA), Border Gray (#E0E0E6), Medium Gray (#5A5A5A), and Muted Gray (#8A8F98) for backgrounds, borders, and text.
Use Firefox Orange (#FF7139) for primary actions and branding, with Blue (#00539F) and Yellow (#FFD539) for secondary and accent elements. Neutral grays and semantic colors provide structure and feedback in UI design.
The secondary color is Firefox Blue, #00539F, and the accent is Firefox Yellow, #FFD539. Together with the primary they make up the three brand colors at the top of this page.
6 of 6 text and background pairings meet WCAG 2.1 AA contrast. The contrast section above shows every pairing with its exact ratio.
Use the export block on this page. It gives you CSS custom properties, a Tailwind config, W3C design tokens or a shadcn/ui theme built from these exact hex values, with copy and download buttons.
Yes. Export the Claude Code skill, Cursor rules or Codex prompt from the same block. The agent then applies Mozilla Firefox's colors consistently when it generates UI.
Make something in the spirit of Mozilla Firefox
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.