Zapier color palette
SaaSZapier's color identity centers on a vibrant orange, supported by a modern palette of grays and subtle accent colors for clarity and usability. The palette is designed for high contrast and accessibility across its SaaS automation platform.
zapier.comZapier colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Zapier OrangePrimary255, 79, 0
- Zapier YellowSecondary255, 183, 0
- Zapier CharcoalAccent45, 45, 45
Surfaces
Page, cards and dividers.- Zapier WhiteBackground255, 255, 255
- Zapier Light GraySurface246, 246, 246
- Zapier Border GrayBorder227, 227, 227
Text
Three tiers of copy.- Zapier CharcoalText45, 45, 45
- Zapier Medium GraySecondary text111, 111, 111
- Zapier Muted GrayMuted text163, 163, 163
Semantic
Feedback and state colors.- Zapier GreenSuccess0, 196, 108
- Zapier YellowWarning255, 183, 0
- Zapier OrangeError255, 79, 0
- Zapier BlueInfo58, 141, 255
Use Zapier's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
zapier-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #3A8DFF;
--error: #FF4F00;
--accent: #2D2D2D;
--border: #E3E3E3;
--primary: #FF4F00;
--success: #00C46C;
--surface: #F6F6F6;
--warning: #FFB700;
--secondary: #FFB700;
--text-muted: #A3A3A3;
--background: #FFFFFF;
--text-primary: #2D2D2D;
--text-secondary: #6F6F6F;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
13.8:1
Pass
Text on surface
Needs 4.5:1 for body text
12.7:1
Pass
Secondary text on background
Needs 4.5:1 for body text
5.0:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
4.6:1
Pass
Muted text on background
Needs 3:1 for large text
2.5:1
Fail
Muted text on surface
Needs 3:1 for large text
2.3:1
Fail
Zapier gray and neutral colors
The quiet part of the Zapier palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Zapier WhiteBackground
- HEX
- RGB
- HSL
- Zapier Light GraySurface
- HEX
- RGB
- HSL
- Zapier Border GrayBorder
- HEX
- RGB
- HSL
- Zapier CharcoalText
- HEX
- RGB
- HSL
- Zapier Medium GraySecondary text
- HEX
- RGB
- HSL
- Zapier Muted GrayMuted text
- HEX
- RGB
- HSL
About Zapier's colors
Zapier's palette uses a bold orange as its signature, balanced by neutral grays and functional accent colors. The system prioritizes clarity, accessibility, and high visual contrast.
Primary orange is complemented by neutral grays for balance.
Accent blue and green provide semantic cues for status.
Yellow is used for warnings and highlights.
Psychology
The orange conveys energy, action, and approachability, aligning with Zapier's automation ethos. Grays and whites support a clean, professional UI that emphasizes usability.
Evolution
Zapier's palette has remained consistent, with orange as the core since early branding. Over time, the supporting grays and accent colors have been refined for improved accessibility and digital clarity.
Where Zapier uses each color
- Primary
Zapier Orange is used for main CTAs, highlights, and the logo.
- Secondary
Zapier Yellow appears in warning banners and notification icons.
- Accent
Zapier Charcoal is used for navigation bars and primary text.
- Backgrounds
Zapier White and Light Gray are used for page and card backgrounds throughout the app.
- Text
Charcoal and Medium Gray are used for primary and secondary text, respectively.
- Semantic
Green, yellow, orange, and blue indicate success, warning, error, and informational states in the UI.
Zapier color questions
Hex codes, RGB values, neutrals and how to use the palette.
The Zapier primary color is #FF4F00, known as Zapier Orange. This color is used for the logo and main action elements.
Zapier Orange (#FF4F00) is RGB(255, 79, 0). In CMYK, it is approximately (0, 69, 100, 0).
Zapier uses several grays: Charcoal (#2D2D2D) for text, Medium Gray (#6F6F6F) for secondary text, and Light Gray (#F6F6F6) for surfaces. These provide contrast and clarity against the orange accent.
Use Zapier Orange (#FF4F00) for primary actions and highlights, with supporting grays for backgrounds and text. Accent and semantic colors should be reserved for status indicators and notifications.
The secondary color is Zapier Yellow, #FFB700, and the accent is Zapier Charcoal, #2D2D2D. Together with the primary they make up the three brand colors at the top of this page.
4 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 Zapier's colors consistently when it generates UI.
Make something in the spirit of Zapier
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.