Firebase color palette
SaaSFirebase uses a bold, warm palette centered on its signature orange-red, complemented by yellow and deep gray neutrals for clarity and energy. The color system is designed for high visibility and clear UI hierarchy across its developer tools and documentation.
firebase.google.comFirebase colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Firebase OrangePrimary221, 44, 0
- Firebase YellowSecondary255, 160, 0
- Firebase GoldAccent244, 180, 0
Surfaces
Page, cards and dividers.- Firebase WhiteBackground255, 255, 255
- Firebase Light GraySurface245, 245, 245
- Firebase Border GrayBorder224, 224, 224
Text
Three tiers of copy.- Firebase CharcoalText33, 33, 33
- Firebase Medium GraySecondary text117, 117, 117
- Firebase Muted GrayMuted text189, 189, 189
Semantic
Feedback and state colors.- Firebase Success GreenSuccess67, 160, 71
- Firebase Warning YellowWarning251, 192, 45
- Firebase Error RedError211, 47, 47
- Firebase Info BlueInfo25, 118, 210
Use Firebase's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
firebase-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #1976D2;
--error: #D32F2F;
--accent: #F4B400;
--border: #E0E0E0;
--primary: #DD2C00;
--success: #43A047;
--surface: #F5F5F5;
--warning: #FBC02D;
--secondary: #FFA000;
--text-muted: #BDBDBD;
--background: #FFFFFF;
--text-primary: #212121;
--text-secondary: #757575;
}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.8:1
Pass
Secondary text on background
Needs 4.5:1 for body text
4.6:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
4.2:1
Fail
Muted text on background
Needs 3:1 for large text
1.9:1
Fail
Muted text on surface
Needs 3:1 for large text
1.7:1
Fail
Firebase gray and neutral colors
The quiet part of the Firebase palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Firebase WhiteBackground
- HEX
- RGB
- HSL
- Firebase Light GraySurface
- HEX
- RGB
- HSL
- Firebase Border GrayBorder
- HEX
- RGB
- HSL
- Firebase CharcoalText
- HEX
- RGB
- HSL
- Firebase Medium GraySecondary text
- HEX
- RGB
- HSL
- Firebase Muted GrayMuted text
- HEX
- RGB
- HSL
About Firebase's colors
Firebase's palette is built around high-contrast, warm hues to ensure visibility and a sense of energy. The use of deep neutrals and bright accents supports clear information hierarchy and accessibility.
Primary orange-red is complemented by yellow and gold accents.
Deep grays provide neutral backgrounds for content.
Semantic colors (green, yellow, red, blue) align with standard UI feedback.
Psychology
The dominant orange-red evokes enthusiasm, action, and approachability, supporting Firebase's developer-focused mission. Neutrals and semantic colors ensure clarity and trust in technical contexts.
Evolution
Firebase's color palette has remained consistent since its acquisition by Google, aligning with Material Design principles. Minor adjustments have been made to neutrals and semantic colors for accessibility.
Where Firebase uses each color
- Primary
Used for main action buttons, highlights, and the Firebase logo.
- Secondary
Appears in navigation bars, icons, and secondary buttons.
- Accent
Used for highlights, badges, and subtle UI accents.
- Backgrounds
White and light gray backgrounds are used for app screens and documentation.
- Text
Charcoal and medium gray are used for primary and secondary text throughout the UI.
- Semantic
Green, yellow, red, and blue are used for status indicators, alerts, and notifications.
Firebase color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Firebase primary color is #DD2C00, known as Firebase Orange.
Firebase Orange (#DD2C00) is RGB(221, 44, 0) and CMYK(0, 80, 100, 13).
Firebase uses #212121 (Firebase Charcoal), #757575 (Firebase Medium Gray), and #BDBDBD (Firebase Muted Gray) as its primary neutral tones.
Use #DD2C00 for primary actions and branding, with #FFA000 and #F4B400 for secondary and accent elements. Neutrals and semantic colors should support content clarity and accessibility.
The secondary color is Firebase Yellow, #FFA000, and the accent is Firebase Gold, #F4B400. Together with the primary they make up the three brand colors at the top of this page.
3 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 Firebase's colors consistently when it generates UI.
Make something in the spirit of Firebase
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.