Postmark color palette
SaaSPostmark's color identity is defined by a signature bright yellow paired with deep charcoal and neutral grays, creating a clear, approachable, and highly legible interface. The palette emphasizes clarity and reliability, reflecting Postmark's focus on transactional email delivery.
postmarkapp.comPostmark colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Postmark YellowPrimary255, 199, 44
- Postmark CharcoalSecondary45, 45, 45
- Postmark OrangeAccent255, 94, 43
Surfaces
Page, cards and dividers.- Postmark WhiteBackground255, 255, 255
- Postmark Light GraySurface246, 246, 246
- Postmark Border GrayBorder229, 229, 229
Text
Three tiers of copy.- Postmark Text BlackText34, 34, 34
- Postmark Text GraySecondary text102, 102, 102
- Postmark Muted GrayMuted text153, 153, 153
Semantic
Feedback and state colors.- Postmark Success GreenSuccess46, 204, 64
- Postmark Warning YellowWarning255, 180, 0
- Postmark Error RedError255, 65, 54
- Postmark Info BlueInfo0, 116, 217
Use Postmark's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
postmark-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0074D9;
--error: #FF4136;
--accent: #FF5E2B;
--border: #E5E5E5;
--primary: #FFC72C;
--success: #2ECC40;
--surface: #F6F6F6;
--warning: #FFB400;
--secondary: #2D2D2D;
--text-muted: #999999;
--background: #FFFFFF;
--text-primary: #222222;
--text-secondary: #666666;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
15.9:1
Pass
Text on surface
Needs 4.5:1 for body text
14.7:1
Pass
Secondary text on background
Needs 4.5:1 for body text
5.7:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
5.3:1
Pass
Muted text on background
Needs 3:1 for large text
2.8:1
Fail
Muted text on surface
Needs 3:1 for large text
2.6:1
Fail
Postmark gray and neutral colors
The quiet part of the Postmark palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Postmark WhiteBackground
- HEX
- RGB
- HSL
- Postmark Light GraySurface
- HEX
- RGB
- HSL
- Postmark Border GrayBorder
- HEX
- RGB
- HSL
- Postmark Text BlackText
- HEX
- RGB
- HSL
- Postmark Text GraySecondary text
- HEX
- RGB
- HSL
- Postmark Muted GrayMuted text
- HEX
- RGB
- HSL
About Postmark's colors
Postmark’s palette is built around a high-contrast yellow and deep neutrals, ensuring visibility and brand recognition. The supporting colors provide semantic clarity and UI structure.
Primary yellow contrasts with dark charcoal for legibility.
Accent orange is used for highlights and calls to action.
Neutrals support content hierarchy and accessibility.
Psychology
Yellow conveys optimism, clarity, and warmth, aligning with Postmark’s reliable and friendly service. The deep charcoal and grays add professionalism and trust.
Evolution
Postmark’s palette has remained stable, with yellow as a constant brand anchor. Minor adjustments to grays and accent colors have improved accessibility and modernized the UI.
Where Postmark uses each color
- Primary
Used in the logo, navigation bar highlights, and key call-to-action buttons.
- Secondary
Appears in headers, footers, and primary navigation backgrounds.
- Accent
Used for notification badges, secondary buttons, and interactive elements.
- Backgrounds
White and light gray are used for page backgrounds and content areas.
- Text
Text black and grays are used for headings, body text, and muted UI elements.
- Semantic
Success, warning, error, and info colors are used for status messages and alerts.
Postmark color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Postmark brand color is yellow, with the hex code #FFC72C.
Postmark Yellow (#FFC72C) in RGB is 255, 199, 44. In CMYK, it is approximately 0, 22, 83, 0.
Postmark uses a range of grays including Postmark Charcoal (#2D2D2D), Border Gray (#E5E5E5), and Light Gray (#F6F6F6) for backgrounds and UI elements.
Use Postmark Yellow (#FFC72C) for primary actions and branding, with charcoal and grays for structure and readability. Accent and semantic colors should be reserved for notifications, alerts, and status indicators.
The secondary color is Postmark Charcoal, #2D2D2D, and the accent is Postmark Orange, #FF5E2B. 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 Postmark's colors consistently when it generates UI.
Make something in the spirit of Postmark
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.